You may have noticed in my last post that I’ve been trying out a new (for me) form of footnote (if you couldn’t figure it out, that’s what the writing in the right margin is). I had started thinking, after my last footnoted post, about how the way I have been doing footnotes around here really wasn’t ideal from a user-friendly standpoint, nor, for that matter, from a writer-friendly standpoint.

From a reader’s perspective, footnotes on web pages or blog posts (especially long ones) are problematic because the footnote typically is placed at the very bottom of the page, which can be quite far from the text being footnoted. Hence, it can be a real pain in the ass to scroll down to the footnote, read it, then scroll back up and find where you had left off of reading the main text. This isn’t so much a problem in a regular book, because it’s usually easy to remember roughly where on the page you left off, but, unless you don’t have to scroll to see the bottom of a footnoted web page, it’s much more difficult online.

The standard solution to this problem, as exemplified by John Gruber’s post, is to make the footnote itself (i.e. the superscripted numeral) into a link to the footnote text at the bottom of the page, then provide a link at the end of the footnote text that sends you back to your place in the main text. This second step is actually unnecessary (you can just use the “Back” button in your browser), but this is a relatively good solution to the readability issue.

However, creating all these links is pretty time-consuming and leaves lots of nasty-looking HTML markup in your text, so it’s not so good from a writer’s perspective. Furthermore, it doesn’t seem terribly user-friendly to make your readers constantly click links back-and-forth through a single document just to be able to read it (and completely destroying the functionality of the “Back” button as a way to get back to whatever they were reading before coming to that document). So I started checking around to see if there were some better or easier solutions. Although there are a couple WordPress plugins that simplify the creation of footnotes, they don’t really address my readability concerns (which, as any web designer worth his salt will tell you, are the more important concerns).

Subconsciously, I think I already knew what I wanted: some sort of simple, frames-free implementation of the annotations to this version of Eliot’s “The Waste Land”. Or, even more ambitiously, something like the notes to David Foster Wallace’s essay “Host” as they appear in the printed edition (which have been described as “hyperlinks in print”). Of course, subconscious desires require some sort of outside stimulus to rise to the surface, and I was fortunate enough to come across Peter-Paul Koch’s post.

Koch talks about some of the problems with footnotes on the web, links to some articles about footnotes, talks about how (oddly enough) footnotes don’t exist in HTML or XHTML and, most importantly, talks about how he thinks “sidenotes” are the way to go on the web. All I had to do was see the word “sidenotes” and thoughts of The Waste Land and the DFW article immediately came to mind. So the question became how to do them. Andreas Bovens and Timothy Groves also like sidenotes and Groves whipped up some javascript to make the process of generating the things pretty easy. Still, javascript isn’t really ideal, either, because lots of people turn javascript off in their browsers.

Fortunately, Beau Hartshorne posted links to his solution to the sidenote problem in the comments to all three of the above posts. His solution is, I think, the best of any that I’ve seen (and, with minor modifications, is what I’m now using); the sidenote is generated exactly at the level of the main text the note pertains to, it’s easy to implement with some simple CSS, and it uses the small attribute, which has been suggested as the “right” attribute for footnotes and has the side benefit of allowing even RSS readers and other non-CSS browsers to tell that the sidenote is not normal text, even though it may not be immediately obvious what it is. → It should be noted the “standard” footnote solution generates invalid RSS because relative URLs aren’t allowed inside content tags Hartshorne’s approach even makes it easy to make sidenotes on both sides of the text. Like so ← Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

In an effort to avoid confusion, I’ve also been adding little arrows (→ and ←) next to the sidenoted text to indicate that that’s where the note is coming from, as well as a much larger arrow of the same sort as background to the sidenote itself to create a sort of visual link. Of course, it might be even snazzier to highlight the sidenoted text in various colors and then color coordinate the sidenotes to the relevant highlighted text (like in the DFW article), but I’m afraid that’s more work than I really want to do.

As it is, I’m pretty happy with how the whole thing’s turned out, but if you have any suggestions to make the sidenotes better, let me know. And if you hate them and want me to go back to footnotes, or even if you hate the whole idea of footnotes and want to implore me never to write another ever again, you can still let me know (though I may ignore you).