Footnotes on the Web

While I was busy writing largish amounts of JavaScript for money and not paying attention to the wider world, everyone suddenly started talking about footnotes on the Web, a subject I happen to be highly interested in.

Back in 1998 I created my very first site, a summary of my research into the Thidrekssaga, and since it was supposed to be a scientific publication I needed a footnote system. I ended up using a footnote frame, and back then I was pretty impressed by my own creativity. Meanwhile the wow-factor of this solution has decreased rather dramatically.

Seven years later, four articles about footnotes caught my eye within about an hour.

Sidenotes

The first article I saw was Footnotes and sidenotes with JavaScript and CSS over on Web Graphics. It contains some links to useful technical examples. More in particular, it discusses sidenotes at length, and a few months ago I'd decided for myself that sidenotes, and not footnotes, are the way to go on the Web. I was planning to do some research and write a nice article about it for some or other highly respected Web development site. Andreas Bovens and Timothy Groves seem to have pre-empted me, although their solution can be refined.

Three footnote articles

The other three articles are part of one chain. On 14 July Richard Rutter wrote Gruber's footnotes about John Gruber's handling of footnotes. In itself this is a short and not particularly interesting note, but it has a few updates caused by Joe Clark's reply. On 20 July John Gruber himself wrote About the Footnotes, where he explained what he is doing. On 24 July Joe Clark wrote There’s no such thing as a footnote, in which he confessed himself "not impressed" by Gruber's footnotes, and said:

Richard updated his post in response to Joe's remarks. I myself have a few things to say about these three articles, too.

First of all, they all discuss footnotes, and not sidenotes, and as I said before I fully agree with Andreas that sidenotes are the way to go for the Web.

Originality

Joe's main objection is that John's solution is not original. There is some truth in that. Back in 1999 I myself proposed adding such a backlink to a footnote, and I don't suppose I was the first one to think of it. Besides, Nick Finck of Digital Web Magazine fame also contributed to the discussion, and he added the backlink feature to DWM articles (see for instance this 1999 article).

Joe is wrong when he describes John's system as "a 'Back to Top of Page' link in sequined cocktail dress and rouge". It isn't, it refers back to the text referring to the footnote.

HTML notes: <small>?

A footnote system is lacking in HTML, and I agree with Joe that that's weird for a language originally meant for distributing scientific publications.

Personally I feel that footnotes are less important than the main text of the document, and with that in mind I wondered about their semantic status. When I met him at the Amsterdam JavaScript meeting, I asked Anne van Kesteren's advice, and he suggested using the <small> element. That seems to be just the right solution. So until proven wrong, I'm going to assume that <small> is "the best" way of marking up footnotes.

Browsing the notes

With the markup out of the way, we can concentrate on presenting notes on our Web pages. I like Timothy Groves's proposal, but, as I said, I feel it can be improved. It can use a backlink to the text, and besides I miss being able to browse the notes themselves.

When reading a book with footnotes (and not endnotes!), I often catch myself reading through the notes first, and occasionally I think: "What an interesting note! Which bit of text refers to it?" Footnotes can contain nice extra's and side-stories that don't directly have anything to do with the main subject of the book, and this serendipitous information can occasionally come in quite handily. Serendipity is an important scientific tool, and it should be encouraged.

Therefore any online CSS/JavaScript system should also support the browsing of notes, without being forced to click footnote links in the main text time and again. I'm still planning to research and write an article about my approach to this interesting subject.

But that's something for the future. Meanwhile, I'm very pleased to find that I'm not the only one interested in footnotes and sidenotes on the Web.

Comments

1 Posted by Joe Clark on 26 July 2005 | Permalink

A distinction without a difference, surely.

2 Posted by Dante on 27 July 2005 | Permalink

