Sidenotes

I discuss why sidenotes are neat and how I implemented them here in html/css. 05012023

Why?

I was thinking that it would be nice to have the possibility to publish long(ish) form writing on this website. And before I can get to this writing (read: while I even figure out what to write about) I want this website to be able to accomodate that kind of ramble. A long block of text interspersed with a few headers could surely be enough, but that's not very exciting, and most of all, does not really make use of the possibilities offered by the medium.

When I think of reading academic books/papers one of the limit of the print format are the options in terms of main-text enhancement. Authors make more or less extensive use of additional notes. They can for example contain information that did not make it in the main body of the text but that is still relevant enough to be mentioned. Going deeper on some arguments, suggesting further ressources and acknowleging sources are important parts of the text that often need to find a place other than the main body of the text.

The two options I come across the most in print are footnotes and endnotes. The former is closer to it's reference, making it easier to find. The latter requires the reader to find the corresponding note at the end of the book, but has the advantage of leaving the flow of the main body text intact. This is especially relevant because some authors pack a lot into those notes, which, when placed at the foot of the page, tend to take a lot of space. Those notes can become a subtext that ends up distracting the reader from the main argument, rather than enriching it. A website solves some of this problems: clickable links makes finding the corresponding note easier, and the space is less restricted than print. We can also get more creative with the main body. Want to hide a part of the argument under a <details> element? Go ahead. Want to embed video, images, sound? No problem. Enter sidenotes Hallo! I'm a sidenote.where we can scribble something in the margin. They are easier to find in comparison to footnotes, especially on a web page where the footer can be quite far down. Plus I think they are fun and look good. Enough reasons to try to implement them here. Rather than one monolithic, linear, body text, let's go on many tangents, and may our texts grow a lot more limbs!

How?

For this task I used this article as a reference: https://www.gwern.net/Sidenotes which contains a very useful overview and comparison of different implementations. I wanted to try and use only html and css. Sidenotes are cool, but not as indispensable that they would warrant adding some javascript to this website. Maybe the best known example is in Tufte-CSS, which is also where I first came across sidenotes. So I could just use it, but I wanted to try and implement it myself. I also like the stylesheet to be built from the ground up, with new elements added when needed.

Displaying the note

So basically we create a span with a class called "sidenote", which has the property display: none by default. The note will then be displayed in a footnote. With a media query, we give the sidenote class display: block when the screen is wide enough, and hide the footnote class with display: none. The note will then be displayed as a sidenote.

Counting the notes

In the body element we initiate a css counter called "notes". We also create a class called "sidenote-sup" for the <a> element that will be our note identifier. In the pseudo-element .sidenote-sup::before, we increment the notes counter and add its content to the element. We also add the counter's content to .sidenote::before. The note identifier and sidenote should now have automatic numbering.

.sidenote-sup::before{
    counter-increment:notes;
    content: counter(notes);
    vertical-align: super;
    font-size: small;
}

.sidenote {
display: none;
}

.sidenote::before {
content:counter(notes)" ";
}

In practice

When I want to create a note, I add an <a> element with the class "sidenote-sup" and an id like "fnref3" (footnote reference 3) and href to the corresponding footnote id ("fn3" for example). Directly after it comes the sidenote itself, inside a <span> element with the "sidenote" class. I copy the content of this span to the footnotes with an <a> element that links back to #fnref3, for example. This is still very manual, and requires to have the note living in two places. In the future I think this process could be automated by a custom static site generator, which is a rabbit hole I haven't jumped in (yet). The solution I implemented is simple, and there are probably a million better ways to do this, but it works for my purpose, and I learned things along the way, notably how to use css counters. This is how it looks for sidenote 3:

In the future I would like to work on making the note identifier more mobile friendly. It's currently a bit hard to click on the superscript. I think I pushed the "html/css only" far enough for my understanding, and any more complicated feature would probably be written more easily with some javascript.