When I write blog entries, I find myself adding lots of information inline in parentheses and I think it makes reading the content more difficult. However, I still want to be able to add the ancillary information to help explain things that might need some background.

I’ve noticed that people like Charles Miller use footnotes for this – which seems like a good solution. I wanted to have cool footnotes with links from the inline number to the associated footnote, and that’s a lot of code to put in each time you want to add a few words of explanation for something. I decided I needed to improve my toolset.

I’ve added a footnote button to my JS Quicktags1 which will do two things:

  1. Insert a number at the current cursor position2 with a link to the footnote being added below.
  2. Insert a list item in an ordered list (and create the ordered list if needed) with the footnote entered in the prompt.

This makes it very easy for me to add my footnotes3 as I’m composing an entry. It isn’t perfect though. The footnotes are added in the order they are manually entered, rather than the numbers corresponding to the order in which the notes appear in the post. For example, if I add a few notes inline as I’m and decide I should have added a note back in paragraph 1, the footnote I add will be the last footnote in the list and numbered accordingly. In the future I may try to make it renumber all the footnotes whenever one is added, but for now I’m pretty happy with the way it’s working.

I haven’t decided yet if it’s better to keep the <sup> tags in there or not. Currently, they are in the beta download, but I don’t have them in my local code4. What is the prevailing wind on sup tags and semantics? Feel free to sound off in the comments.

I’ve zipped up a version of the JS Quicktags with the footnote code as 1.2 beta 1.

Feedback and code improvements are very much welcome.

  1. I was going to make this an optional button, but I decided it was best to just leave everything in and let people pull stuff out as needed.
  2. For Gecko and IE browsers – file those bugs against Safari.
  3. With all the interlinked goodness.
  4. I’m using CSS vertical-align: super; to make the links appear like footnotes. I’m also using JavaScript to highlight the footnote when you mouse over the link inline.