BerandaComputers and TechnologySidenotes in Web Design

Sidenotes in Web Design

Sidenotes/margin notes are a typo­graphic con­ven­tion which improves on foot­notes & end­notes by instead putting the notes in the page mar­gin to let the reader instantly read them with­out need­ing to refer back and forth to the end of the doc­u­ment (end­notes) or suc­ces­sive pages (foot­notes spilling over).

They are par­tic­u­larly use­ful for web pages, where ‘foot­notes’ are de facto end­notes, and click­ing back and forth to end­notes is a pain for read­ers. (Foot­note vari­ants, like “float­ing foot­notes” which pop up on mouse hov­er, reduce the read­er’s effort but don’t elim­i­nate it.)

How­ev­er, they are not com­monly used, per­haps because web browsers until rel­a­tively recently made it hard to imple­ment side­notes eas­ily & reli­ably. Tufte-CSS has pop­u­lar­ized the idea and since then, there has been a pro­lif­er­a­tion of slightly vari­ant approach­es. I review some of the avail­able imple­men­ta­tions.

For gen­eral users, I rec­om­mend Tufte-CSS: it is fast & sim­ple (us­ing only com­pile-time gen­er­a­tion of side­notes, ren­dered by sta­tic HTML/CSS), pop­u­lar, and easy to inte­grate into most web­site work­flows. For heavy foot­note users or users who want a drop-in, run­time Javascrip­t-based solu­tions like sidenotes.js may be more use­ful.

Side­notes and mar­gin notes (some­times also called “asides”) are an alter­na­tive to In typog­ra­phy, line length is the width of a block of type­set text, usu­ally mea­sured in units of length like inches or points or in char­ac­ters per line. A block of text or para­graph has a max­i­mum line length that fits a deter­mined design. If the lines are too short then the text becomes dis­joint­ed; if they are too long the con­tent loses rhythm as the reader searches for the start of each line.

” data-popup-author=”Eng­lish Wikipedia” data-popup-date=”2020-09-01″ data-popup-title=”Line length” data-popup-title-html=”Line length” href=”” title=””Line length”, English Wikipedia, 2020-09-01; abstract: “In typography, line length is the width of a block of typeset text, usually measured in units of length like inches or points or in characters per line. A block of text or paragraph has a maximum line length that fits a determined design. If the lines are too short then the text becomes disjointed; …””>short lines many doc­u­ments wind up look­ing like a nar­row river of text flow­ing down a vast blank map. This river of text may be stud­ded with the occa­sional foot­note or end­note, includ­ing ancil­lary mate­r­ial like cita­tions or digres­sions or extended dis­cus­sion of tricky points or antic­i­pa­tion of objec­tions or just the author being wit­ty, which require con­stant back and forth from the place in the text where they make sense and where they can actu­ally be read. As a result, who ever reads end­notes in a phys­i­cal book? Only the most dili­gent will keep a thumb in the back to actu­ally look up end­notes, and so they are either unread or tend to be rel­e­gated to the most util­i­tar­ian uses like raw cita­tions.

The sit­u­a­tion is even worse on the Inter­net, because while foot­notes in a book aren’t too bad (as long as they stay on the same page), web pages don’t really have ‘pages’ and ‘foot­notes’ wind up degrad­ing to sim­ply end­notes.1

Why do we use end­notes? For the most part, we use them for cita­tion meta­data, abbreviations/definitions, and more extended dis­cus­sions (often humor­ous). But none of these are served well online by end­notes: cita­tion meta­data is bet­ter pro­vided as hyper­links to full­text, def­i­n­i­tions/abbre­vi­a­tions have native HTML sup­port as tooltips/popups—leaving only the extended dis­cus­sions use-case.

