Disjecta Membra: Talking about design Archives

Archive: Talking about design

Main

1: Structured text

Talking about design ·· More from April 2005

Beginnings, middles, ends

Writing web code is writing structured text. Structured text has tags and content.

Every structured item in web text has a start tag, some content, and then an end tag.

<tag>
content
</tag>

Even the tags themselves have a beginning, middle, and end.

<
tag
>

</
tag
>

In HTML, with a few exceptions, every tag consists of an opening tag and a closing tag.

Think of the Spanish punctuation for interrogatives and exclamations: ¡Hola! ¿Como esta? A quotation has, in English, opening and closing quotation marks. It can include a quotation. See John Barth’s Lost in the Funhouse for a virtuoso example of nested quotations.

March 20, 2006

2: Character-level design

Talking about design · Web/Tech ·· More from March 2006

Building tags

An HTML tag begins with the < and ends with the delimiter >. When the browser encounters a <, it treats everything that follows, up to the next occurrence of >, as the designator and attributes of a tag.

Designator

The designator of a tag is one of a list of prescribed designators found in the HTML “document type declaration”. If you want to see examples, just view the source of this page. Browsers are programmed to interpret tag-designators in appropriate ways: e.g. an ‘h1’ (top-level heading) tag is usually in a larger font-size and bolded, with some extra space before and after.

Originally all the styling of web pages was to be determined by the tag designators alone, whose interpretation was a hybrid of presentation semantics and content semantics. Now styling is done by stylesheets or style attributes, and the original fusion of semantics and presentation is discouraged in favor of “separating structure and content”. In the more recent XML standard, tag designators are supposed to reflect semantics alone; presentation is determined by stylesheets that assign styles to tag designators. Thus the XML tag ‘<philosophername>’ might be interpreted semantically as the name of a philosopher; how philosophers’ names are displayed would be determined by a stylesheet or XSLT transform, which might well be different for different media.

April 10, 2006

Character-level design: summary & remarks on color

Talking about design · Web/Tech ·· More from April 2006

Each character generated by the browser in displaying a web page must be fully specified in every relevant aspect. Many, even all, aspects can be specified implicitly. The markup below will be interpreted by the browser using its defaults.

<p>There are no indeterminate actual individuals.</p>

The advantage from your point of view is that the browser does the work of specification. The disadvantage is that the look of your page depends on the browser.

