Footnotes v. Sidenotes

July 27, 2005

Update: Better Sidenotes.

I’ve seen several articles and posts about footnotes and sidenotes bubble up recently:

Since reading most of Edward Tufte’s books a few weeks ago, I’ve come to appreciate the elegance of sidenotes. Footnotes or endnotes in printed books are irritating, but I find them especially frustrating on the web. I read something in Eric Meyer’s Cascading Style Sheets: The Definitive Guide See Figure 10-42 on page 314 of Meyer’s book. that inspired me to solve this with CSS.

You can build sidenotes with absolute positioning. First, set the style on some containing block to position: relative;. If your page is centered, it’s best to use whichever block is doing the centering. Next, style up some <span>s (or <small>s) with a sidenote class. These will contain the sidenotes inline with the text. Depending on your site’s style and your taste, you will need to create something like this:

span.sidenote {
    position: absolute;
    left: 400px;
    width: 200px;
}

The length value for top can be omitted because the positioned element will line up with wherever you put the <span> in the text. You can’t use <p>s or <div>s because XHTML doesn’t allow <p>s to contain another <p> or a <div>. If you need to add a new paragraph to your sidenote, it’s probably already too long. I use this technique to render sidenotes on this site. I don’t use numbering because the sidenotes appear next to relevant parts of text.

The XHTML and CSS validate, and this technique works in Firefox Win/Mac, Safari, IE  5  Mac, IE  6 Win, and IE  5.5 Win. To show how flexible this technique is, try resizing the text in your browser on this page. The sidenotes should move into the correct position. Please contact me with any suggestions or improvements.

Archives