Site Map Links Contact

Macro-Typography of Footnotes: 8

Dynamic styles

Pop-up notes, as mentioned above, have fascinated web macro-typographers for years and are likely to achieve their breakthrough with e-books: the idea is that the web page should first be shown empty of notes. By hovering with the mouse, the notes are then revealed. Of course the danger is that the notes will be invisible if the page is printed out. One solution is to create a print version of the page with fixed presentation of the footnotes. Brett Merkey has demonstrated a script for Internet Explorer that automatically converts the pop-ups into end-notes in the print view.

The key requirement in creating pop-up notes is to ensure that the signpost— the asterisk or footnote number— is a true hyperlink, even if it points nowhere. It is not enough to enclose it in <a> tags. It must have a href attribute, even if that attribute has an empty or ineffective value.

Each note could look like this:
<a id="bla" href="#"> [*] <span class="note"> This is a footnote </span> </a>. The value of "#"— a blind anchor— ensures that if a reader accidentally clicks on the hotlink, the brower will try— and fail— to find a non-existent anchor.

Alternatively one can use "onClick='return false'" or "javascript:void(0)" as attributes: both are explicit instructions to do nothing. Use one or other method. Otherwise the user may inadvertently find themself stranded in a parent directory on the server.

The style sheet begins with declarations for the different states of the <a> element, for example:
a:link {text-decoration: none; background-color: #ddd; color: #050;}
a:visited {text-decoration: none; background-color: #ddd; color: #050;}
a:hover {background: #aaa;}

Next, the style sheet provides for the notes (which are child elements of the hyperlinks) to stay invisible when the page initially loads:
a span {display: none;}
Finally, the style sheet ordains what happens to the note when the cursor hovers over the hyperlink:
a:hover span {display: block;}
In its new "hover" state, the hyperlink causes its child to be displayed. The position (on top) and dimensions of this new layer need to be specified, for example as follows:
a:hover span {display: block;
position: absolute; left: 100px; width: 40em;}

As this powerful method, originally suggested by Eric Meyer, only works in the more modern browsers (e.g. IE 5.5 and above), site visitors should be offered an alternative page styled for both print and older browsers. It is possible that simpler methods of styling the pop-up will become available in the forthcoming version of CSS.

This mark-up also offers a way to improve the readability of cut-in notes by illuminating them dynamically. Hover over a pointer, for example, and its note will be highlighted without reloading the page (see example).

Pointer signals used with notes are ripe for a rethink. We still often see superscript footnote numbers awkwardly inserted in on-screen text, although they are typographically nonsense. Even in quality printing, superscript footnote numbers are often hard to pick out, and can only be detected as irregularities in grey type. In the poorer resolution of visual displays, superscript numbers, even when coloured differently from the text, often mar line spacing yet may not even be big enough to click on.

Nupedia (the predecessor to Wikipedia) in its 2001 heyday experimented with single-letter pointers such as a bold superscript N for a note and a P which could be clicked for "pronunciation" advice, but this also was jarring. Other sites have employed asterisks as a typographical device. These stand out well in printed pages, but in my view are inferior on screen to buttons.

Partly because Wikipedia readers often print the articles to read, Wikipedia has made a retrograde step back to superscript numbers, enclosed in brackets.

In visual displays, signposts need not follow the rigidities of the Chicago Manual of Style and other handbooks which require their placement at the end of sentences. They should be placed in mid-sentence wherever that serves sense. Where a sentence contains a keyword or name that the author elucidates in a note, the visual pointer should be placed next to the word itself rather than being parked at the end of the sentence or paragraph.

Even in this case however, a footnote is a different animal from a true hyperlink. It may or may not be clickable, but it should never be distracting; and it should merely shift the reader's focus to a marginal (right or bottom) area of the currently visible text unless it is a genuine cross-reference to another web document.

1 2 3 4 5 6 7 8

Examples: • EndnotesSeparate NotesSide NotesPop-UpsInterleavingCut-In NotesHighlightingKeywords

Creative Commons License Piggin.Net Macro-Typography by Jean-Baptiste Piggin is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.