Some specification can be done by particular HTML tags (like <i>, <b>, <em> (for emphasis, usually rendered in italics), <strong> (for more emphasis, usually rendered in boldface). If you use a stylesheet, you can tell the browser how to render any HTML tag.

Sub-attributes of the style attribute

To control the look of type in (almost) every aspect, the style attribute, with its many sub-attributes, is needed. The general form of the style attribute is:

Because the span tag is an inline tag, block-level tags like div, p, and h1 should not be included within the span.

Among the sub-attributes appropriate for use in span tags ( the whole list is at Fonts and Text in the CSS2 Specification):

font-family
The main divisions are serif and sans-serif, monospace and variable-width. Browsers have defaults for the “generic” families. The value of the font-family attribute is a list of font names. Example: font-family: Baskerville, Times, serif;.
font-style
The only values you’re likely to use are normal and italic. The default is normal, but once in a while you will need normal to “cancel” the effect of italic as specified in a style sheet.
font-weight
In CSS, bold is not a style (as it usually is in word processors, but is instead specified by the font-weight attribute, in multiples of 100, from 100 (extralight) to 900 (extra- or ultrabold). You can also use the values normal and bold. Very few fonts have weights other than normal and bold.
color
See below.
background-color
See below.
letter-spacing
Add spacing between individual letters. The value should be in ems for consistency across changes in font-size. Example: <span style="letter-spacing: .1em;">
text-decoration
This is handy for getting rid of the underlining that many browsers apply to links. Example: <span style="text-decoration: none;">Undecoration Day</span>. The values are: none, underline, overline, line-through, and blink. Browsers are not required to support blink. In a style sheet, to get rid of underlining for links, insert the following:
a {
text-decoration: none;
}
text-shadow
Give a three-dimensional look to text. Not supported by older browsers. The value for text-shadow consists of up to three lengths and an optional color; there may be more than one such list. The first two lengths determine the offset of the shadow, with the horizontal offset first. Positive values designate rightward and downward offset, negative values leftward and upward. The third length determines the “blur” of the shadow—how diffuse it is. In principle you can specify more than one shadow for the same block of text, but neither Omniweb nor Safari supports multiple shadows (if you do specify more than one, they ignore the attribute entirely). Examples:
style="text-shadow: .2em .2em .2em #444444;"
style="text-shadow: -.2em -.2em .1em #ffffff;"
style="padding: .25em; background-color: #efefef; color: #ffffee; text-shadow: 0em 0em .25em #110800;"
style="color: #fee0cc; text-shadow: .125em .125em .0625em #201010;"
style="text-shadow: 0em 1em .75em #221111;"

It should be clear that shadows work best with large font sizes. With small sizes the text is likely to be hard to read. Notice also in the last example that the shadow extends outside the box containing the text.

Here is an example to copy and paste into the Preview box. Change the values and see what happens.

<div style="padding: .5em; background-color: #f0f0f0; font-size: 1.5em;"><
span style="font-style: italic; font-weight: 500; letter-spacing: 0em; text-shadow: .1em .1em .1em #111010;">L’espérance est
<span style="text-decoration: underline;">la plus grande</span>
de nos folies.<br />—Alfred de Vigny, <i>Stello</i> (1832)

Color

The color-space for HTML and CSS is RGB (red-green-blue). Every color name is a sequence of three pairs of hexadecimal digits (0–9, a–f), encoding values for each of the base colors from 0 to 255 (=ff hexadecimal).

Hue, saturation, and value

A more intuitive set of dimensions for colors is hue, saturation, and lightness (or value), HSL or HSV for short. These are represented only indirectly in the present notation, but it helps to understand how the hex numbers determine values in the HSV color-space.

Hue, although it is the simplest to describe—hue is just the place of a color on the spectrum, abstracting from the other two dimensions—, it is the least straightforward to translate into hex notation. The base colors are easy—reddish colors have a relatively high red value. But others, like orange and violet, are not. See below for examples.

In general, the lightness or grey-scale value of a color is determined by the average of the three hex values. But on the screen or in print some colors (like yellow) are naturally bright and some (like blue) are naturally dark. Thus #ff0000 = pure red and #0000ff = pure blue will not look equally bright.

The saturation of a color determines what we would call its richness or depth. Pastels are relatively unsaturated, spectral colors are saturated. In the present notation, saturation corresponds roughly to the variance in the three hex values: #00aa33 is saturated, #667799 is not.

Computer monitors use the RGB color space. So you can count on getting a shade of red if you specify the CSS color-value #ff0000. But which shade will depend on the monitor. Similarly grey values will depend on the monitor, and in particular on the “gamma” setting. The higher the gamma value, the darker the actual grey-value will be for mid-range greys. In choosing colors, don’t count on precise reproduction of the colors you see.

An HTML tag can have both a color and a background-color attribute (note the hyphen), whose values are the hex values just described. Legibility requires contrast (i.e., difference in grey-value) but too much contrast can be tiring for the eye. Three examples:

Here the grey-values are close, and the text is therefore hard to read.
“Je sens/que la muse indignée, avec ses poings puissants,/Peut, comme au pilori, les lier sur leur trône.” —Victor Hugo, in Les feuilles d’automne, III

Black on white. Legible but perhaps hard on the eye.
“Je sens/que la muse indignée, avec ses poings puissants,/Peut, comme au pilori, les lier sur leur trône.” —Victor Hugo, in Les feuilles d’automne, III

White on black. Don't do this except for special effects.
“Je sens/que la muse indignée, avec ses poings puissants,/Peut, comme au pilori, les lier sur leur trône.” —Victor Hugo, in Les feuilles d’automne, III

Slightly off-white background, slightly bluish type.
“Je sens/que la muse indignée, avec ses poings puissants,/Peut, comme au pilori, les lier sur leur trône.” —Victor Hugo, in Les feuilles d’automne, III

Don’t even think of doing this.
“Je sens/que la muse indignée, avec ses poings puissants,/Peut, comme au pilori, les lier sur leur trône.” —Victor Hugo, in Les feuilles d’automne, III

The palettes below illustrate the way in which hex values correspond to locations in HSV colorspace.

Grey scale

ffffff cccccc aaaaaa 999999 777777 555555 333333 111111

Red

ff0000 cc0000 aa0000 990000 770000 550000 330000 110000

Hue

ff0000 f89955 ffff00 00ff00 00aa44 00bbdd 6611ff

Saturation

888888 778899 6688aa 5588bb 4488cc 3388dd 2288ee 1188ff

12-step color wheel

The first color is 8f3150.

The first color is 90412e.

The first color is 967532.

The first color is 8c9836.

The first color is 619836.

The first color is 489746.

The first color is 479977.

The first color is 41879a.

The first color is 325498.

The first color is 3b3397.

The first color is 6c3497.

The first color is 8e3485.

Useful software

On the Mac, the following programs are very helpful in dealing with color and with graphics generally.

GraphicConverter: From Lemke Software ($30 shareware). Workhorse program. Quicker and easier to use for what it does than Photoshop.
QuickPicker: From Markerink. Puts the hex value of the color of whatever point of your screen you click onto the Clipboard.
Painter’s Picker: From Old Jewel Software. A nice substitute for the system color palette. Lots of features. Use in any graphics program.
ColorBurn: From Firewheel Design. A Dashboard widget that presents daily a four-color palette, with the hex values.

April 17, 2006

Block-level design: building an academic home page

Talking about design ·· More from April 2006

Some guidelines

Suppose you want to design your academic home page. Not the one that has your pet’s pictures and your latest CD purchases on it, but the one that will be the electronic equivalent to your CV and a gateway to your research (publications, preprints, research groups…).

Consider who is going to read your page, and why.

People interested in your research and who want to read your publications and preprints
Prospective employers
Fellow graduate students and colleagues
Students
People who have seen your name somewhere and are curious about you
Old flames

What do they want to know?

Who you are (are you the Jane Smith they’re looking for, or someone else?
How to reach you (professionally, that is)
Your credentials
What you’ve done and where they can find it
What you’re planning to do
Whether you’re interesting or not

Your web page design should make it easy for the relevant people, who will mostly be academics, to find out what they want to know. Information for friends and family should go somewhere else—on a personal page, or another website.

The top line

The principal top line should be an informative title (for a complex site, there may be a site title in smallish print above the principal top line). For a personal page nothing is more informative than your name. It should be prominent but not egregiously so.

In page layout, the most prominent elements should be formatted with header tags: the tag name is h followed a number from 1 to 6. We’ll add some style information (which would normally go in the stylesheet) to control the look, and an id attribute to indicate the purpose of this particular header. Copy and paste in the Preview window.

I’ve used margin attributes to create space before and after the header, set the weight to 400 so as to override browser defaults which usually set headers in boldface, and made the font size a relatively modest 1.5em (which is 1.5 times the default size). The outer <div> is a wrapper which I am using to set the font and font size for the whole code sample.

Who you are and where

The next thing people are likely to want to know is how to reach you. Add an address, for example (Preview):

The box model

The key to designing block-level elements is the so-called “box model”. A block is always a rectangle. It has four margins, which are areas of space outside the box that define (in general) how close other elements can be to it. Within the box there is padding along each edge, which defines how close anything inside the box can get to its edges. Finally, there are four borders, with attributes that define their width, their color, and their type (solid, dotted, etc.).

One further attribute plays a role in determining the text layout within a block. The text-indent attribute determines the placement of the beginning of the first line in a chunk of text (in left-to-right languages, the placement of the left margin of that line, in right-to-left languages the right margin). The value of the text-indent is a length, typically in ems. A negative value is an “outdent” or “hanging indent” such as you might have in an outline or bibliography.

A list of publications

One item in your home page will be a list of publications and preprints—work that is forthcoming or in progress, as well as work already published. There are several ways to do lists. I’ll start with a simple-minded sort of list, which is just a series of divs. The novelties here are the hanging indent and the bottom margin (Preview).

<div style="font-family: Baskerville, Times, serif; font-size: 12pt;">
<h1 id="myname" style="margin-top: 1em; margin-bottom: 1em; font-weight: 400; font-size: 1.5em;">Your name here</h1>
<div>Philosophy Department</div>
<div>Emerson Hall</div>
<div>Harvard University</div>
<div>Cambridge, Massachusetts</div>
<h2 id="works" style="margin-top: .87em; margin-bottom: .625em; font-weight: 400; font-size: 1.25em;">Publications and preprints</h2>
<div style="margin-bottom: .5em; margin-left: 1em; text-indent: -1em;"><i>Prolegomenon to any future metaphysics.</i> Königsberg, 1787. —This is my most recent and comprehensive work, but serious people will read the <i>Critique</i>.</div>
<div style="margin-bottom: .5em; margin-left: 1em; text-indent: -1em;">“Corrections to the <i>Prolegomenon</i>.” <i>Philosophische Zeitschrift</i> 2 (1788):1–100.</div>
</div>

April 17, 2006

Setting up a home page

Talking about design ·· More from April 2006

Directory structure

Use Transmit, Fetch, or some similar program that gives you a graphic interface to your area on the university computers. When you open Transmit, you’ll see a window that looks like the standard window for opening or saving files, but with two lists instead of one. The right-hand list is at first a list of “favorites”—that is, of links to ftp sites. Here you will add a path to your HTML files.

On the right-hand side, in the list on the right, click on the plus button at the bottom of the list panel.

A dialog window should appear. Enter the appropriate information (the nickname is up to you). Yours will resemble mine, but with your username in place of mine, and your password (which is the same as your email password). (The string ‘facstaff’ in the Remote Path will have to be changed too, if you’re a student.)

Save your favorite. Double-click on it in the favorites list (it should have a wustl icon next to it, as you see in the window above). You should be in a directory called “public_html” (this directory should already exist, but if not, in what follows you’ll see how to create it). It should be empty unless you've already added pages to your site.

You add folders to this directory as you would in the Finder. Select New under the File menu. Call your first folder “images” (lower-case: unix systems, unlike macs, distinguish upper and lower case letters in filenames). Your directory should look like this (minus the two files):

Interlude: Say no to robots

The robots.txt file is a text file that tells web crawlers whether or not they can index the directory and its subdirectories. For information, see Robotstxt.org (one of many sources). To create a robots.txt file, open your favorite text editor, create a file called ‘robots.txt’, and add what you need to exclude whichever robots you want to exclude. To exclude all of them, write:

User-agent: *
Disallow: /

Save the file and upload it to whichever directory you don’t want robots to inspect. (This won’t be your public_html directory unless you don’t want search engines to index your home page.) In Transmit this is a matter of simply dragging the robots.txt file from the left-hand file list to the right-hand file list (assuming that on the left-hand side you’re looking at the folder in which you saved the robots.txt file.)

This is useful if you want to create a folder with web pages in it that are “private” insofar as they won’t be indexed by Google et al. (They won’t be entirely private: for that you need some sort of password protection.) Put a robots.txt file in the folder with the two lines above.

Uploading files

Open the sample home page in a new tab or window. Download the zip archive of samples (it’s the last link on that page) and unzip it if this isn’t done automatically by your browser. In Transmit find the folder you just unzipped (it will be in the folder where downloads usually go) and open it. You’ll see a list of files like the one on the right. Drag everything to your public_html folder on the right-hand side of Transmit’s main window. Transmit will present a dialog asking if you want to overwrite existing files and folders. Unless you’ve already uploaded some files, go ahead and replace those files. Make sure that the folders and files are there before you leave Transmit. You may also want to upload a robots.txt file that excludes all robots. Later, when your web page is ready for public viewing, you can (and should) delete this file, so that search engines can index your page.

View the files

The URL for the sample page will be

http://artsci.wustl.edu/~yourusername/articletemplate.html

Paste this URL in the location panel of your browser window, insert your user name in place of ‘yourusername’. Then hit return.

The page you see should look like the thumbnail at the left. If you don’t see anything, or if you get an error, make sure you typed the link correctly. If you still don’t see it, go back to Transmit or Fetch and make sure that the path to the articletemplate.html file is

ftp://artsci.wustl.edu/home/artsci/…
/yourusername/public_html/articletemplate.html

(the ‘…’ stands for the part of the path name between ‘artsci’ and the user name). If it isn’t, you need to make sure the sample files are in the public_html directory and that they aren’t inside a directory within that directory or something like that.

If you see the sample page, make a bookmark for it. Then try the links to make sure they all work.

URLs and unix paths

Notice that the link to the PDF file ends in pdf/leibnizcv.pdf. That is because the file is in its own directory (in Mac language, its own folder), which is called ‘pdf’. The part of the URL after ‘~yourusername’ is the path to the file (in this case leibnizcv.pdf, starting from the public_html directory.

A URL consists of a domain (here, artsci.wustl.edu) and a path, which can terminate in the name either of a folder or of a file. It is customary in setups where people have usernames to use ‘~username’ to denote the path to the user’s public_html folder. For ftp, on the other hand, the unix pathname, which is in effect the internal “name” of the file in the server’s file system, is used.

Thus the URL

http://artsci.wustl.edu/~ddeschen/index.html

is translated into the unix pathname

artsci.wustl.edu/facstaff/philo/ddeschen/public_html/index.html

If you are uploading the file index.html you use the unix pathname, but if you are viewing the file in your browser you use the URL. What’s happening behind the scenes is that the webserver has a translation list: it looks up “~ddeschen” and finds the string “facstaff/philo/ddeschen/public_html”; it appends that string to the domain name “artsci.wustl.edu” and thereby generates the path to the file “index.html” (or to whatever follows “~ddeschen” in the URL).

Editing your page

You can edit your page in anything that reads and writes text files. A static web file has the suffix ‘.html’. That suffix tells a web server to send it as html, and a browser to interpret it as html (the DOCTYPE also contains this information,

Links to sample pages at Disjecta Membra:

Home Page 1

Home Page 2

Article sample

but the server doesn’t look inside the file to see what type it is, and some older browsers may not interpret the DOCTYPE). If you double-click on the local version of the file, it should open in your default web browser.

An editor that can also use ftp to transfer the pages to the remote site (that is, to artsci.wustl.edu) is convenient and quite a bit quicker to use (the alternative is to use Transmit or Fetch). An editor that can preview your pages or send them to the browser for previewing is also very convenient. Among the editors I’ve used are:

BBEdit. The list price is $199, but at the Academic Superstore it’s $50.
A real workhorse. I use BBEdit for editing static web pages like my home page. Among its many useful features is a quick way of comparing two versions of a file (Search > Compare Two Front Documents) and syntax coloring for HTML, CSS, and a variety of programming languages including PHP. BBEdit can preview documents itself or send them to one or more browsers for previewing. This last feature is handy if you want to check the way pages look on several different browsers at once. Another very useful feature is that BBEdit can open and save files directly from and to your remote site—it has built-in FTP.
HyperEdit. $19.95.
Editor for HTML and PHP. Instant preview. Includes a handy “code snippets” palette that lets you attach key equivalents to pieces of code for quick entry. BBEdit has a “glossary” that does the same thing, but less conveniently. HyperEdit does not have built-in FTP.
MarsEdit
This and Ecto are the best Mac weblog editors. Both have simple arrangements for uploading files and pictures to Blogger or Typepad, both have code snippets. Ecto has more features and its development cycle is more rapid. I use MarsEdit mostly because the interface is cleaner, but this is a matter of taste.

Once you’re done editing your page, the next step is to save it to the server (in this case, to artsci.wustl.edu). In BBEdit this is done through the Save to FTP/SFTP Server… item in the File menu. You’ll need to set up the FTP first, using the same information you use to set up Transmit or Fetch.

Otherwise you will be uploading your page using Transmit or Fetch. The process here is the same as the process for uploading new files. The only difference is that you’ll see a dialog asking if you want to overwrite the old file.

May 15, 2006

Style Sheets

Talking about design ·· More from May 2006

Formally speaking, a style sheet is nothing more than a simple rewrite grammar. In the body of a web page a browser may find a tag that looks like this:

The attribute class tells the browser to look in the style sheets associated with the page for a piece of code that looks like this:

.special {

[attribute-value list]

}

(Notice the dot in front of "special".) The browser substitutes for the attribute-value class: special the contents associated with the value special in the style sheet. The result is

The rewrite rule defined by the style sheet is:

class="special" → style="[attribute-value list]"

The emphasized portions are required by HTML/CSS syntax, and will be taken account of automatically by the browser. Effectively your contribution is the style-designator special and the contents associated with that designator in the style sheet.

You can also associate styles with HTML tags (see the stylesheet below). Specifying the style of an h1 tag, say, amounts to inserting a style attribute with the specified attributes into every h1 tag. If you define a body style, all the text in your document will use that style unless it is overridden.

The primary reason to specify styles for HTML tags is to override browser defaults. In the style sheet below you will see text-decoration: none; specified for anchor (a) tags. This will override the default setting for links, which in most browsers is underline unless the user has changed the default. Similarly in many browsers header tags (h1 and so forth) are put into boldface, which in large font sizes is unsightly. You can get rid of the boldface by specifying font-weight: 400; or font-weight: normal; for h1 and so forth.

Inline style sheets

A style sheet can be placed in the head of a document. The HTML/CSS preview form at the top of this page creates an HTML document and inserts the style information you specify in the first box between style tags in the head of that document. That style information will control the appearance of whatever code you put into the second box (which defines the contents of the body tag).

<head>

<style>
body {

}

h1 {

}

h2 {

}

.special {

}

a:link {

color: #222288;

text-decoration: none;

}

a:visited {

color: #883322;

text-decoration: none;

}

a:active {

color: #bbbb22;

text-decoration: none;

}

a:hover {

background-color: #aaaaaa;

text-decoration: none;

}

</style>
</head>

You can also link to an external style sheet using (of all things) the link tag. See the code below. You can use either relative or absolute URLs.

The advantage of using an external style sheet is that more than one page can link to the same sheet. You can thus have a single sheet that creates a uniform “look” for your site, and for those pages that deviate or add to it use inline style sheets. The following is part of the head section of my home page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Dennis Des Chene</title>
<base href="http://www.artsci.wustl.edu/~ddeschen/" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<link rel="icon" href="Images/siteicon.jpg" type="image/jpg" />
<link rel="Stylesheet" href="styles/index.css" charset="utf-8" type="text/css" />

</head>

June 6, 2006

CSS Layout

Talking about design · Web/Tech ·· More from June 2006

CSS (Cascading Style Sheets) combines two functions: it tells the browser how to style and format individual blocks of text; it also determines how those blocks are to be laid out in the viewport (for browsers) or the page (for print).

Flows

A web page has two kinds of flow. The first is the “box flow”—the positioning of boxes on the page. This is determined by the “document tree”, which is part of the “Document Object Model” or DOM. (Use “Websites as Graphs” to exhibit the tree structure of any webpage.) To the “descendant” relation in the tree corresponds the “nesting” relation in the layout. Immediate descendants of the same node (“sisters”) are laid out side-by-side if possible, or above-and-below if not. This is called the normal flow.

The immediate ancestor of a box is called its “containing box”. Normally in a visual presentation a box will be entirely within its containing box, but by using negative values for the margins you can make a box that protrudes outside its container (see the “Articles” page in the sample pages for some examples.) The <html> tag is the root of the document tree; in HTML its immediate descendants are the <head> and the <body> tags. The <body> tag is the containing box for all text that is not contained in some other box.

The other flow is the “text flow” within each box. The text flow is a line (text is “linear”, as the McLuhanites like to say) which is broken up into distinct line-boxes so as to fit whatever box it’s contained in. (If it isn’t contained in any box, it will occupy one line. Text without whitespace will also occupy a single line. That can be a problem when you cite a very long URL. It can also be a problem if you are using a large font size. Remember that unless you specify the width of a box, its width will probably not be the same for every viewer.)

honorificabilitudinitatibus

You can force a line-break (if your text is in verse, or if you are presenting raw code) by using <br />. Otherwise line-breaks will be inserted as needed by the browser. You can’t count on line-breaks occurring in any particular place (except that they will always occur at whitespaces in the text). A header, for example, that in your view of the page occupies one line may in other people’s views occupy two lines.

Columns

Many pages now, including the pages generated by some weblog and wiki software (Moveable Type and TypePad, WordPress, MediaWiki), are laid out in columns. Column layout ought to be straightforward. But it isn’t. Browsers differ significantly in their rendering of the code used for columns. If you want to make sure that your layout works for all browsers, there is no substitute for testing. (If you have a Mac, use a library computer to test Explorer for Windows.)

The easiest way to do columns (and to have some assurance that they will work on most browsers) is to start with someone else’s layout and modify it. Examples:

Glish: CSS Layout Techniques:
Two- and three-column layouts. Old, but still useful.
CSS Beauty
Lots of examples. Not all of them are great design, but you can see all sorts of techniques.
CSS Garden
One page, many designs. All the designs can be downloaded. Give credit where credit is due if you use one.
Design Inspiration
List of sites.
CSS Vault
Yet more examples.

The principle behind all column designs is floating boxes. In the CSS Specification the display, position and float properties determine where a box is placed in the “flow” of text on a page.

Display

This property rarely needs to be specified explicitly. The most important distinction is between block and inline display. A block is just what the name implies: a rectangular area, which may or may not overlap with other blocks. An inline box is a “line” of text which may include linebreaks. Blocks are part of the block flow mentioned above; inline boxes are construed to be part of the text-flow within their containing block.

The HTML tags div, p, and li are automatically given the display: block attribute. The span, sup, and sub tags are automatically inline. It would be bad form to change those defaults.

Position

The position attribute tells the browser how to interpret positional information. The default position is static, which means that the box is laid out according to the normal flow. Only if the position is not static do you need to specify it explicitly. The coordinates of the position are given by the top, bottom, right, and left properties.

The alternatives to static positioning are

absolute: the coordinates determine the position of the box with respect to its containing box. Other boxes will ignore an absolutely positioned box; they will flow as if it didn’t exist.
relative: the position of the box is first calculated as if it had static position; it is then offset according to its coordinates. For example, a subscript could be given the attribute top: .25em;. This block has been offset by .25em. Note that the positive value for top pushes the block down.
fixed: the position of the box is “fixed” with respect to the viewport, which in most cases is the browser window. For an example, see the alternative style for Philosophical Fortnights. The CSS for this is
/* the fixed menu */
.forevermenu {
position: fixed;
left: 0%;
bottom: 0%;
margin-bottom: 12px;
margin-left: 12px;
background-color: #f3f3f3;
text-align: center;
font-size: .92em;
font-family: "American Typewriter", URWGalaxieT, URWImperialT, Galaxie, Arial, Helvetica, sans-serif;
}

.forevermenuitem {
width: 7em;
height: 1.5em;
padding-top: .5em;
padding-bottom: .125em;
padding-left: .5em;
padding-right: .5em;
background-color: transparent;
/*background-repeat: repeat-y;
background-image: url(images/menubarimgtop.png);
background-position: 0% 0%;*/
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #303030;
line-height: 1.125em;
font-size: .92em;
font-family: MinisterT, Palatino, 'Times New Roman', serif;
}

.forevermenuitem + .forevermenuitem {
width: 7em;
height: 1.5em;
padding-top: .5em;
padding-bottom: .125em;
padding-left: .5em;
padding-right: .5em;
border-top: dotted 1px #aaaaaa;
background-color: transparent;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #303030;
line-height: 1.125em;
font-size: .92em;
font-family: MinisterT, Palatino, 'Times New Roman', serif; }

And the corresponding HTML is:
<div class="forevermenu">
<div class="forevermenuitem">
<a href="http://tlonuqbar.typepad.com/phfn/ix2005.html">Main</a>
</div>
<div class="forevermenuitem">
<a href="#recentitems">Recent</a>
</div>
</div>

Floats

A multi-column layout is first of all a set of floating boxes. The float attribute, whose values are left and right, tells the browser to take a box out of the normal flow (as if it had absolute position) and to position it as close as possible to the point in the normal flow at which it was referred to. Further positioning is usually specified by margin attributes.

A simple two-column layout looks like this:

#column1 {
float: left;
width: 18em;
border-right: solid 1px #aaaaaa;
}

#column2 {
float: left;
width: 24em;
margin-left: 1em;
background-color: #fafafa;
}

The corresponding HTML is this:

<div id="column1">Les hommes en société sont si peu faits pour les choses positives, qu’ils ne s’attachent à la recherche de la vérité même, que jusqu’au point où cette découverte cesse d’intéresser l’imagination.</div>
<div id="column2">Les hommes en société sont si peu faits pour les choses positives, qu’ils ne s’attachent à la recherche de la vérité même, que jusqu’au point où cette découverte cesse d’intéresser l’imagination.</div>

Each box is set to float left. The browser should set them side-by-side if they fit the window. Notice that the column-widths are specified in ems. One problem with column layout is that if the total width is more than that of the browser window, the columns will be laid out top-to-bottom instead of side-by-side. There are various ways to deal with this. For example, you can specify the widths in pixels, making sure that the sum is not more than say 800. The browser should leave the columns side by side even if the window isn’t wide enough to show them. Or you can use percentages. The columns will remain side-by-side, and fit the window, but the layout will look crowded if the user has specified a large default font. There isn’t any solution that will work in all circumstances.

Postils

A postil is a small marginal note. Here’s an example:

.postil {
float: right;
width: 108px;
margin-top: .5em;
margin-left: .5em;
margin-right: .0em;
padding-top: .5em;
padding-bottom: .625em;
padding-left: .5em;
padding-right: 0em;
border: none;
border-left: 1px solid #e4e4dc;
background-color: #fcfcfa;
font-size: .87em;
line-height: 1.25em;
text-indent: 0em;
}

This is a postil. Notice that it is positioned at the right edge of its containing box. Its containing box is the paragraph beginning ‘For an example’. Since the postil is longer than the paragraph, it extends outside its containing box into the next paragraph.

For an example, see “Spume” at Philosophical Fortnights. The first note in the main body text is produced by the code below. Notice that even though the text for the postil is in the middle of the paragraph, it is displayed in a box of its own on the right, and other text flows around it.

<div class="norm">One of the targets of Nietzsche’s critique is the view, held by Descartes and many others, that for some, if not all, volitions the will, or the mind itself, is the proximate <i>undetermined</i> cause. Desmond Clarke, in his recent book <i>Descartes’s theory of mind</i>, rightly emphasizes the limits of Cartesian will. <div class="postil"><span class="addendum">Added</span> 5 May: A précis of <i>Descartes’ theory</i> was just published in the <i><a href="http://tls.timesonline.co.uk/">Times Literary Supplement</a></i>.</div> But he goes too far, I think, in holding that according to Descartes the will is supervenient upon the body-machine(<a name="ref601"></a><a href="#note601">↓</a>). Descartes is quite conventional in that respect: our freedom may be less than we think, but we <i>are</i> free; and no machine is. Nevertheless the scope of a Cartesian agent’s freedom is, as Clarke says, hemmed in by sensations and the passions that result from them. It is more like an embattled Freudian ego than like God—whose freedom in acting is absolute—even though the freedom of the will is that aspect of the mind with respect to which we most resemble God. </div>

Another example—code for a floating image box:

.imgbox {
float: right;
margin-left: .5em;
margin-right: .5em;
padding-top: 1ex;
padding-bottom: .5ex;
padding-left: .5em;
border: none;
}

The corresponding HTML would be:

The image floats right. The left margin, set at .5em, keeps nearby text from crowding up against it.

June 20, 2006

Lists; centering

Talking about design ·· More from June 2006

Lists

Lists differ from ordinary text in two ways. Ordinarily they have space above and below; and list items can have inline markers—numbers or bullets. If you don’t specify the formatting of a list (its margins, padding, and so forth) the browser will apply defaults. These may or may not be to your liking. In the example below, the left margin, the space between the list-item numbers, and the space above and below the list have their default values. These will differ from browser to browser.

Top Three Philosophers

Kant
Hegel
Quine

The treatment of lists in CSS looks more complicated than it is in practice. CSS2 has provision for counters and counter-styles (see “Generated Content” in the CSS spec), but browsers don’t support it. The only “generated content” that you can expect most browsers to display is the content generated for list items (and by the :before and :after pseudo-elements).

The block-level formatting of lists is like that of other block-level tags. The only difference is that an <li> tag generates a principal box and a marker box. The marker box can contain a bullet of some sort or an index.

Position

The position of the marker box can be inside or outside the principal box; the default is outside. Example:

Top Three Philosophers

Kant was by far the greatest philosopher who ever lived. He makes everyone else look shallow. Not only that, but he wrote in German, and he took a walk at the same time every day. You could set your clock by him.
Hegel is said in his later years to have looked like “death upon the chair”. He wrote a lot of books. Some of them are called The Phenomology of spirit and The Philosophy of right.
Quine

Type

The “type” of a list item is the kind of bullet or the numbering system it uses.

For bullets, there are various default types, including disc, circle, and square. Browsers will generate more-or-less appropriate characters to realize these types.

Top Three Philosophers

Kant
Hegel
Quine

For numbers, there is a wide variety of options. The ones you are likely to use are decimal, lower-roman, upper-roman, lower-alpha and upper-alpha.

Top Three Philosophers

Kant

Critique of pure reason
Dreams of a spirit-seer

Hegel

Phenomenology of spirit
Lectures on the philosophy of art

Quine
Maimonides
Crescas

Here’s the code for the list above:

<ul>
<li style="list-style-type: lower-roman">Kant</li>
<ul>
<li style="list-style-type: lower-alpha"><i>Critique of pure reason</i></li>
<li style="list-style-type: lower-alpha"><i>Dreams of a spirit-seer</i></li>
</ul>
<li style="list-style-type: upper-roman">Hegel</li>
<ul>
<li style="list-style-type: lower-alpha"><i>Phenomenology of spirit</i></li>
<li style="list-style-type: lower-alpha"><i>Lectures on the philosophy of art</i></li>
</ul>
<li style="list-style-type: square">Quine</li>
</ul></div>

Notice that you can mix types in a single list. A list embedded within a list will be doubly indented as it would be in an outline.

Images as bullets

The “bullet” for a list item can be an image specified by the style sheet. Notice that the image has to be no taller than the line-height specified for the list items. If that is set in ems, you may have problems if the user sets the default font-size much smaller than you expect. The disadvantage of using list-style-image is that formatting is up to the browser. I found it difficult to position the bullet-image nicely. In the examples below, I’ve used background images instead to get the same effect.

Quine
Hegel
Kant

li.listfig {

margin-left: -2em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/listfig.png");
background-repeat: no-repeat;
background-position: 0% .625ex;
}

li.checkmed {

margin-left: -2em;
margin-bottom: .625em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/checkmed.png");
background-repeat: no-repeat;
background-position: -2pt .25em;
}

Because the default in most browsers is to give an li tag a bullet (usually of disk type), if you want your default list times to be unadorned, you must specify that in your style sheet.

li {

list-style-type: none; }

Centering

Sometimes you want an image or a caption to be centered in the column it appears in. In CSS there is only one way to center anything: you put it inside a div with the attribute text-align: center.

Examples from the style-sheet for this weblog:

HTML:
<div class="imgboxcentered"><img src="http://tlonuqbar.typepad.com/djm/images/scrollsmall.png" alt="scrollsmall" title="Small scroll" /></div>

Stylesheet:
.imgboxcentered {

padding-top:.5em;
padding-bottom:.5em;
padding-left:1em;
padding-right: 1em;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
}

Another example (a caption style):

.caption {

padding-top: .5em;
line-height: 1.25em;
text-align: center;
text-decoration: none;
font-size: .87em;
}

June 27, 2006

Writing legible code

Talking about design ·· More from July 2006

Pounding out code that does what you want, more or less, is one thing. Writing clean, legible code is another. Legible code has a clear structure. It is easy (relatively speaking) to revise. Its pieces can be readily reused in other contexts. It saves labor and thought.

Closure

Always close tags. When you write an opening tag, write the closing tag too. For example, if you’re putting in a link <a href="…>, it’s easy to forget the close quotes for the URL and the close tag </a> for the link. If you type <a href=""></a> immediately, then you don’t have to remember to finish the quotes and the tag. Not having to remember stuff is a good thing.
The same in CSS. When creating a class in CSS, type the closing curly brace immediately. The same goes for attributes: if you type font-family: but you haven’t decided which font to use, type the semicolon (which is effectively the close tag for an attribute specification). Otherwise the browser is likely to ignore everything in the style sheet that follows.
.weirdstuff {
font-family:;

}

Comment copiously

The code in HTML for a comment is . That’s an exclamation mark and two hyphens. In CSS the code is /* your comment here */. Everything inside comment tags is ignored by the browser. It will, however, be visible to any user who views your source, so don’t put any embarassing secrets or libelous remarks in your comments!

Uses:

Information about the document. You can include your name and so on, and (more importantly) a revision date. One good place to put this is immediately after the <title> of your document.
Visual markers. Use something like  to mark off sections of code (e.g. the beginning of the <body> in HTML.
Identifying chunks. In some cases the opening and the closing tag of an item may be separated by lots of other stuff. This is true for the divs that define a two-column layout, or for the opening and closing of a list. It’s very helpful to add what in effect are your own “opening” and “closing” tags to items like this so that you know which closing </div> goes with which opening <div>. Otherwise, if a closing tag is inadvertently omitted (or a superfluous tag left in) you may have a hard time figuring out what went wrong. View the source for this page and you will see quite a few comments of this sort: every list, for example, including this one, has an opening and a closing comment that identifies it uniquely.
Reversion. Sometimes you may make a change you’re not sure you’re going to keep. In order to make reversion to the former state of your document easy, rather than delete the code you’re replacing, put it inside a comment.

Recycle ruthlessly

The rule is: don’t invent anything twice if you can help it.

Code snippets. In programs like MarsEdit and HyperEdit, you can create “snippets” and assign key-equivalents to them. A snippet is just a bit of text, typically code, that you are going to use again and again. For example, in this weblog and in Philosophical Fortnights, inset quotations have a style of their own <div class="inset">… </div>. I’ve made a snippet for this. It includes the close tag, so that in using the snippet I automatically adhere to the first rule above.
CopyPaste. This is one of several programs that allows you to save clipboards. I use this constantly not only in writing code but in writing lecture notes and other documents in which the same structures appear again and again.
Templates. Save and reuse an “empty” document if you’re going to be creating several of the same sort. I also have made a template for Philosophical Fortnights so that I can preview drafts without posting them.

July 11, 2006