关于脚注

I’ve been experimenting with the use of footnotes here on Daring Fireball over the last few months.1In print, implementing footnotes is rather straightforward: put the note references in the text, then place the notes themselves in smaller type at the bottom of the pages where the references occur.

在博客帖子中,实现并不那么明显It’s easy to just put the note references in the text, in superscript, and make them clickable links that jump to the notes themselves at the bottom of the article而这或多或少都是我所做的,最初。

The problem with this is that a weblog post — especially longish ones like those here at 万博manbetx贴吧 — is very different from a printed page in a book当你,即the reader, encounter a footnote reference in a book, you can glance down to the bottom of the current page to read the note, then glance back up to your original position in the textYou can do this because you have some short-term spatial memory of where the footnote reference was — and all you have to do is get close, visually, and your eyes will quickly spot the superscript footnote reference.

但是有了博客帖子,就没有“页面”It’s just one long article that scrolls down continuouslyBy placing the notes at the bottom of the article, they’re in some way more like endnotes than footnotesAssuming there’s a hyperlink from the superscript footnote reference to the note itself, how do you get back to where you were when you’re done reading the note?

它结束了你能够use the browser Back button for this, but this isn’t obvious, and it isn’t perfectBecause what if you (again, the reader) decide to wait and read the notesyou’ve finished the article, rather than reading them on-the-fly as you encounter the references? It’d be nice to be able to figure out from the notes themselves where they were referenced in the text.

所以,这就是我想出来的。

At the end of each footnote, I’ve included a link back to the spot in the text where the note is referencedRather than add needless noise to the page, instead of using a textual link, I’m simply using a bit of Unicode typography:

A.k.a统一带箭头的向左箭头, decimal-encoded HTML entity↩Clicking on the arrow at the end of each note will jump you back to the spot in the text where the note was referenced. This works pretty well and looks pretty good, and it solves the “how do you get back to the text from the footnote” problem concisely and quietly.2

There are innumerable other ways footnotes — or footnote-esque asides — can be implemented on the webDynamic HTML techniques allow you to toggle element visibility on the flyI considered ideas for displaying footnotes to the right of the main text column, and also making them pop into place directly underneath the paragraph in which they’re referencedI’ve seen some sites which implement footnote-esque asides as mouseover tooltips.

但我喜欢底部的传统位置It just feels right to mePlus, this design has the added benefit of requiring no CSS or JavaScript whatsoever, just relative anchors, which means that for 万博manbetx贴吧 members who read the site via thefull-content RSS feed,脚注在其Feed聚合器中工作(At least they work in NetNewsWire, which covers the overwhelming majority of members who read the full-content feed.)


  1. 例如“Font Caches Gone Wild”。↩︎

  2. 当然,因为它是一个Unicode字符,所以设计假设您拥有一个精通Unicode的Web浏览器并且在您的系统上安装了Unicode-savvy字体Windows XP之前版本的某些用户可能只看到一个方框而不是一个钩状箭头我的心脏流血。↩︎