I used to use the tag, but stopped using footnotes altogether (I'm very lazy).

I always feel guilty when I use , because it implies style which is CSS's job.

3 Posted by Dante on 27 July 2005 | Permalink

Sorry, the HTML in the above comment was eaten.

It should read: 'I used to use the sup tag' and 'when I use the small tag'.

(PPK, can you edit my original comment and delete this?)

4 Posted by John Hansen on 27 July 2005 | Permalink

Maybe it's just me, but I find footnotes completely distracting. I have bad enough reading comprehension as it is, so when I hit a footnote I find it extremely hard to have the focus to keep reading until the end. Footnotes really break the natural flow for me as a reader, online and in print.

ppk, I've read here that people scan pages, they don't read them, and it stuck with me. I think adding footnotes would interfere with many users' ability to scan. Sidenotes might be better, if they were included close enough to the body of the text so as to not disrupt the normal scanning of a page.

IMO wrapping text in an inline element with no style, and including a title attribute might be the least obtrusive way to include footnotes. If only there were some way to include clickable links in tooltips.

5 Posted by ppk on 27 July 2005 | Permalink

The fact that some people have difficulties with footnotes does not mean they should never be used.

6 Posted by Jacob on 27 July 2005 | Permalink

Footnotes are a great idea - I've used, and seen them used for ages and they're really useful. You don't *have* to read them - they're handy for "extra" info. and things like that. If used properly you shouldn't have to read them for the text to be informative.

Personally I don't see what's wrong with just putting them directly in the (X)HTML. If you want scripts to automatically sort them out then you probably want a content management system of some kind.

I *do* agree that in most cases sidenotes would be more suitable for the web. On a page in a book, it's little bother to jump down to the bottom of the page, but scrolling about a lot on the web is a right pain.

7 Posted by David on 27 July 2005 | Permalink

PPK, I have to side with Joe--John's system is simply a dressed up "back to top" link. Yes, it goes back to the referring text, rather than to the strict top of the page, but that's just decoration. Typical "back to top" links take you back to a table of contents, which you presumably had clicked from--hence, the TOC is the "referring text". The only distinction is that John's solution gives each return link its own target, rather than one standard "top of page" target.

I might agree that "sequinned cocktail dress and rouge" is wrong--I'd argue that it's just the rouge.

8 Posted by Joost Diepenmaat on 27 July 2005 | Permalink

David: I don't agree: if you have a footnote at the bottom of the page, you need some kind of easy way to go *back to the point you came from*. Especially if the page is longer than your screen.

On the other hand, I think having the notes to the side of the text that refers to it seems to me to be a lot clearer. I don't like the "click here to view the note" implementation, though - I side with PPK in that I like to read the notes seperately - they should always be displayed - a simple CSS "display:block; float: right;" on the note already does almost all I need IMHO.

9 Posted by Scott Severance on 27 July 2005 | Permalink

This is an issue that I have also been looking for a solution to. My objection to most types of web footnotes is that they are the equivalent of endnotes, which I despise.

I've implemented a system of displaying footnotes in-text, but hidden until the user clicks the footnote link. The main advantage here is that the user doesn't have to scroll to view the footnote, and the note isn't visible until the user explicitly requests it. It's a straightforward use of CSS with Javascript to switch classes. An example of this is at http://scottseverance.blogspot.com/2005/07/wilderness-caf.html.

As you can see, I haven't been very consistant in whether to use footnotes as in print, or to use more of a link-style approach. I'm not sure which is the best method there.

10 Posted by Beau Hartshorne on 28 July 2005 | Permalink

I thought of a way to do build sidenotes in pure CSS, with no hacks, and no browser problems. I've posted details here:
http://hartshorne.ca/2005/07/27/footnotes_v_sidenotes/

11 Posted by Jacob on 28 July 2005 | Permalink

Beau: Your solution is, IMO, the best of the lot. It is simple, effective and easy to read.

One thing though - you say you can't include 'block' elements in a paragraph tag. This is true of course, but what about 'inline-block'? I know it's not well supported but I suppose it could work in theory. (Could it be used for pseudo-paragraphs? It's messy, but it's worth experimenting with ideas).

12 Posted by Tristan Gray on 28 July 2005 | Permalink

Footnotes are incredibly useful for some pages and a more standardized way of doing this would be incredibly helpful but as Joe I mentioned: unlikely. Over all I like what these fellas have done, but it is true that nothing new has been done here. At the end of the day it is just anchor links.

13 Posted by David on 28 July 2005 | Permalink

Joost: I agree that, if you use footnotes, you ought to have a way to get back to where you were. My point was that this solution is the almost exactly the same solution people have been using for tables of contents--when you click on a link to a section, there's a link to take you back to the table of contents. In the case of footnotes, the situation is slightly reversed (the content is in the linking section, rather than the linked-to section), but the concept is the same.

I'm not saying that John's "solution" is bad, or unneeded; I'm simply saying that it's something we've all seen before, in slightly different trappings. Joe pointed this out; PPK dismissed this by pointing out the new trappings--which seemed to be missing the point of Joe's original criticism.

14 Posted by Beau Hartshorne on 28 July 2005 | Permalink

Jacob: Thank you. I don't think using display: inline-block; will cause too many problems, though I don't know if it's the best approach. I'm going to put this question on the css-discuss list, and will update the entry with any feedback. Personally, I think that sidenotes that need new paragraphs should instead link to a seperate discussion, or be written back into the article/entry/essay.

15 Posted by Ezra on 28 July 2005 | Permalink

Am I missing something? I've been reading long articles with footnote references back to the text for years. Just today:

http://www.cbpp.org/7-27-05socsec-sum.htm

#_ftn1, #_ftnref1, etc. Really, lots and lots of people have been using these for a while. There must be several programs that put them in.

I will agree that sidenotes are superior, for a reason mentioned somewhere: our visual memory of a place on the page is retained as long as the page doesn't jerk out from under our eye.

16 Posted by David on 1 August 2005 | Permalink

Ezra--very good point. As a test, I created a document in Microsoft Word with several footnotes and saved it as HTML. The result? Each footnote has a target of '#_ftn[x]' (where [x] is the number of the footnote), and each one has a back reference link with a target of '#_ftnref[x]'.

May I submit Microsoft Word as prior art, and proof that Gruber's footnotes are not 'original' or 'innovative', and further defence of Joe? Granted, no serious web developer that I know of creates pages in Word and then converts them, preferring to create the HTML him/herself--but many, many people aren't serious web developers, and will use the easiest solution available to them.

(Note: I tested this in Word 2003, since that's what I have right here. So this feature has been around for at least a while. Does anyone have earlier versions of Word, so we can figure out just how old this "innovative" and "original" idea actually is?)

17 Posted by Kartik Agaram on 3 August 2005 | Permalink

More prior art:

1. A greasemonkey script to html-ize footnotes in Paul Graham's essays:
http://simon.incutio.com/archive/2005/03/11/footnotes

2. My own articles. They have had such footnotes for a year or so. For example:
http://www.cs.utexas.edu/~akkartik/feed.cgi?bash.html
I certainly did not consider them original.

18 Posted by Patrick on 16 August 2005 | Permalink

http://www.ericmeyeroncss.com/bonus/render-mode.html

is another quite old sample of someone using "sidenotes" with CSS only. Quite similar to Beau´s version.