Auto-linking Footnotes
Here’s a little jQuery I worked up that sniffs out footnote indicators and auto-links them to the proper footnote, then links the footnote back to the indicator.
| $('sup[data-footnote]').each(function(index) { | |
| noteCount = $(this).html(); | |
| $(this).html('<a id="ref' + noteCount + '" href="#note' + noteCount + '">' + noteCount + '</a>'); | |
| $('#footnotes li').eq(noteCount - 1).attr('id', 'note' + noteCount).prepend('<a href="#ref' + noteCount + '">' + noteCount + '.</a> '); | |
| }); |
| The footnote indicator looks like this.<sup data-footnote>1</sup> | |
| A second one looks like this.<sup data-footnote>2</sup> | |
| The script expects the footnotes to look like this; it could be UL or OL, up to you, just know | |
| the script prepends the count to the LI, so use CSS to hide the native bullets: | |
| <ul id="footnotes"> | |
| <li>Footnote text for the first one.</li> | |
| <li>Footnote text for the second one.</li> | |
| </ul> |
You can see them in action on this post or on A List Apart. The upside to this is it allows for less production work for editors, who don’t have to remember what format footnote links need to be in, all they need to do is add a consistent data attribute to their sups and number them correctly.
I’ve decided (for myself at least) that un-linked footnotes in non-JS environments are fine with me — they aren’t a new invention, and I suspect everyone knows where to go looking for them.
That said, there is one edge case that might be a concern: what if someone shares a URL with an anchor in it, and someone in a non-JS environment tries to open it?