Where is the best place to keep a footnote? I strongly recommend writing it into the flow of the main text. You'll find a tangle of rules in the major XML tagging systems such as DocBook with its <footnote>
element or TEI with its <note>
, but stick to HTML and you'll find it remarkably easy.
Simply enclose the text of the note in span tags like this:
<span class="note"> This is a footnote </span>
. If you need a pointer, enclose the lot in <a>
tags, and put your pointer symbol (an asterisk or number, for example) after the first <a>
tag like this:
<a id="bla">
[*] <span class="note">
This is a footnote </span>
</a>
That's just about all the mark-up you really need if you are willing to accept interleaved notes. All you need to do after this is set the following property for the class "note":
SPAN.note {display:block;}
Add a background color and boost the note's margins and padding for a more harmonious effect. Here is the same interleaving example given above. Be aware though that readers will not be able to distinguish between the main text and footnote text if CSS is turned off on their computers.
Proper shoulder notes remain an impossibility with pure semantic mark-up, but you can easily cut them into the main text block in "floating" rectangles. To display cut-in notes, an additional modification is needed. Enclose the entire section of main text in a <div>
tag (call it for example "chapter") and set its width property. Make sure that no descendant elements have any width property set, because you want to ensure that the whole text is the containing block for what follows. Now set the following properties for the class "note":
SPAN.note {float: right; clear: right;}
With cut-in layout, it is often better to use footnote numbers rather than asterisks as pointers, since the reader may not always be sure which section of text a particular note relates to.
At the time of writing there is no CSS property that allows you to reliably float the notes outside the containing box, whether as end-notes (below) or shoulder notes (to the side). That kind of macro-typography instead requires you to dismember the source file into separate text and note sections.
Examples: • Endnotes • Separate Notes • Side Notes • Pop-Ups • Interleaving • Cut-In Notes • Highlighting • Keywords
Piggin.Net Macro-Typography
by Jean-Baptiste
Piggin is licensed under a Creative
Commons Attribution-ShareAlike 4.0 International License.