CSS Footnotes revisited: Sidenotes

Posted on July 25, 2005

This article is outdated. Read the latest version.

HTML version.
XHTML version.

Andreas Bovens (seen here drinking what is probably a $20 espresso in Tokyo) has a very concise CSS3 solution for footnotes/sidenotes, and asks in a comment to my previous post whether my approach can be changed to produce sidenotes.

Seems it can. I put the onClick directy onto the footnote link span to prevent the page from jumping around (at least in Safari - Firefox seems OK) and changed the cursor to the "help" question mark.

An issue with sidenotes in this form is that you really have to make allowances for them in your layout. Most layouts are relatively inflexible horizontally, and infintely flexible vertically, due to the nature of html. Adding footnotes to an already existant layout would normally be less hassle than adding sidenotes, I would say.

[UPDATE 1]

Should now be working in IE6. The problem is keeping the sidenotes in a fixed position. IE doesn't accept position: fixed, reverting instead to position: static.

In IE, the footnotes div is given an absolute positioning. The body has an overflow-y:auto attribute, which gives the body a scrollbar, whereas the html has an overflow-y:hidden attribute, which hides it's scrollbar (otherwise two vertical scrollbars are visible).

This prevents the footnotes div from scrolling when the body is scrolled.

[UPDATE 2]

The DTD of this version is now HTML Strict, instead of XHTML. Thanks to Tino at web graphics for putting me straight on the xhtml issues.

I've also had another go at an XHTML validated version, without using innerHTML.

[UPDATE 3 - 26. Jan 2006] THE FINAL WORD.



Comments (18)

Andreas said

I posted about both scripts over at WebGraphics (http://web-graphics.com/mtarchive/001626.php ). Thanks a lot!

Posted by: Andreas at July 25, 2005 11:21 PM .

Kevin Meade Laurence said

Doesn't appear to work in IE 6.0 on Windows XP. The footnotes appear at the bottom of the page instead of at the side.

Posted by: Kevin Meade Laurence at July 26, 2005 03:14 PM .

timg said

Should work in IE 6 now (see UPDATE above). Not sure about IE 5 though.

Posted by: timg at July 26, 2005 05:59 PM .

Andreas said

Thanks!

Posted by: Andreas at July 26, 2005 06:03 PM .

Stephane said

Well done. I also thought it could be neat to integrate the "Scrolling Window" (http://www.squidfingers.com/code/dhtml/?id=scrollwin) effect with footnotes.

Posted by: Stephane at July 27, 2005 01:19 AM .

Beau Hartshorne said

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/

Posted by: Beau Hartshorne at July 28, 2005 01:16 AM .

Ryan said

Two additional questions/suggestions for you. First, it would be nice to include hyperlinks in the footnotes. As far as I can tell, no other tags can be used inside the footnote, or it will display in-line with the rest of the text. Second, have you put any thought into how these would work in a print scenario? Perhaps there could be a printer view that rendered all the tags either in the margin alongside the appropriate text or at the bottom of the document. This would avoid losing access to footnotes once the page was printed.

Posted by: Ryan at August 2, 2005 03:37 AM .

timg said

@Ryan
With innerHTML it's relatively easy to include hyperlinks. Using DOM it's bit more complicated, I think. Multiple paragraphs are also an issue (as pointed out on daringfireball).

You could maybe use Beau Hartshorne's CSS method in a print stylesheet to position the sidenotes along side their paragraphs...

Posted by: timg at August 2, 2005 09:05 AM .

JQS said

I've updated your code to allow multi-usage on the same page (with differing CSS if so desired) and it seems to handle hyperlinks wihtout any problem (only tested on Firefox and Safari).
Check it out: (http://www.iridani.net/2005/08/jsfootnoteshtml.html)

Posted by: JQS at August 5, 2005 08:33 PM .

Ryan Brooks said

That is soooo click.

Posted by: Ryan Brooks at August 12, 2005 02:58 PM .

SeoulBrother said

This works for me. One question though, In tweaking (mangling) your original code I chose not to use the input id="btn" type="button" onclick="formatFootnotes('content','footnotes')" value="reformat footnotes" line in my source. Instead I use the onload= tag. After a user clicks the footnote/sidenote link the sidenote appears as expected. So now how does the user make it go away? Any ideas?

Posted by: SeoulBrother at August 16, 2005 04:16 AM .

SeoulBrother said

Yeah, thanks? I guess. I should have made it even more obvious I was a noob. I tried googling the info but I couldn't really tell what I was looking at. So I thought I'd try asking. I did figure something out but am not totally happy with the results. I am using this bit of (to me) magic "<div id="footnotes"><a href="javascript:showFootnote()" class="btn">close</a></div>" but I don't like that there's this floating "close" button in my single post pages. BTW I'm using slightly different markup for my main weblog page and the single post view. Would I use innerHTML to basically hide the floaty close button? I've been futzing with the syntax but I basically break the Sidenote code.

Oh, and before i forget, this is very, very cool. Thanks for sharing.

Posted by: SeoulBrother at August 25, 2005 07:30 AM .

Chris Heilmann said

Why is it so hard for designers to come up with solutions that are _usable_ and _accessible_? Have you tried this example with a keyboard?

We can create a lot of stuff via the DOM and JavaScript, but that does not mean we are playing with other rules than normal markup gives us. If you want to make something interactive - use a link element - as it is an element that can be activated regardless of input device.

Furthermore, don't use innerHTML to "paint" HTML, if you use the DOM, then also create elements and apply handlers via the DOM, which will make it a lot easier to change or remove them at a later stage.

Posted by: Chris Heilmann at September 22, 2005 12:45 PM .

Angel said

The best way is ajax and css develop

Posted by: Angel at January 7, 2006 05:59 PM .

Sarah said

That was useful. Thank you.

Posted by: Sarah at January 9, 2006 08:11 AM .

Richard Ziade said

We've taken a stab at using some unobtrusive CSS & Javascript to make sidenotes easy:

http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php

Posted by: Richard Ziade at May 31, 2006 07:55 PM .

Innovate said

Hi, my site is http://www.innovateidea.com in xhtml1.1 & 1.0, I have all my pages valid according to the w3 standards, but why is that w3.org itself has few invalid pages, over 10 pages.

Posted by: Innovate at February 14, 2007 03:28 PM .

marcinex said

Thanks! This is very cool and helpful!

Posted by: marcinex at October 31, 2007 09:26 AM .