Footnotes are one of the few pieces of typography that the web would appear to have neglected: there is an argument to be made that hyperlinks have made footnotes irrelevant. However, there will always be a role for removing sections of explanatory text that may distract the flow of reading.
<ol id="footnotes">
<li id="footnote1">
<cite>Capuchin Monkeys and their Kin in Film</cite>, Miriam Krebs, 1997
<li id="footnote2">
<cite>Y: The Last Man</cite>, Brian K. Vaughan, Pia Guerra, 2002 - 2008
</ol>In the main body text, we want a number that links to the position of this footnote:
<p>Capuchin monkeys have had starring roles
in many films, including <cite>Raiders of the Lost Ark</cite> and
<cite>Night At The Museum</cite>
<a href="#footnote1" rel="footnote"><sup>1</sup></a>. They’ve appeared
in graphic novels, such as “Ampersand” in Y: The Last Man</cite>
<a href="#footnote2" rel="footnote"><sup>2</sup></a>.</p>
We use <sup> to raise the “1” above the baseline and reduce its size. <sup> is superscript; <sub> is subscript. We have also added the (relatively rarely used) rel attribute with a value of footnote to show that the relationship of the link to its target is that of a footnote. (You may recall that we used the rel attribute previously when creating a link to an external stylesheet.)
This is a good solution, but there’s a problem. Adding new footnotes to the bottom of a page is not a big issue; the ordered list will rearrange itself accordingly, even if the new item was added in the middle of the list. But if we add a footnote into the body text, we would have to re-number footnotes that appear after it, as the footnote numbers in the body are hardcoded. In other words, if we wanted to add a footnote after “graphic novel” in the body copy, that would become footnote 2. We would then have to increment, by hand, all the footnotes that appeared in the body copy after that point.
There’s a better way, if you’re prepared to use a little CSS2. Write the footnotes as a list, as before. In your body copy, write links as before, but because there could be many possible links in your body copy, give them a class of “foot”. Also, leave the content of the links blank:
<p>Capuchin monkeys have had starring roles in many films,
including <cite>Raiders of the Lost Ark</cite> and <cite>Night At The Museum</cite>
<a href="#footnotes" class="foot"></a>.Then, we want to automatically count the number of times links with a class of “foot” appear in the body, and automatically add this to be the content of the link. We also want to style this content:
body {
counter-reset: footnotecounter;
/* Create a footnote counter scope */
}
a.foot {
text-decoration: none;
outline: none;
}
a.foot:before {
font-size: smaller;
margin-left: .5em;
vertical-align: super;
/* sets the footnote above the baseline */
content: counter(footnotecounter);
counter-increment: footnotecounter;
/* Add 1 to footnote */
}That approach certainly improves things, but there still is a problem. Moving your eyes to the bottom of a printed page to read a footnote is no bother, even if the footnotes were printed as endnotes. But a web page is different, especially if has a lot of body content. Scrolling back and forth to read footnotes in a web page would be frustrating.
A better approach, one that suits the web paradigm, is to re-position the footnotes as “side notes”. This means removing our original list from the bottom of the page and placing the content of the footnotes inline, inside of the paragraphs, in <span> tags. We’ll also set the footnote hyperlinks to null links:
<p>Capuchin monkeys have had starring roles in many films,
including <cite>Raiders of the Lost Ark</cite> and <cite>Night At The Museum</cite>
<a href="#" class="foot"></a><span><cite>Capuchin Monkeys and their
Kin in Film</cite>, Miriam Krebs, 1997</span>.<span> is an element that you use when you’ve run out of other elements. It’s an inline tag, one that surrounds content that has no other possible context.
More CSS is added:
p {
margin-right: 16em;
}
span {
visibility: hidden;
position: fixed;
width: 12em;
border: 1px solid #000;
background: #dd0;
padding: 1em;
top: 1em;
right: 1em;
}
a.footnote:focus + span {
visibility: visible;
}We’ve given our paragraphs enough room on the right for the new position of our footnotes/sidenotes, and hidden the notes themselves using the same trick we used for our simple gallery. The difference is we’ve set position: fixed, so that the side note always appears in the same location.
In the near future, these solutions are likely to appear a little different once browsers begin to support the footnote and asterisk counting systems for list-style-type that are proposed for CSS, and I will update this entry once that occurs.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
