Stuart Langridge: Notes on footnotes

I use footnotes quite a bit in my posts. Normally for snarky asides, I grant you, but I picked that habit up from Terry Pratchett.

They’re easy to add to WordPress; I use Andrew Nacin’s Simple Footnotes WP plugin, and then all you have to do is drop [ref]footnote text here[/ref] into the text of your post ¹ and it takes care of numbering the footnote, displaying it at the bottom of the page, allowing you to link back and forth.

However, as Jake Archibald pointed out on Twitter, footnotes at the bottom of the page feel rather like a print media sort of thing. That’s useful, if someone prints your page out, or if they run it through some sort of “easy reading” service such as Readability or iOS Reader, or if your page gets turned into an ebook — we don’t want to remove that capability. But, as noted, scrolling down to the bottom of the page to read a footnote and then scrolling back up again is stupid. The Simple Footnotes plugin gets half a point for this by making the footnote number (a superscript 1, or whatever) be a link which jumps to the footnote for you, and each footnote has its own “return” link which takes you back to where you were. That’s great on a touch device. If you’ve got a pointer, we have the ability to hover, and this is what tooltips are for, so if we add title="text of the footnote" to the footnote number link, you can see the text of the footnote without having to click and jump around the page at all by just mousing over the number.

Footnotes with a properly-sized hit target

That superscript 1 is a pretty tiny target though, either to click or to hover over. It would be nice if the mouse target were bigger, but we don’t want a bunch of white space around the number. So, a little CSS:

a.simple-footnote {
	text-decoration: none;
	position: relative;
	color: rgba(255,0,0,0.7);
        /* cater for WP putting too much left spacing
           in before footnote numbers */
	margin-left: -.2em; 
}

a.simple-footnote::after {
	content: " ";
	position: absolute;
	display: inline-block;
	padding: 1em;
	margin-left: -1.3em;
	margin-top: -.3em;
	border: 1px solid transparent;
	border-radius: 2px;
}

a.simple-footnote:hover::after {
	background: rgba(0,0,0,0.2);
	border: 1px solid rgba(0,0,0,0.4);
}

which I added to Admin > Appearance > Edit CSS in WordPress. Now you get a nice large hit target for your mouse, which lights up when you’re over it, and a tooltip, but your page still contains its footnotes properly when run through Readability or printed (which it might not if you were to use some sort of JavaScript popover library rather than the stuff that’s just built in to the browser and understood by accessibility tools).