I just noticed the way John Gruber handles footnotes on Daring Fireball. In particular the little arrow1 appended to the footnote which sends readers back to their place in the text. Altogether very neat. You’ll be needing this: ↩ entity for the arrow.
- Something like this. ↩
Update. Well that’s timely (a coincidence?) – Gruber explains the footnotes himself.
Update. A response to Joe Clark’s post. I feel a little self-defence is in order (even though his post may not have been directed solely at me). To address Joe’s last point first:
This is an example of heaping praise upon an A-lister for doing something everyday and common under the guise of innovation.
Less said the better, but I do feel I should point out a little chronology. I published this single-paragraph post nearly a week before Gruber posted his own missive on footnotes. Had I known he would write such a post I wouldn’t have bothered.
Grubers footnotes arent footnotes at all, but merely a “Back to Top of Page” link in sequined cocktail dress and rouge. Hence they should not be given any more attention than such links have been. There’s no innovation whatsoever here
The whole point is that they are not merely “Back to Top of Page” links; they are “Back to Where You Were Reading” links. A subtle but important difference. Not particularly innovative, but something I hadn’t seen before so I deemed it a treatment worth noting.
even his choice of Unicode arrow character is wrong (we are not hooking and moving leftwards; we’re going straight up ↑).
Does the chosen symbol really contain that much typographical, literary or scientific meaning? I don’t know. I thought the arrow appropriate because it implied a slightly different behaviour to the straight up arrow more commonly used for “back to top” links, which this isn’t. A browser’s back button points to the left, and does this linked arrow not take you back? Perhaps an upwards dashed arrow ⇡ would be as appropriate? Anyway the arrow itself wasn’t a point of great fascination, especially as these Unicode characters fail to render properly in most cases.
In HTML or XHTML, there’s no such thing as a footnote. No structure for it exists at all.
Well that’s true, but does it mean ‘footnotes’ are just ‘notes’ in HTML documents or should we simply not be writing web pages in a manner that requires such explanatory annotations? Perhaps these notes should be held together on a separate page in a more conventional hypertext construct?
Comments
1
You can ommit the throw-off in line-height by using superscript unicode characters like or by setting sup { line-height: 0 } in CSS.
2
...but not in IE…
...so most readers will see a square box.
frikkin M$...
3
ACJ – great tip for the superscript line-height – thanks!
And those hoping to use Unicode superscript characters need look no further than Alan Wood’s Unicode Resources.
4
Jim, I’d say it’s debateable whether that should be blamed on IE/Win as the character is not available in most Windows fonts.
The only reason Firefox renders an arrow is because it attempts to create the symbol itself rather than pulling a non-existant character from the font. But you’re right in that this technique (using a Unicode character) won’t work reliably on Windows.
5
The arrow’s kinda cool. But yeah, I particularly like the fact he put in the link back to where you were. I’ve just implemented footnotes on a site, but I didn’t think about linking back.
6
I liked the idea of this, but I think the up arrow, which is use on my site, is much more clear.
http://unraveled.com/archives/2005/07/culture
7
I still enjoying getting those entity code numbers from using Eric Costello’s 5k coding contest entry from some years back.
8
I have been using footnotes on Digital Web Magazine since about 1999 (<a href=”http://www.digital-web.com/articles/liquid_web_design/”>see this article for example</a>), but most authors don’t use them anymore, instead they tend to link directly into the resource where needed. I just used the text “Back to content” but I kind of like the arrow idea.
9
I have an identical mechanism here: http://phnk.com/design/survey
Not that innovative, though, I tend to agree with Joe Clark.
Oh, another footnote article here: http://web-graphics.com/mtarchive/001626.php
10
It’s just an anchor, and yes, the arrow matters. Up is different from down, right? Hence around to the left is different from up.
11
“Does the chosen symbol really contain that much typographical, literary or scientific meaning?”
That could probably be argued, actually, but Joe has as usual opted for alienating his audience and flaunting his personal preferences rather than making his point.
In reply to your question: Technically? Yes, probably. Some characters do carry meaning along with them that could confuse. In actual usage, such as over at Daring Fireball, people will probably understand what’s going on quickly enough. Neither stars nor rightward-pointing printer’s fists say “permalink” to me, but we all figured those out, too.
Besides, you’d be moving back (in [reading] history) and not necessarily up when clicking one of those return links, so the up arrow is just as wrong. The fact that the majority of web pages are vertically-oriented doesn’t directly translate to it being proper to use up-down references to moving around within them. A simple stylesheet change will prove that easily.
12
For what it’s worth, my thinking is that the glyphs at the end of my notes mean “go back” more than they mean “go up”, and since leftwards pointing arrows have meant “go back” for over 10 years, I figured left was the direction to point. I chose the hooked arrow, instead of, say, ← or ⇠, simply because it felt right.
13
The arrow Gruber uses literally signifies ‘return’. It comes from the days of typewriters, where at the end of a line you’d hit the return key to send the carriage back over to the right (and usually feed on a line – the original CRLF) ready to start a new line.
Agreed, when used in this context (to return to a higher point in the page) the arrow is not literal. But it’s a symbol that conveys the concept of returning. It doesn’t have to be literal to do that. Most symbols are not literal and are easier to understand because of it.
14
“The whole point is that they are not merely Back to Top of Page links; they are Back to Where You Were Reading links. A subtle but important difference. Not particularly innovative, but something I hadnt seen before so I deemed it a treatment worth noting.”
True, they are back to the text and not back to the top of the page, but that is old also.
Without the symbol ↩ it was done on many page on the www; before even CSS. I did even before I knew much about HTML. The symbol is nice though; I worte ‘Back’.
As for footnotes/notes of cause they are not going away, and people need to come up with a way to handle them – probably more than one way.
Aside: I wish more www page/blogs were broken use to be pages – smaller units so we could easily stop reading go pee and come back to where we left off.
15
Well clearly it was new to me (and obviously was to Gruber too) even if the technique in question is both simple and obvious. So I figured it would be useful to other people too. And it probably was, it’s just that all I hear is “I’ve being doing that for ages” comments and get accused of being an A-list fanboy. Oh well, that’s blogging for you.
16
It’s worth reading Bob Easton’s trials with this technique and various screenreaders.
17
The “back” arrow (rather than an upward arrow) makes much more sense to me semantically because, as you said, it’s not “up to the top” but “back to where you were reading”. I think, perhaps, where sites had various “back to ” links, using different arrows in footnotes this way makes for good distinction, though I know that not all readers will read a web page the same way, and nor will all web page authors author one the same way either. In sites where only one “back to _” link type is found, such as a “back to where you were reading”, it makes no sense to me to change the arrow style. So I guess I don’t understand some of the commenters arguments.
However, it’s [footnotes in general, that is] a good thing to keep in mind. It’s always been something I’ve played around with but never really truly found a use for (simply because I don’t blog much), but can certainly understand why someone would choose that arrow over others.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.