arrow-left arrow-right brightness-2 chevron-left chevron-right facebook-box facebook loader magnify menu-down rss-box star twitter-box twitter white-balance-sunny window-close
Footnotes and Textpander
2 min read

Footnotes and Textpander

I’ve contemplated using footnotes here for years and have fleshed out all kinds of variations, but I always seem to abandon them rather quickly, opting instead to use long parentheticals because implementing footnotes in HTML is a bit of chore.

Technically, it’s pretty mindless. All you’re really doing is using anchors to specify a spot (i.e., the footnote) to move to within the HTML document — HTML 101. The thing is, to make everything look nice and function well, a bit more effort is required, and this effort, over time, can become quite burdensome.

That’s where Textpander (now called TextExpander) swoops in to save the day. Textpander listens to what you type and inserts predefined text snippets on the fly whenever you enter their corresponding abbreviations. While there have been other programs that do this very thing, I’ve yet to find one that does it as well as Textpander; it’s fun to use and lends itself well to all kinds of applications, including hypertext footnotes, which I describe below.

I’ve ‘mapped’ both the footnote reference and the footnote itself. Whenever I type rf (in any application) the following automagically appears:

<sup id=r1-%m%d%y><a href=#f1-%m%d%y>1</a></sup>

And when when I type fn, out pops:

<div class=footnotes>
<hr />
<li id=f1-%m%d%y>
<p>FOOTNOTE TEXT<a href=#r1-%m%d%y>&uarr;</a></p>

As you can see, these little snippets of text are nothing more than footnote ‘templates’ that I created and all I’m required to do after they’ve been ‘called’ and inserted is add the footnote text; I went ahead and ‘mapped’ the 2nd and 3rd footnotes as well so that I don’t have to manually change the number at the beginning of the anchors that corresponds to the current footnote (see above examples).

Unique anchors

Obviously when you’re using anchors you need them to be unique, else, when visitors are on a large archive page (such as that for 2004), a footnote reference might bring them to a footnote meant for a post other than the one they’re currently reading. See the %m%d%y text in the examples above? I use these to produce the date in the form of 082905 (for August 29, 2005), which, as it turns out, are perfectly suited to uniquely identify a particular point in the text.¹

You’ll also notice a little arrow at the end of each footnote. The links used for these arrows need to be unique as well because they bring the reader back to the footnote reference that brought them down to the footnote in the first place (hat tip Gruber).

Too serious?

I realize that some of you might think that by using footnotes I’m taking myself (and this site) a bit too seriously, and you might be right, but if at the end of the day the footnotes make the posts easier to read, then I don’t really care.

  1. Assuming of course that you don’t have more than one entry per day that uses footnotes. I can’t see this being an issue for me.
You've successfully subscribed to Justin Blanton.
Success! Your account is fully activated, you now have access to all content.