2: Character-level design

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

Building tags

An HTML tag begins with the delimiterDelimiters usually come in pairs: an opening delimiter tells the parser to treat everything that follows, until it recognizes the corresponding closing delimiter, in some special way, e.g. as a name. < 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.

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:

<span style="attribute1=value1; attribute2=value2; …">Your text here.</span>

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.

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><!--pullout--> 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:

<div class="imgbox"><img src = "http://tlonuqbar.typepad.com/phfn/images/200605/mauzibonheur.jpg">

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

About Disjecta membra

Web/Tech ·· More from July 2006

These are notes for a tutorial on designing web pages. From scratch, that is, rather than by using a WYSIWYG editor like Dreamweaver. The notes are oriented toward designing a simple academic home page using HTML and CSS. They’re sketchy in places because I expected to fill in details in presentation. But they may be useful as a supplement to more standard forms of documentation. On this page they are in reverse chronological order. To read them from first to last, go to the Talking about design categories page.

Reference: style classes for this weblog

Web/Tech ·· More from July 2006

HTML

For comments, use the comment snippet (keyboard equivalent control-command-K).

Character-level

Character-level classes are used with the "span" tag.

• addendum
• smc (smallcaps)
• footnotesym (for footnote references; but see below under “References”)
• isbnean (for ISBNs, EANs, code, etc.)
• mathsup and mathsub
• shd (shadowed text: not all current browsers recognize this)

Marsedit: Use the snippets addendum, footnotesym, isbnean, and smallcaps.

Body text

Use norm for ordinary body text paragraphs. For headings within an entry, use entryheading1 and entryheading2.

Marsedit: Use the snippets norm and entryheading1 (change ‘1’ to ‘2’ for entryheading2.

Indented text

For indented text, use indented, indentedtan, and indentedcode. The last is for code and similar sorts of text. The class hangindent yields a hanging indent. Example (hangindent inside inset):

Inter hos tu, mi More, uel in primis occurrebas; cuius equidem absentis absens memoria non aliter frui solebam quam presentis presens consuetudine consueueram; qua dispeream si quid unquam in uita contigit mellitius. Ergo quoniam omnino aliquid agendum duxi, et id tempus ad seriam commentationem parum uidebatur accommodatum, uisum est Moriae Encomium ludere.

Marsedit: Use the code snippets indented, etc.

Notes and so forth

Notes within the body text can use internote or zusatz.

This is an internote.

Bibliography

bibauth. bibtitle. The class bib is used for bibliographical items, bibauth for authors’ last names, bibtitle for titles.
bibauth. “Article title.” bibjtitle 99 (1889) 1–28. The class bibjtitle is used for journal titles, bibvol, bibdate, bibpages for volume, date, pages.

Marsedit: Use the code snippets bibform and bibformj to create bibliographical entries. The snippet bibftn is for bibliographical items in footnotes.

References

The footnote class is for footnotes. If you want a dividing line between the notes and the bodytext, use updatedivider.

MarsEdit: use ref down or footnotesym to create the reference, and ref up or (preferably) footnote for the note.

ref down creates a string of code that looks like this:

(<a name="ref"></a><a href="#note">↓</a>)

Insert a random number after ‘ref’ and the same number after ‘#note’. Then move to the point in your entry where the footnote will go. Insert the footnote snippet. It looks like this:

<div class="footnote">(<a name="note"></a><a href="#ref">↑</a>)</div><!--note-->

Insert the same random number after “note” and after ‘#ref’. The links will allow a reader to jump to the footnote and then back to the appropriate place in the body text.

Once you have uploaded the weblog entry to the weblog, and if the entry is extended, copy the URL of the entry (from its “individual” page) and paste the URL in front of every occurence of ‘#note’ and ‘#ref’ in the entry. That will ensure that footnote references behave correctly on the main page of your weblog.

Quotations

Inset quotations use the inset class (the quotation in the sidebar has its own class, thequote; this has a different background image attached to it). If an inset does not include a byline, use insetnoby. For an inset quotation in a footnote, use insetftn.

A byline inside an inset quotation uses the bylineinset class. There is also a byline class for quotations that are not inset.

Example:

All uneasiness therefore being removed, a moderate portion of good servers at present to content Men; and some few degrees of Pleasure in a succesion of ordinary Enjoyments make up a happiness, wherein they can be satisfied.

Locke, Essay 2c21§44

Marsedit: Use the snippets inset and byline (adding ‘inset’ to the class name ‘byline’ for a byline inside an inset).

Images

O. R. Snodgrass

The usual setup for an image is to put it inside a div with the class imgbox. imgbox creates a floating box on the right-hand side of the column, with sufficient space between the image and the bodytext. The caption class is for captions.

A image can be floated on the left using imgboxleft.

If an image is too wide to be floated on the right, use imgboxcentered instead. For the caption, use caption and insert style="text-align: center" into the tag.

Marsedit: Use the snippets imgbox and caption.

Lists

Kinds of lists: arabnum for arabic numbering, romnum for roman, listfig for putting a small printer’s cut in front of each item; checklarge, checkmed do what you’d expect. romnuminside places the roman numeral in the paragraph (instead of at the margin). alphamaj and alphamin produce upper- and lower-case alphabetic markers. Examples (inside indented):

• arabic numbering
• roman numbering
• list with figure
• large checkmark
• medium checkmark
• small checkmark
• roman numeral inside
• alpha majuscule
• alpha minuscule

To make a list with hanging indents using ordinary divs, put style="margin-left: 2em; padding-bottom: .5em; text-indent: -2em;" into the div tag (you can, of course, use a distance other than 2em and omit the padding).

Marsedit: Use inset and list arab, etc. I haven’t made snippets for all the list tags.

Special purposes

This is a pullout.

Postils and pullouts use the classes postil and pulloutright. There is a pullout snippet.

The class prologue is a centered box with bluish-grey background, intended for prefatory remarks at the beginning of an entry.

For dividers, use the snippets scrolldivider and updatedivider.

For quick explanatory notesA quick explanatory note is a note that quickly explains something., glosses, etc. use the tooltip class. The snippet is tooltip, which shows you how to use this class. “Visible” indicates where to put text that will be part of the main body text; “invisible” shows where to put the gloss.

Tables

For a quick two-column table, use the snippet table2col. The table list snippet is for making lists inside of table cells.

Good Capitalism Consumption War

Bad Socialism Conservation Peace

Flickr Stats

Web/Tech ·· More from September 2006