CSS Footnotes revisited: Sidenotes
Posted on July 25, 2005
This article is outdated. Read the latest 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.
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
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.
I've also had another go at an XHTML validated version, without using
[UPDATE 3 - 26. Jan 2006] THE FINAL WORD.
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 .
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 .
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:
Posted by: Beau Hartshorne at July 28, 2005 01:16 AM .
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 .
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 .
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 .
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 .
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?
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 .
Richard Ziade said
Posted by: Richard Ziade at May 31, 2006 07:55 PM .
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 .