CSS Cookbook/Footnotes

Note Some of the information on this page may be out-of-date.

Footnotes

A footnote has two parts: the anchor, [A] or [2] in the ASCII text; and the note itself, coded as

[Footnote X: Dilatory, digressive, pedantic and obfuscatory detail.]

Guiguts has excellent support for footnotes. It will find footnotes, clean up the numbers so they are consecutive, and gather the footnote texts at "landing zones" you specify, at chapter-end or book-end. It has everything you need to make sure that every anchor has a note and every note, an anchor, with numbers and ASCII format all correct.

Anchor Markup

When Guiguts autogenerates HTML from footnotes it has formatted, it produces the following for each anchor:

<a name="FNanchor_X_1" id="FNanchor_X_1"></a>
  <a href="#Footnote_X_1" class="fnanchor"><sup>[X]</sup></a>

(edited for readability)

This markup has three parts:

• <a name="FNanchor_X_1" id="FNanchor_X_1"></a> provides a way to link back to this reference, for returning from the note.
• <a href="#Footnote_X_1"...</a> links to the note itself.
• class="fnanchor" in the link lets us style the look of the [X], which is the clickable text the reader uses to jump to the footnote.

(Regarding this markup, see this note about a bug in Internet Explorer 5 for the Mac).

The Cookbook styles have this rule:

.fnanchor { /* style the [nn] reference in the body text */
    font-size: 80%;			/* a very discrete number */
    text-decoration: none;	/* no underscore, blue color is enough */
    vertical-align: 0.25em;	/* raise up from baseline a bit */
    /*background-color: #DDD;  optional: a pale gray background */
	}

This makes an anchor that is not terribly intrusive. If you think it is too small as a mouse-click target, turn on the gray background; the little patch of gray is an easier target.

Footnote Block Markup

The generated code for a block of notes is enclosed in a <div class="footnotes">..</div> so the entire block can be styled, perhaps with a border or a shading. The first thing in the block is a level-3 header "FOOTNOTES:".

The relevant Cookbook styles are:

.footnotes { /* only use is for border, background-color of block */
	border: dashed 1px gray;	/* comment out if not wanted */
	background-color: #EEE;		/* comment out if not wanted */
	padding: 0 1em 1em 1em; 	/* indent text from border */
}
.footnotes h3 { /* affects header FOOTNOTES: */
	text-align:center;
	margin-top: 0.5em;
	font-weight:normal;
	font-size:90%; /* basically make h3 into h4... */
}

This markup is only a suggestion. The border can be turned off, or made solid or dashed. The background shading might be deemed intrusive.

In most books, the footnotes are given at the bottom of each page. Collecting footnotes in a block at the end of a chapter or the book is a major change from the original work, made necessary because HTML has no "pages" as such, and so, no place to put the notes.

If the original work had end-notes, you can style the footnotes div to match the original's look. If it used page-notes, there is no model to emulate; you want to make the block of notes visually separate from the body text, and not incompatible with the general look of the book.

Footnote Markup

The code generated for each individual note, (pretty-printed for clarity) is:

<div class="footnote">
   <p>
      <a name="Footnote_X_1" id="Footnote_X_1"></a>
      <a href="#FNanchor_X_1">
         <span class="label">[X]</span></a>
         Dilatory, digressive, pedantic and obfuscatory detail.
   </p>
</div>

The parts of this markup are:

• <div class="footnote">..</div> allows you to style each note as a whole including the look of the paragraphs and other elements within it.
• <a name="Footnote_X_1".. is the target of the link from the anchor.
• <a href="#FNanchor_X_1">..</a> allows the reader to jump back to the reference by clicking the symbol.
• <span class="label">[X]</span> lets you style the look of the symbol preceding the footnote text.

Each paragraph in a note is enclosed in <p>..</p>. A footnote is usually a single sentence or phrase or at most a short paragraph, but it is allowed to have multiple paragraphs, even lists, tables, poems, and images. About the only thing you should not find in a footnote is a heading.

This markup opens up a wealth of possibilities for styling the footnotes. You can define styles for:

• .footnote to set, for example, the vertical spacing between one note and the next.
• .footnote p to define the look of paragraphs within a note, for example to set text alignment or vertical spacing.
• .footnote a for the look of the return-link, for example to remove the underline from the link.
• .footnote .label for the look of the [X] symbol, for example to position it horizontally.

The Cookbook styles contain these suggestions:

.footnote {
   	font-size: 90%;				/* smaller font */
}
.footnote .label { /* style the [nn] label left of footnote */
   	float:left;			/* floated left of footnote text */
   	text-align:left;	/* aligned left in float */
   	width:2em;			/* uniform width of [1] and [99] */
}
.footnote a { /* take underline off the footnote label link */
	text-decoration:none;
}

A Final Fillip

When the footnote's text is reasonably short, you can copy the text directly into the anchor as a title= attribute. Then when the reader hovers the cursor over the anchor[X] (try it), it is no longer necessary to click. You still must have the note and the link to it, for CSS-challenged browsers.