Beau’s Blog

After some thought and feedback on my previous post, I’ve put together a new iteration of the technique. The new iteration is more robust, and I’ve tried to address a few concerns about long sidenotes.

Gunlaug Sørtun suggested positioning the notes from the nearest edge of the containing block, and using a negative margin on the sidenote. Joe Clark argues that <small> is the best tag for footnotes or sidenotes in XHTML. I’m including top: auto; to emphasize that the top placement is automatic. Here’s the new CSS:

You’ll need to make sure that the containing block deals with IE  6’s hasLayout issues. For the latest version of this site, I used the non-standard zoom: 1; to convince IE to “have” layout.

small.sidenote .sidenote small { line-height: 1.2em; /* or whatever you want */ 
.sidenote {
    margin-right: -170px;
    position: absolute;
    right: 0;
    top: auto; /* default, omit if you like */
    width: 150px;
}

You can add leftnotes as well: This is a leftnote! The inline code looks like this: <small class="sidenote leftnote">This is a leftnote!</small>

.leftnote {
    left: 0;
    margin-left: -170px;
    margin-right: 0;
}

A number of people pointed out that sidenotes placed close to each other may overlap. There’s no method I’m aware of to prevent this with pure CSS. You can group sidenotes together in a <div class="sidenote"> and place the group at the beginning of a paragraph. If you do this, you’ll need to number¹ each note² because they will no longer sit exactly beside their reference in text. You could also alternate notes between the left and right margins, though this isn’t ideal.

The University of Chicago Press, The Chicago Manual of Style, 15th ed. (Chicago: The University of Chicago Press, 2003), 601“3604. The Chicago Manual Of Style has some guidelines for footnotes that can apply to sidenotes as well. They recommend avoiding long footnotes, and instead integrating them with the text or creating an appendix section for them. For footnotes that have many citations in one sentence or paragraph, they recommend using one note but separating each citation with semicolons.

Make sure that there are spaces before and after the A sidenote. tags in your text so that newsreaders, screen readers, and anything else that might not recognize visual style sheets will be able to make sense of your markup.

Thanks to everyone who wrote in, especially Paul Novitski, Gunlaug Sørtun, and J. Greely.