February 14: Auto-numbering footnotes with CSS

I've been doing a lot of work on Christmas Baking: new recipes, copying new links from the Advent calendar into the links pages, and little things like creating a footnote style that will autonumber:

/*
 * Auto-numbering footnotes. Wee!
 */

I comment my stylesheets, yes.

.footnote { vertical-align: super;
  font-size: 75%;
}

Make the footnote reference number a small superscript. Pretty straightforward. vertical-align: super replaces the old <super> tag. Hard time finding that anywhere on the web!

.footnote:before { counter-increment: footnote;
  content: "[" counter(footnote) "]";
}

This is the auto-generating part of the footnote, using CSS's counter feature. Lacking all inspiration, I naed the counter footnote. Whenever an element with class footnote appears, the "footnote" counter will be incremented. I'm using the :before pseudo-selector to display the footnote number inside square brackets.

body, .footnoteDivider {
	counter-reset: footnote;
}

Here's the thing about the numbering: first, when you get to the actual footnote section, you need to re-start the numbering at 1. Secondly, before you use the counter, you need to start the numbering with counter-reset. Adding the counter-reset to the body tag makes sure you don't have to remember to add footnoteDivider to any tags.

<p>All I can think is, <em>Get a grip</em>.<a href="#unprintable"
class="footnote"> </a></p>

<hr class="footnoteDivider" />

<p><a name="unprintable" class="footnote"> </a>What I really think is
unprintable here because my mother and I maintain a fiction that I don't
curse.</p>

You can see this in action on the notablog. So, the anchor link (<a>) pointing to the footnote is assigned the footnote class, and that creates a superscript before the space between the start and end tags (and that space is necessary). A horizontal rule divides the footnotes from the main text; that's whee I add the footnote divider class to re-start the numbering. Each footnote is listed with the anchor name tag at the beginning.

Unlike a word processor, this won't re-order the footnotes if the text is re-ordered. If you move a foodnoted paragraph up or down in the text, double check that the footnotes are still in the correct order.

July through October, 2009

One-liners about bad UI, Doctor Who, and the rest of my life.

What I'm reading

• CSS: the Definitive Guide, Eric Meyer, O'Reilly.
• Catching Fire: How Cooking Made Us Human, Richard Wrangman, a primatologist at Harvard. Fascinating. Covers evolution, hunter-gatherer societies, sociology and raw food diets.

What I'm listening to

• Wait Wait ... Don't Tell Me! podcasts.
• Smithereens
• Earth Sun Moon, Love and Rockets

I bake too

And sometimes I write about it.