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:
- Insert a number at the current cursor position2 with a link to the footnote being added below.
- 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.
- 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.
- For Gecko and IE browsers – file those bugs against Safari.
- With all the interlinked goodness.
- 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.
Ooooooh, spiffy.
I used to footnote extensively when I posted exhaustively on Usenet. I was the king of the four-line reply with ten footnotes on alt.books.tom-clancy.
Technically speaking, element ids aren’t supposed to start start with a numeral. You might want to hardcode an alpha leader in for ids, like “fn1234567”.
Personally, I might have wrapped the links in a ‘sup’ element, rather than directly styling the link. But one could make good arguments for doing it either way.
I like the hightlight-on-hover, even though the footnote is sometimes off-screen. One possible modification might be to use something like nice tooltips for the footnotes.
Yeah, I’m considering adding the sup tags back in for my site (they are in the packaged quicktags) so that the unstyled text displays better.
Good tip on the id prefix, I’ll do that.
The link on each # jumps to the corresponding footnote, so I’m not concerned about it being off the screen.
Yeah the ID has to start with a letter or it isn’t valid XHTML 1.1.
I tend to find this implementation less useable than a simple use of parenthesis. Having to jump from a mid-point in the content to the end of the content and then back again to read your thoughts in their entirety as well as in their original order is distracting, more time consuming and not conducive to a user’s sense of focus.
I tried a similar experiment by allowing ‘side thoughts’ to live to the side of the content allowing a little more context (same visual plane) to the information, but found that even this was inferior to integrating the additional piece of information into the narrative itself and allowing people to digest information as they are accustomed to: from left to right, top to bottom.
I’ve been finding myself holding back and rewriting lots of sentances to try to keep them readable with the parenthases (here is an example). I like having the freedom to go on for a few lines with this format.
What about a link in the footnote taking you back to the reference? Ie. see a <sup><u>3</u></sup>, click it, read the footnote, click a (ref) link, and continue where you were.
I generally use the normal html tags even if I’m going to style an element with by class or id. That way it breaks nice. Ie. headings use <h1 id’header’> even though they’re styled differently. Meaning: use the <sub> tags, but style them anyway.
I thought about having links back, I may still do it. My question about not using SUP tags was more along the lines of how SUP tags fit into the semantic XHTML world. SUP is clearly a presentation tag, but if it has semantic meaning or not is hard to say.
Yearrr! This be just what I’ve been thinkin’ of meself! In agreement, I be, that writing footnote code by hand is tedious! I look forward to checkin’ this out…
Oh, and links from the note to the reference are a must, I agree.
Personally I don’t think superscript is any more a semantic attribute than bold or underline. However, you do want the numeral to be superscripted, one way or the other, if it’s appended to a word the way you have it. The alternative would be to seperate the footnote reference using the [1] convention; then it doesn’t need to be superscripted and the issue goes away đ
I agree Laurie, however I think the somewhat meaningless SUP tag is probably preferable to including brackets in the actual content.
Hi Alex. Is there any chance of you to pack this as a WP-1.5.1 compatible plugin?
It’ll be in the next release of the Quicktags – I can probably replace the default WP quicktags with my version.
Glad to hear that, I’ve been getting quite anxious about text styling on my blog and footnotes came to my mind. Since the only site running wp uses them is yours I was wondering how’d you do that. Ah well, now all i’ve got to do is wait. Any ETA?
I too agree about needing the linkback from footnote to post text. Any plans to add it? Without this, the commenter who said that footnotes break the rhythm & flow of reading the post is absolutely correct.
Already added, take a look at more recent posts.
JavaScript Quicktags 1.2
I’ve released a new version of my JavaScript Quicktags. I’ve been using this version for a while now, just hadn’t gotten around to packaging it up for release.
This version has a changes:
A few additional tags, including an “External Link…
[…] Excelente utilidad para quellos que gustan de documentar sus artĂculos, pero que luego se hacen un lĂo con los parĂ©ntesis, las comas y los guiones a la hora de incluir las referencias: es decir, todos los bitacoreros o la inmensa mayorĂa. Pues, nada, Alex King ha ideado una fĂłrmula para solucionar este problema, Footnotes, un editor de etiquetas en el que incluye la posibilidad de ir generando notas al pie (o notas al margen) segĂșn se vaya necesitando. […]
[…] Okay, I think I’m in content-management heaven. Check out these spiffy methods to add footnotes and alternate-markup hyperlinks in your blog entries: 1, 2, 3. Now, this super-secret test blog is beginning to be useful. […]