From footnotes to sidenotes

Instant action

Just some lines of text for instant testing pleasure. If you click the links in these two paragraphs, a green information box should appear on the right side of your screen, that is, in browsers that use the Gecko [Gecko is a browser engine designed to support open Internet standards such as HTML 4.0, CSS 1/2 (and a bit of CSS3), the W3C Document Object Model, XML 1.0, RDF, and JavaScript.] layout engine (+ Safari).

"Why Gecko (+ Safari)?" you ask. "CSS3", I answer. The effects described in this tutorial only work in Mozilla [Mozilla is the name of a browser using the Gecko layout engine.] or other Gecko enabled browsers [Other Gecko enabled browsers are e.g. Netscape Navigator, Mozilla Firebird, Galeon, Camino, etc.] (+ Safari) as they completely rely on CSS3 [CSS3 stands for Cascading Style Sheets level 3 and is still under development. It allows for strong visual control over elements on webpages.] (pseudo-)selectors. I was not too nasty however - the page degrades nicely in Internet Explorer, Opera, etc.

OK, so what's this all about?

Footnotes. It's about using footnotes on the web. Imagine you want to publish a paper online. Usually, the code you'll use for dealing with footnotes will look like this:

<p>This is an XHTML<sup><a href="#ftn1">1</a></sup> example.</p>
<p>...(the rest of the text)...</p>
<p id="ftn1">1. XHTML is a reformulation of HTML 4 as an XML 1.0 application.</p>

There are a few problems with this approach, though:

• First, technically it's quite a mess. Handcoding is OK, but not if you have to scroll up and down constantly to make those darn footnotes.
• From the viewpoint of usability, footnotes are also not a very good idea. The reader has to jump up and down in the text by means of links and the "Back"-button. Footnotes are an artifact from printing and one can question whether they really have to be placed in the footer of a webpage, just because "it has always been done like this".
• Third, this way of dealing with footnotes is semantically not 100% correct. Does the number (¹ in the example) define the word it is glued to? Or the whole sentence? And then also, isn't placing the footnotes all the way down the page more a matter of design than of semantics?

Talking about semantics, let's have a look at how DocBook [DocBook provides a system for writing structured documents using SGML or XML.] deals with footnotes:

<para>This is a DocBook<footnote id="ftn1"><para>DocBook provides a system for writing structured documents using SGML or XML.</para></footnote> example.</para>

Doesn't look bad, huh. Footnotes are placed inline, which looks semantically more correct (and coding it is much easier!). However, one still has to guess what the footnote is refering to. In this context, it is quite obvious that it's a note about the word DocBook, but there might be some confusion with longer sentences.

OK, let's see if we can do some DocBook-like-footnote-thingy with XHTML [XHTML is a reformulation of HTML 4 as an XML 1.0 application.].

Show me some code

I came up with this XHTML interpretation of the DocBook example:

<p>This is an <a href="#ftn1">XHTML</a> <span id="ftn1">[XHTML is a reformulation of HTML 4 as an XML 1.0 application.]</span> example.</p>

So, what do we have here? I tried to put the footnote inline and, instead of glueing it to the previous word, I refered to it by means of a link. We're working with HyperText [HyperText is a system for displaying information that contains links to other related pieces of information.] after all. And oh, the brackets are just for backwards compatibility in non-CSS3-aware browsers. More about that later.

OK, now we have inline footnotes with hyperreferences. But how to display them? Inline display is not an ideal solution; what are the other possibilities?

It's here CSS3 comes in. I added this piece of code to my stylesheet:

div { padding-right: 30%; } span[id^="ftn"] { display: none; } span[id^="ftn"]:target { display: block; position: fixed; right: 0.6em; top: 3.1em; width: 25%; }

A short analysis. First, I added some 30% padding to the containing div, so as to create a sort of empty sidebar, in which the footnotes - sidenotes, in fact - will appear. Then, the CSS3 selectors. "Hide all the spans that have an id attribute that contains the letters 'ftn'", the first CSS3 selector says. The second one continues: "But show those spans as a fixed sidenote when their id is addressed, that is, when somebody clicks on the word they define."

That's it! It is just a pity the combination of :target and element[attribute^="value"] is only supported by Gecko browsers (Safari understands :target, but offers no support for the other selector, as far as I know Update: apparently, it works in Safari! Thanks Pixy!). So, other browsers have the footnotes/sidenotes displayed inline (in a light grey color and between brackets). Not the most ideal solution, but for the time being, we have no other choice.

Suggestions, comments, additions, tweaks, ideas? Leave a note at Web-Graphics! And oh, use all this code as you like (and drop me a line if you do something interesting with it)!

Andreas Bovens 2003.