The Ele­ments of Typo­graphic Style is the author­i­ta­tive book on typog­ra­phy and style by Cana­dian typog­ra­pher, poet and trans­la­tor Robert Bringhurst. Orig­i­nally pub­lished in 1992 by Hart­ley & Marks Pub­lish­ers, it was revised in 1996, 2001 (v2.4), 2002 (v2.5), 2004 (v3.0), 2005 (v3.1), 2008 (v3.2), and 2012 (v4.0). A his­tory and guide to typog­ra­phy, it has been praised by Her­mann Zapf, who said “I wish to see this book become the Typog­ra­phers’ Bible.” Jonathan Hoe­fler and Tobias Frere-Jones con­sider it “the finest book ever writ­ten about typog­ra­phy,” accord­ing to the FAQ sec­tion of their type foundry’s web­site. Because of its sta­tus as a respected and fre­quently cited resource, typog­ra­phers and design­ers often refer to it sim­ply as Bringhurst.

” data-popup-author=”Eng­lish Wikipedia” data-popup-date=”2020-09-01″ data-popup-title=”The Elements of Typographic Style” data-popup-title-html=”The Ele­ments of Typo­graphic Style” href=”” title=””The Elements of Typographic Style”, English Wikipedia, 2020-09-01; abstract: “The Elements of Typographic Style is the authoritative book on typography and style by Canadian typographer, poet and translator Robert Bringhurst. Originally published in 1992 by Hartley & Marks Publishers, it was revised in 1996, 2001 (v2.4), 2002 (v2.5), 2004 (v3.0), 2005 (v3.1), 2008 (v3.2), and…””>The Ele­ments of Typo­graphic Style, 2004):

Foot­notes are the very emblem of fussi­ness, but they have their uses. If they are short and infre­quent, they can be made eco­nom­i­cal of space, easy to find when wanted and, when not want­ed, easy to ignore. Long foot­notes are inevitably a dis­trac­tion: tedious to read and weary­ing to look at. Foot­notes that extend to a sec­ond page (as some long foot­notes are bound to do) are an abject fail­ure of design.

End­notes can be just as eco­nom­i­cal of space, less trou­ble to design and less expen­sive to set, and they can com­fort­ably run to any length. They also leave the text page clean except for a pep­per­ing of super­scripts. They do, how­ev­er, require the seri­ous reader to use two book­marks and to read with both hands as well as both eyes, swap­ping back and forth between the pop­u­lar and the per­snick­ety parts of the text.

Side­notes give more life and vari­ety to the page and are the eas­i­est of all to find and read. If care­fully designed, they need not enlarge either the page or the cost of print­ing it. Foot­notes rarely need to be larger than 8 or 9 point. End­notes are typ­i­cally set in small text sizes: 9 or 10 point. Side­notes can be set in any­thing up to the same size as the main text, depend­ing on their fre­quency and impor­tance, and on the over­all for­mat of the page. If they are not too fre­quent, side­notes can be set with no super­scripts at all (as in this book), or with the same sym­bol (nor­mally an aster­isk) con­stantly reused, even when sev­eral notes appear on a sin­gle page.

Our extended dis­cus­sions ought to be made easy to read in con­text and not hid­den away at the end of the page. Side­notes let us reuse some of that unused mar­gin, in a way which is com­fort­able to read, and which is com­pat­i­ble with exist­ing doc­u­ments & work­flows using end­notes: sim­ply move those end­notes into the mar­gin of the text they refer to. The user can com­fort­ably sac­cade over to a side­note instantly to skim it and back, the infor­ma­tion den­sity of the lay­out increas­es, it requires no exotic tech­nolo­gies or rewrites or user edu­ca­tion, it has a long respectable his­to­ry, and it’s just gen­er­ally a good idea.

Some exam­ples of side­notes in books; Bringhurst uses side­notes him­self, of course:

Bringhurst 2004 exam­ple of side­notes & mar­gin notes (in this case, it repeats the sec­tion head­ing)

