Sidenotes

I’ve been experimenting with side and margin notes. They are a typographical convention borrowed from books and converted to the realities of web pages. Notably, Edward Tufte has been heavy user of side notes, (sidenote: There’s Tufte CSS stylesheet which imitates his style.) but marginalia predate Gutenberg’s printing press.

Books, therefore, were long-term investments expected to be handed down to succeeding generations. Readers commonly wrote notes in the margins of books in order to enhance the understanding of later readers.

Side notes improve over conventional footnotes, because they decrease the cognitive load of jumping back and forth between the main text and end of the article. Footnotes painfully hard to navigate on scrolling-down web pages. Some writing schools which forbid footnotes or reserve the for bibliographical references. Side notes do not burden readers so much so they may be used for longer, more off-topic, but spicier insights.

I differentiate side notes and margin notes. For me, side notes are “footnotes moved close to the referred text”. They have number and may refer a particular sentence or word. Margin notes are loosely connected to the nearby paragraph. They don’t have any number. You may read it before or after the accompanying paragraph, or you may skip them at all.

Browsers are not the only consumer of web pages. When implementing side notes on this site, I’ve considered the following mediums:

• browsers, both mobile (small screens) and non-mobile (wide screens)
• screen readers or similar assistive technologies
• RSS readers
• prints
• “reader views”, Pocket, Wallabag etc.

Side notes must correctly render in each of these, must be distinguishable from the main text, preferably easy to skip to not disrupt the article.

Semantic HTML helps a lot to write good side notes. There are 2 tags which fit the purpose of side and margin notes: <small> for side notes and <aside> for margin notes. (sidenote: <aside> is a block tag and as such must be placed outside of <p> sections, which it auto-closes, so it fits my definition of margin notes perfectly. <side> is an inline element, so it’s perfect for side notes.) Quoting MDN:

The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. (MDN)

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes. (MDN)

On small mobile screens marginalia don’t have enough margin to use, so they must render below the ordinary content: side notes immediately below the referenced text and margin notes as a separate paragraph. Some systems require users to click or tap the screen to unfold them. I don’t do it. It’s a benefit for readers that they don’t have to interact with small buttons, but see the whole content from the start.

Marginalia on wide screens are just a matter of floating them to the right. CSS counters work for numbering of side notes.

Margin notes are already semantically correct everywhere, so there’s no need for any additional work. For side notes on screen readers, RSS readers and other views, I had to employ a trick: I surrounded them with invisible parentheses. (sidenote: Hidden with CSS display:none property.) . Because RSS readers or text browsers “ignore” CSS, they will render these parentheses, preventing rendering one sentence in the middle of the other one, like two not synchronized threads. Screen readers which work with ordinary browsers won’t display these, but I’m using aria-label to satisfy these:

<small class="sidenote noindent" aria-label="side note">
  <span class="d-none">(sidenote: </span>
    Hello! I am a side note!
  <span class="d-none">)</span>
</small>

Of course, I’m not writing this every time I wish to insert a side note. I wrote a Jinja macro, which facilitates a special call block. Such block works similar to well-known Hugo’s shortcodes: everything inside the block is available in the macro by using a speciall caller() function.

{%- macro sidenote() -%}
<sup class="sidenote-number" aria-hidden="true"></sup>
<small class="sidenote noindent" aria-label="side note">
  <span class="d-none">(sidenote: </span>
    {{ caller() }}
  <span class="d-none">)</span>
</small>
{% endmacro %}

It is used like this:

Lorem ipsum.{% call sidenote() %}Dolor sit amet.{% endcall %}

This macro must be placed incorrectly (sidenote: From a typographical point of view.) after full stops or commas. It is a trade-off for presentation on small screens, where side notes are immediately put in a box below small screens and these characters would render as a first character in the next line below the box.

This system doesn’t need any Javascript – similar to this whole page.

See Also

• Gwern Branjen’s comparison of web side note systems
• Koos Looijesteijn’s discussion of semantic side notes and a follow up