Jon22: The Website of Jonathan Dobres

Much to my chagrin, I can’t come up with a fourth comic book post to cap the week. I suppose I could finally write about Sandman, but the series ended in 1996 and everyone already knows that it’s amazing.¹ If I’m going to write about it (and that’s inevitable, trust me), I’d better bring something new to the table.

Instead, I thought I’d indulge in a more technical matter.²  You may have noticed the footnotes in this week’s posts. Herein lies my recipe.

The Reasoning

Sometimes you’ve got to go off on a tangent and it just doesn’t fit anywhere. It’s too big for parentheses but too small for its own post. Enter footnotes, the Goldilocks’s Porridge of tangential writing, used since the dawn of time by the world’s finest writers.³

In a printed book, maintaining the context between the body text and the footnote is as easy as making a saccade.⁴ On the web, footnotes present a unique challenge. Javascript can be employed to make footnotes appear and disappear in situ⁵, or the footnote number can be given a plain rollover state that reveals more text. These solutions each have their pitfalls. Javascript can be the ruin of you in different browsers. Search engines are often blind to rollover states, to say nothing of the lack of cutting and pasting. There are a few Wordpress plugins that promise to make footnotes easy for you, but I decided against these.⁶ They require specialized markup. The plugin may pick it up and format it nicely, but if I ever switch to a different plugin or a different blogging platform, the special markup will simply become a mess in my posts.

Instead, I opted to steal Hans John Gruber’s method. Let’s be honest, the man has this thing down.⁷ His footnotes require no Javascript nor exotic markup, just a willingness to insert some simple HTML by hand and add a dash of style.

Doing your footnotes by hand has several advantages. For one, you have total control over how things look. Secondly, even when totally stripped⁸ of the stylesheet, things should degrade nicely into plain links and lists. Third, and most importantly, because the method requires some manual effort, it reduces the temptation to shove a ton of footnotes into every post.⁹

The Recipe

The whole process can be divided into two parts: the Easy Part, and the Hard Part.¹⁰

Start with the easy part. You’ll need to define some new CSS rules so that your footnotes look good and proper. You’ll be enclosing your footnote numbers in the highly appropriate superscript tag, which gets most of the job done. Unfortunately, this often screws with your line height, so a little CSS rule is needed to keep everything in line:

sup {
    font-size: 0.75em;
    line-height: 0.5em
}

Then you’ll need to define a style for the footnotes themselves. Footnotes are most commonly presented as a numbered list, and luckily enough, HTML has had that one covered since, like, 1978.¹¹ Just make sure that you designate it with a special class, something clever like:

ol.footnote

I’ll leave the individual stylistic choices up to you, but remember that less is usually more.¹² It’s also handy to have a small symbol at the end of each footnote that will return the reader to an appropriate place in the body text. There are many candidates to choose from, some popular ones being: ↩ ↵ ⇑ ↑ ∧, or you could get fancy and use an image.¹³ Up to you.

So, write your post as usual,¹⁴ enclosing any footnote numbers in the superscript tag. At the end of your post, insert your special ordered list and write the footnotes. This has been the Easy Part.

The Hard Part¹⁵ is making everything link together. Let’s start at the bottom and work our way up. Say you have your list of footnotes:

<ol class="footnotes">
    <li>This is a footnote. ∧ </li>
    <li>This too! ∧ </li>
</ol>

What we want to do is give each individual list item a unique identifier. This will act as an anchor for the footnote links in the main text. Thus:

<ol class="footnotes">
    <li id="07112008-1">This is a footnote. ∧ </li>
    <li id="07112008-2">This too! ∧ </li>
</ol>

Likewise, in the body of the text, each superscript tag goes from:

<sup>1</sup>

To:

<sup id="07112008-1r">1</sup>

Note that identifiers in the body text have an “r” at the end, designating a “return” link.¹⁶

Now all you have to do is point your links to the right identifiers. Footnote numbers point to the footnote list:

<sup id="07112008-1r"><a href=#07112008-1>1</a></sup>

While the return links in the footnote list point back up to the body text:

<ol class="footnotes">
    <li id="07112008-1">This is a footnote. <a href=#07112008-1r">∧</a> </li>
    <li id=07112008-2">This too! <a href=#07112008-2r">∧</a> </li>
</ol>

Et voila¹⁷, gorgeous footnotes.¹⁸

1. Even people who have never heard of it. It’s that good. ∧
2. Cool people, you may leave. ∧
3. Oliver Sacks, I’m looking squarely at you. ∧
4. French for “jump.” ∧
5. Latin for “I would like to sound smarter.” ∧
6. Because I loathe modernity. Seriously. You haven’t had food until you’ve had it from an ice box. ∧
7. One day, he will count to three. There will not be a four. ∧
8. Scandalous! ∧
9. Except this one! ∧
10. Which is really not very hard. ∧
11. See, there, I exaggerated for comedic effect. ∧
12. Except when it’s not, as is the case with explosives and zombies. ∧
13. Like some kind of high-falootin’ college graduate. ∧
14. Taking extra care to make sure it doesn’t totally suck. ∧
15. Again, not very hard. ∧
16. Or whatever you’d prefer, but “-GoBackToWhereYouCameFrom” is lengthy. ∧
17. French for, “Look what I did!” ∧
18. Congratulations, you survived. ∧