semantic-sidenotes-for-the-web

I will try to keep it short, because I have tendency to make stories longer than necessary. My relatives already mocked my rambling when I was a teenager. Complained that my stories had no begin and no end.

I noticed that in my writing too. It’s good practice to make blog posts short. But I like to add details, anecdotes and silliness.

Luckily, there’s an old typographical solution for that: sidenotes. I can put all the info that’s not critical for the main story there, so you, dear reader, can just skip that kind of frivolry, if you’re not interested.

Handwritten page with wide margins containing notes
This late-13th century page has wide margins for notes. Although the notes may have been added later in this example, it’s not uncommon for printed texts to have sidenotes from the author.

On this website, sidenotes appear next to the article when there’s enough space. On small screens, they’re hidden by default and can be made visible with a tap. Here’s
an example

(sidenote:
Actually, here’s the example! This is the actual sidenote.
)


.

The problem is, it’s hard to find a properly semantic HTML solution to do this.

Requirements

My sidenotes have two parts:

  1. The sidenote’s content
  2. A word or a span of words that it refers to.

My additional requirements for them are:

Elements that don’t work

Here are some options that I considered, with help from answers on my StackOverflow question.

Footnotes1 appear below the text. That requires one click to go there and another to go back to the article. Way too much effort. Moreover, most of my sidenotes make no sense without the context of the sentence they refer to. That also rules out the