Side­notes exten­sively used in medieval man­u­scripts and early mod­ern books such as the first 2 pages) (see also

The Dic­tio­n­naire His­torique et Cri­tique was a French bio­graph­i­cal dic­tio­nary writ­ten by Pierre Bayle (1647–1706), a Huguenot who lived and pub­lished in Hol­land after flee­ing his native France due to reli­gious per­se­cu­tion. In 1689, Bayle began mak­ing notes on errors and omis­sions in Louis Moreri’s Grand Dic­tio­n­aire his­torique (1674), a pre­vi­ous ency­clo­pe­dia, and these notes ulti­mately devel­oped into his own Dic­tio­n­naire.

” data-popup-author=”Eng­lish Wikipedia” data-popup-date=”2020-08-31″ data-popup-title=”Dictionnaire Historique et Critique” data-popup-title-html=”Dic­tio­n­naire His­torique et Cri­tique” href=”” title=””Dictionnaire Historique et Critique”, English Wikipedia, 2020-08-31; abstract: “The Dictionnaire Historique et Critique was a French biographical dictionary written by Pierre Bayle (1647–1706), a Huguenot who lived and published in Holland after fleeing his native France due to religious persecution. In 1689, Bayle began making notes on errors and omissions in Louis Moreri’s Gr…””>His­tor­i­cal and Crit­i­cal Dic­tio­nary, demon­strat­ing recur­sive footnotes/sidenotes (1737, vol­ume 4, pg901; source: Google Books)

Side­notes have been less used in more con­tem­po­rary books; the best-known pop­u­lar­izer is

Exam­ple of Tufte’s use of side­notes & mar­gin notes: they pro­vide addi­tional exam­ples, com­men­tary, and cita­tion meta­data for the reader in con­text, with­out forc­ing inscrutable lookups buried deep at the end of the chap­ter (or worse, book) which few read­ers will ever bother with. (From pg61, “Lay­er­ing & Sep­a­ra­tion”, Envi­sion­ing Infor­ma­tion, Tufte 1990)

ACM Tur­ing Award, infor­mally con­sid­ered the Nobel Prize of com­puter sci­ence. Knuth has been called the “father of the analy­sis of algo­rithms”.

” data-popup-author=”Eng­lish Wikipedia” data-popup-date=”2020-08-31″ data-popup-title=”Donald Knuth” data-popup-title-html=”Don­ald Knuth” href=”” title=””Donald Knuth”, English Wikipedia, 2020-08-31; abstract: “Donald Ervin Knuth is an American computer scientist, mathematician, and professor emeritus at Stanford University. He is the 1974 recipient of the ACM Turing Award, informally considered the Nobel Prize of computer science. Knuth has been called the “father of the analysis of algorithms”.””>Don­ald Knuth in TAOCP) is a com­pre­hen­sive mono­graph writ­ten by com­puter sci­en­tist Don­ald Knuth that cov­ers many kinds of pro­gram­ming algo­rithms and their analy­sis.

” data-popup-author=”Eng­lish Wikipedia” data-popup-date=”2020-09-01″ data-popup-title=”The Art of Computer Programming” data-popup-title-html=”The Art of Com­puter Pro­gram­ming” href=”” title=””The Art of Computer Programming”, English Wikipedia, 2020-09-01; abstract: “The Art of Computer Programming (TAOCP) is a comprehensive monograph written by computer scientist Donald Knuth that covers many kinds of programming algorithms and their analysis.””>The Art of Com­puter Pro­gram­ming uses mar­gin notes as a kind of index, list­ing key­words in the mar­gin. The den­sity of key­words can make the mar­gins inter­est­ing to read on their own; an exam­ple from TAOCP: pre-fas­ci­cle 4B: “A Draft of Sec­tion His­tory of Com­bi­na­to­r­ial Gen­er­a­tion”:

Mar­gin notes show­ing key­words for dis­cus­sion of Chinese/Indian algo­rith­mic his­tory in Knuth.

So, side­notes are great. They are also easy in LaTeX PDFs.2 But how do we use them online for HTML?

Although side­notes are ‘just’ snip­pets of text to the left or right of the main text and it might seem hard to screw it up, as always, there are a lot of ways to accom­plish that goal, and many ways we can enhance (or screw up) them.

Do we put them on the left, right, or both sides? What of the sev­eral pos­si­ble HTML ele­ments are our side­notes delim­ited as (, ,