SideNotes

FootNotes and SideNotes

[a] John Gruber, About the Footnotes, Wednesday, 20 July 2005, http://daringfireball.net/2005/07/footnotes

John uses links from the reference number, to an end-note, and a link from there back to the reference in the main text.

Kartik Agaram, see http://www.cs.utexas.edu/~akkartik/feed.cgi?bash.html, quoted in IE6.0 Quirks Blog below, uses a similar link to an end note, but uses the endnote number as the link back to the main text.

[Comment: Main text and End-Note are not simultaneously visible.]

[b] John Gruber, Notes on Notes, Monday, 1 August 2005, http://daringfireball.net/2005/08/notes_on_notes

In addition to bottom-of-the-article footnotes, sidenotes (a.k.a. margin notes) can also work well on the web. Two recent implementations struck me as well-done. He also responds to comments on his first article above

Brand Spanking New’s sidenotes implementation uses CSS and JavaScript to present notes in the sidebar, in a fixed position on the page, when you click on the note reference in the main text. (See the demo here.)

[This is Bronwyn’s [d] http://www.brandspankingnew.net/archive/2005/07/css_footnotes_r.html ]

Beau Hartshorne’s sidenotes are simpler, requiring only CSS, with no scripting or hacks to workaround deficiencies in Internet Explorer. In Hartshorne’s implementation, each note is displayed in the sidebar next to the text it references.

[This is Bronwyn’s [e] http://www.hartshorne.ca/2005/07/27/footnotes_v_sidenotes/ ]

I chose a footnote-style design here for Daring Fireball, but I like sidenotes, too. In particular, I prefer both footnotes and sidenotes over pop-up and tooltip-style inline notes. No, the web is not print, but that doesn’t mean web designers can’t build upon and learn from traditional typography and print design. Both footnotes and sidenotes are well-represented in good design from the past few hundred years.

The primary advantage to sidenotes vs. footnotes is that their placement — next to the text they’re referencing — obviates the entire problem I addressed when I wrote about my own footnotes last week. There is no need to design anything to help the reader figure out what part of the main text each note applies to.

But this spatial relationship also leads to the primary disadvantage to sidenotes: a long passage of text in a sidenote prevents you from placing a second note in close proximity to the first. So sidenotes work best if your notes are short, whereas footnotes work equally well for long and short notes.

[c] Dr. ZAx , “Brand Spanking New”, Format Footnotes with Javascript & CSS, July 20, 2005 , http://www.brandspankingnew.net/archive/2005/07/format_footnote.html

There are two divs, "content" and "footnotes". "Content" holds the content, "footnotes" is empty. The footnotes are added in-line in span tags (with class="footnote") within the content.

When the button is clicked, the javascript function looks for spans with class "footnote" in the "content" div. It then swaps the text in the span for a superscripted link, and places the footnote in a div within the "footnote" div.

Normally, the function would be called onLoad.

The function can be called for multiple content and footnote divs.

Advantages:

You don't have to worry about numbering, for one thing.
The footnotes can be edited at their insertion point.
You could give users the choice of how footnotes are formatted, or whether they are shown at all.

Disadvantages:

Without Javascript, footnotes are left in-line.

To see an example, go to [d] below.

[d] Dr. ZAx , “Brand Spanking New”, CSS Footnotes revisited: Sidenotes, August 13, 2005

http://www.brandspankingnew.net/archive/2005/07/css_footnotes_r.html .

Click on the link “HTML version” to see an example of his technique “Sidenotes with Javascript & CSS” at http://www.brandspankingnew.net/specials/footnote_2.html . This uses JavaScript and CSS. You have to click on a button “Reformat Footnotes” at the top to format the SideNotes. Then you have to click on the referring superscripted number to make the SideNote appear in the right hand margin. The Sidenote always appears at the top of the column, not opposite the referring number. The body contains:

<p><a href="http://www.brandspankingnew.net/archive/2005/07/css_footnotes_r.html">www.brandspankingnew.net</a></p>

<h1>Sidenotes with Javascript & CSS.</h1>

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="footnote">This is a footnote.</span> . . . </p>

The script includes:

#content { width: 65%; font-size: 1.2em;line-height: 1.8em;}

#content h1 {font-size: 1.6em;border-bottom: 1px solid #ccc; padding: 5px 0 5px 0;}

#content span.footnote {color: #f30;}

#content span.ftnlink { vertical-align: super; font-size: 0.8em;cursor:help;}

#footnotes { position: fixed;border-left: 1px solid #ccc;top: 0px;right: 0px;width: 30%; margin: 75px 10px 0 10px;padding: 0 0 0 10px;}

#footnotes div.footnote {display: none;margin: 0 0 5px 0;}

The function “formatFootnotes()” is:

function formatFootnotes(contID,noteID)

{

var cont = document.getElementById(contID);

var noteholder = document.getElementById(noteID);

var spans = cont.getElementsByTagName("span");

notes = 0;

active = 0;

for (i=0;i<spans.length;i++)

{

if (spans[i].className == "footnote")

{

notes++;

noteholder.innerHTML += "<div class='footnote' id='ftn"+notes+"'>" + notes + ". " + spans[i].innerHTML + "</div>";

spans[i].innerHTML = "<span onclick='showFootnote(\"ftn"+notes+"\")' title='view footnote' class='ftnlink'>" + notes + "</span>";

}

// hide button

document.getElementById("btn").style.display = 'none';

}

[Comment: seems unnecessarily complex.]

[e] Beau’s Blog (Beau Hartshorne), Footnotes vs. Sidenotes, July 27, 2005, http://www.hartshorne.ca/2005/07/27/footnotes_v_sidenotes/

I’ve seen several articles and posts about footnotes and sidenotes bubble up recently:

· Daring Fireball: About the Footnotes

· Brand Spanking New: CSS Footnotes revisited: Sidenotes

· QuirksBlog: Footnotes on the Web

Since reading most of Edward Tufte’s books a few weeks ago, I’ve come to appreciate the elegance of sidenotes. Footnotes or endnotes in printed books are irritating, but I find them especially frustrating on the web. I read something in Eric Meyer’s Cascading Style Sheets: The Definitive Guide See Figure 10-27 on page 299 of Meyer’s book. that inspired me to solve this with CSS.

You can build sidenotes with absolute positioning. First, set the style on some containing block to position: relative;. If your page is centered, it’s best to use whichever block is doing the centering. Next, style up some <span>s (or <small>s) with a sidenote class. These will contain the sidenotes inline with the text. Depending on your site’s style and your taste, you will need to create something like this:

span.sidenote {
  position: absolute;
  left: 400px;
  width: 200px;
}

The length value for top can be omitted because the positioned element will line up with wherever you put the <span> in the text. You can’t use <p>s or <div>s because XHTML doesn’t allow <p>s to contain another <p> or a <div>. If you need to add a new paragraph to your sidenote, it’s probably already too long. I use this technique to render sidenotes on this site. I don’t use numbering because the sidenotes appear next to relevant parts of text.

[There is a link at the top of the page to Bronwyn’s [f] below. The SideNotes do note show in the above quote. Go to the original web page to see the SideNotes. ]

[f] Beau’s Blog (Beau Hartshorne), Better Sidenotes, August 17, 2005, http://www.hartshorne.ca/2005/08/17/better_sidenotes/

After some thought and feedback on my previous post, I’ve put together a new iteration of the technique. The new iteration is more robust, and I’ve tried to address a few concerns about long sidenotes.

Gunlaug Sørtun suggested positioning the notes from the nearest edge of the containing block, and using a negative margin on the sidenote. Joe Clark argues that <small> is the best tag for footnotes or sidenotes in XHTML. I’m including top: auto; to emphasize that the top placement is automatic. Here’s the new CSS:

You’ll need to make sure that the containing block deals with IE 6’s hasLayout issues. For the latest version of this site, I used the non-standard zoom: 1; to convince IE to “have” layout. [These appear in the right hand margin as a sidenote]

small.sidenote .sidenote small { line-height: 1.2em; /* or whatever you want */ }
.sidenote {
  margin-right: -170px;
  position: absolute;
  right: 0;
  top: auto; /* default, omit if you like */
  width: 150px;
}

You can add leftnotes as well:

This is a leftnote! The inline code looks like this:

<small class="sidenote leftnote">This is a leftnote!</small> [These appear in the left hand margin as a sidenote]

.leftnote {
  left: 0;
  margin-left: -170px;
  margin-right: 0; }

1. This is a sidenote with a numbered reference.
2. And another. [These appear in the right hand margin as a sidenote, to the right of the following para.]

A number of people pointed out that sidenotes placed close to each other may overlap. There’s no method I’m aware of to prevent this with pure CSS. You can group sidenotes together in a <div class="sidenote"> and place the group at the beginning of a paragraph. If you do this, you’ll need to number¹ each note² because they will no longer sit exactly beside their reference in text. You could also alternate notes between the left and right margins, though this isn’t ideal.

The University of Chicago Press, The Chicago Manual of Style, 15th ed. (Chicago: The University of Chicago Press, 2003), 601–604. The Chicago Manual Of Style has some guidelines for footnotes that can apply to sidenotes as well. They recommend avoiding long footnotes, and instead integrating them with the text or creating an appendix section for them. For footnotes that have many citations in one sentence or paragraph, they recommend using one note but separating each citation with semicolons.

Make sure that there are spaces before and after the <small class="sidenote">A sidenote.</small> tags in your text so that newsreaders, screen readers, and anything else that might not recognize visual style sheets will be able to make sense of your markup.

Thanks to everyone who wrote in, especially Paul Novitski, Gunlaug Sørtun, and J. Greely.

[Part of the body of the HTML file was:

<small>1. This is a sidenote with a numbered reference.</small><br />

<small>2. And another.</small>

</div>

<p>A number of people pointed out that sidenotes placed close to each other may overlap. There’s no method I’m aware of to prevent this with pure CSS. You can group sidenotes together in a <code><div class="sidenote"></code> and place the group at the beginning of a paragraph. If you do this, you’ll need to number<sup>1</sup> each note<sup>2</sup> because they will no longer sit exactly beside their reference in text. You could also alternate notes between the left and right margins, though this isn’t ideal.</p>

I was unable to find the stylesheet containing the style associated with the class="sidenote". However, it is probably

as indicated in the article above. ]

Andreas Bovens 2003, From footnotes to sidenotes, http://andreas.web-graphics.com/footnotes/

<p>This is an <a href="#ftn1">XHTML</a> <span id="ftn1">[XHTML is a reformulation of HTML 4 as an XML 1.0 application.]</span> example.</p>

So, what do we have here? I tried to put the footnote inline and, instead of glueing it to the previous word, I refered to it by means of a link. We're working with HyperText [HyperText is a system for displaying information that contains links to other related pieces of information.] after all. And oh, the brackets are just for backwards compatibility in non-CSS3-aware browsers. More about that later.

OK, now we have inline footnotes with hyperreferences. But how to display them? Inline display is not an ideal solution; what are the other possibilities?

It's here CSS3 comes in. I added this piece of code to my stylesheet:

div { padding-right: 30%; } span[id^="ftn"] { display: none; } span[id^="ftn"]:target { display: block; position: fixed; right: 0.6em; top: 3.1em; width: 25%; }

A short analysis. First, I added some 30% padding to the containing div, so as to create a sort of empty sidebar, in which the footnotes - sidenotes, in fact - will appear. Then, the CSS3 selectors. "Hide all the spans that have an id attribute that contains the letters 'ftn'", the first CSS3 selector says. The second one continues: "But show those spans as a fixed sidenote when their id is addressed, that is, when somebody clicks on the word they define."

[Comment: I could not make this work on IE6.]

Peter-Paul Koch, IE6.0 Quirks Blog, Footnotes on the Web, Written on 26 July 2005, http://www.quirksmode.org/blog/archives/2005/07/footnotes_on_th.html

Contents

Explanation

Top Sidenotes

Three footnote articles

Originality

HTML notes: <small>?

Browsing the notes

Comments

While I was busy writing largish amounts of JavaScript for money and not paying attention to the wider world, everyone suddenly started talking about footnotes on the Web, a subject I happen to be highly interested in.

Back in 1998 I created my very first site, a summary of my research into the Thidrekssaga, and since it was supposed to be a scientific publication I needed a footnote system. I ended up using a footnote frame, and back then I was pretty impressed by my own creativity. Meanwhile the wow-factor of this solution has decreased rather dramatically.

Seven years later, four articles about footnotes caught my eye within about an hour.

Sidenotes

The first article I saw was Footnotes and sidenotes with JavaScript and CSS over on Web Graphics. It contains some links to useful technical examples. More in particular, it discusses sidenotes at length, and a few months ago I'd decided for myself that sidenotes, and not footnotes, are the way to go on the Web. I was planning to do some research and write a nice article about it for some or other highly respected Web development site. Andreas Bovens and Timothy Groves seem to have pre-empted me, although their solution can be refined.

Three footnote articles

The other three articles are part of one chain. On 14 July Richard Rutter wrote Gruber's footnotes about John Gruber's handling of footnotes. In itself this is a short and not particularly interesting note, but it has a few updates caused by Joe Clark's reply. On 20 July John Gruber himself wrote About the Footnotes, where he explained what he is doing. On 24 July Joe Clark wrote There’s no such thing as a footnote, in which he confessed himself "not impressed" by Gruber's footnotes, and said:

This is an example of heaping praise upon an A-lister for doing something everyday and common under the guise of innovation.

Richard updated his post in response to Joe's remarks. I myself have a few things to say about these three articles, too.

First of all, they all discuss footnotes, and not sidenotes, and as I said before I fully agree with Andreas that sidenotes are the way to go for the Web.

Originality

Joe's main objection is that John's solution is not original. There is some truth in that. Back in 1999 I myself proposed adding such a backlink to a footnote, and I don't suppose I was the first one to think of it. Besides, Nick Finck of Digital Web Magazine fame also contributed to the discussion, and he added the backlink feature to DWM articles (see for instance this 1999 article).

Joe is wrong when he describes John's system as "a 'Back to Top of Page' link in sequined cocktail dress and rouge". It isn't, it refers back to the text referring to the footnote.

As to the praise-heaping on A-listers, I side with Richard. Joe's wrong here.

HTML notes: <small>?

Nonetheless Joe is totally right in one extremely important respect:

In HTML or XHTML, there’s no such thing as a footnote. No structure for it exists at all.

A footnote system is lacking in HTML, and I agree with Joe that that's weird for a language originally meant for distributing scientific publications.

Personally I feel that footnotes are less important than the main text of the document, and with that in mind I wondered about their semantic status. When I met him at the Amsterdam JavaScript meeting, I asked Anne van Kesteren's advice, and he suggested using the <small> element. That seems to be just the right solution. So until proven wrong, I'm going to assume that <small> is "the best" way of marking up footnotes.

Browsing the notes

With the markup out of the way, we can concentrate on presenting notes on our Web pages. I like Timothy Groves's proposal, but, as I said, I feel it can be improved. It can use a backlink to the text, and besides I miss being able to browse the notes themselves.

When reading a book with footnotes (and not endnotes!), I often catch myself reading through the notes first, and occasionally I think: "What an interesting note! Which bit of text refers to it?" Footnotes can contain nice extra's and side-stories that don't directly have anything to do with the main subject of the book, and this serendipitous information can occasionally come in quite handily. Serendipity is an important scientific tool, and it should be encouraged.

Therefore any online CSS/JavaScript system should also support the browsing of notes, without being forced to click footnote links in the main text time and again. I'm still planning to research and write an article about my approach to this interesting subject.

But that's something for the future. Meanwhile, I'm very pleased to find that I'm not the only one interested in footnotes and sidenotes on the Web.

Comments

1 Posted by Joe Clark on 26 July 2005

A distinction without a difference, surely.

2 Posted by Dante on 27 July 2005

I used to use the tag, but stopped using footnotes altogether (I'm very lazy).

I always feel guilty when I use , because it implies style which is CSS's job.

3 Posted by Dante on 27 July 2005

Sorry, the HTML in the above comment was eaten.

It should read: 'I used to use the sup tag' and 'when I use the small tag'.

(PPK, can you edit my original comment and delete this?)

4 Posted by John Hansen on 27 July 2005

Maybe it's just me, but I find footnotes completely distracting. I have bad enough reading comprehension as it is, so when I hit a footnote I find it extremely hard to have the focus to keep reading until the end. Footnotes really break the natural flow for me as a reader, online and in print.

ppk, I've read here that people scan pages, they don't read them, and it stuck with me. I think adding footnotes would interfere with many users' ability to scan. Sidenotes might be better, if they were included close enough to the body of the text so as to not disrupt the normal scanning of a page.

IMO wrapping text in an inline element with no style, and including a title attribute might be the least obtrusive way to include footnotes. If only there were some way to include clickable links in tooltips.

5 Posted by ppk on 27 July 2005

The fact that some people have difficulties with footnotes does not mean they should never be used.

6 Posted by Jacob on 27 July 2005

Footnotes are a great idea - I've used, and seen them used for ages and they're really useful. You don't *have* to read them - they're handy for "extra" info. and things like that. If used properly you shouldn't have to read them for the text to be informative.

Personally I don't see what's wrong with just putting them directly in the (X)HTML. If you want scripts to automatically sort them out then you probably want a content management system of some kind.

I *do* agree that in most cases sidenotes would be more suitable for the web. On a page in a book, it's little bother to jump down to the bottom of the page, but scrolling about a lot on the web is a right pain.

7 Posted by David on 27 July 2005

PPK, I have to side with Joe--John's system is simply a dressed up "back to top" link. Yes, it goes back to the referring text, rather than to the strict top of the page, but that's just decoration. Typical "back to top" links take you back to a table of contents, which you presumably had clicked from--hence, the TOC is the "referring text". The only distinction is that John's solution gives each return link its own target, rather than one standard "top of page" target.

I might agree that "sequinned cocktail dress and rouge" is wrong--I'd argue that it's just the rouge.

8 Posted by Joost Diepenmaat on 27 July 2005

David: I don't agree: if you have a footnote at the bottom of the page, you need some kind of easy way to go *back to the point you came from*. Especially if the page is longer than your screen.

On the other hand, I think having the notes to the side of the text that refers to it seems to me to be a lot clearer. I don't like the "click here to view the note" implementation, though - I side with PPK in that I like to read the notes seperately - they should always be displayed - a simple CSS "display:block; float: right;" on the note already does almost all I need IMHO.

9 Posted by Scott Severance on 27 July 2005

This is an issue that I have also been looking for a solution to. My objection to most types of web footnotes is that they are the equivalent of endnotes, which I despise.

I've implemented a system of displaying footnotes in-text, but hidden until the user clicks the footnote link. The main advantage here is that the user doesn't have to scroll to view the footnote, and the note isn't visible until the user explicitly requests it. It's a straightforward use of CSS with Javascript to switch classes. An example of this is at http://scottseverance.blogspot.com/2005/07/wilderness-caf.html.

As you can see, I haven't been very consistant in whether to use footnotes as in print, or to use more of a link-style approach. I'm not sure which is the best method there.

10 Posted by Beau Hartshorne on 28 July 2005

I thought of a way to do build sidenotes in pure CSS, with no hacks, and no browser problems. I've posted details here:
http://hartshorne.ca/2005/07/27/footnotes_v_sidenotes/

11 Posted by Jacob on 28 July 2005

Beau: Your solution is, IMO, the best of the lot. It is simple, effective and easy to read.

One thing though - you say you can't include 'block' elements in a paragraph tag. This is true of course, but what about 'inline-block'? I know it's not well supported but I suppose it could work in theory. (Could it be used for pseudo-paragraphs? It's messy, but it's worth experimenting with ideas).

12 Posted by Tristan Gray on 28 July 2005

Footnotes are incredibly useful for some pages and a more standardized way of doing this would be incredibly helpful but as Joe I mentioned: unlikely. Over all I like what these fellas have done, but it is true that nothing new has been done here. At the end of the day it is just anchor links.

13 Posted by David on 28 July 2005

Joost: I agree that, if you use footnotes, you ought to have a way to get back to where you were. My point was that this solution is the almost exactly the same solution people have been using for tables of contents--when you click on a link to a section, there's a link to take you back to the table of contents. In the case of footnotes, the situation is slightly reversed (the content is in the linking section, rather than the linked-to section), but the concept is the same.

I'm not saying that John's "solution" is bad, or unneeded; I'm simply saying that it's something we've all seen before, in slightly different trappings. Joe pointed this out; PPK dismissed this by pointing out the new trappings--which seemed to be missing the point of Joe's original criticism.

14 Posted by Beau Hartshorne on 28 July 2005

Jacob: Thank you. I don't think using display: inline-block; will cause too many problems, though I don't know if it's the best approach. I'm going to put this question on the css-discuss list, and will update the entry with any feedback. Personally, I think that sidenotes that need new paragraphs should instead link to a seperate discussion, or be written back into the article/entry/essay.

15 Posted by Ezra on 28 July 2005

Am I missing something? I've been reading long articles with footnote references back to the text for years. Just today:

http://www.cbpp.org/7-27-05socsec-sum.htm

#_ftn1, #_ftnref1, etc. Really, lots and lots of people have been using these for a while. There must be several programs that put them in.

I will agree that sidenotes are superior, for a reason mentioned somewhere: our visual memory of a place on the page is retained as long as the page doesn't jerk out from under our eye.

16 Posted by David on 1 August 2005

Ezra--very good point. As a test, I created a document in Microsoft Word with several footnotes and saved it as HTML. The result? Each footnote has a target of '#_ftn[x]' (where [x] is the number of the footnote), and each one has a back reference link with a target of '#_ftnref[x]'.

May I submit Microsoft Word as prior art, and proof that Gruber's footnotes are not 'original' or 'innovative', and further defence of Joe? Granted, no serious web developer that I know of creates pages in Word and then converts them, preferring to create the HTML him/herself--but many, many people aren't serious web developers, and will use the easiest solution available to them.

(Note: I tested this in Word 2003, since that's what I have right here. So this feature has been around for at least a while. Does anyone have earlier versions of Word, so we can figure out just how old this "innovative" and "original" idea actually is?)

17 Posted by Kartik Agaram on 3 August 2005

More prior art:

1. A greasemonkey script to html-ize footnotes in Paul Graham's essays:
http://simon.incutio.com/archive/2005/03/11/footnotes

2. My own articles. They have had such footnotes for a year or so. For example:
http://www.cs.utexas.edu/~akkartik/feed.cgi?bash.html. I certainly did not consider them original.

18 Posted by Patrick on 16 August 2005

http://www.ericmeyeroncss.com/bonus/render-mode.html is another quite old sample of someone using "sidenotes" with CSS only. Quite similar to Beau´s version.

Thanks to Bronwyn Boltwood for some initial leads to this topic.