Sidenotes

I have always been interested in margin notes, ever since I was a young child reading the annotated edition of Dracula. Ever since then, I’ve searched for books where the pages are filled with little extras and bonuses, though usually they are footnotes or endnotes, which are not quite as delightful to read as the beloved side note. Gwern’s site uses side notes quite extensively, and I’ve been a fan for many years. Another site that I spent a long time perusing through was the annotated Ada which is a work in progress for annotating Vladimir Nabokov’s Ada or Ardor: A Family Chronicle, which was one of my favorite books also as a young child.

However, Ada Online uses frames for the annotation, and I thought it could be fun to work on implementing margin notes on this website instead. Of course, they have to be responsive, not collide with each other unduly, and be legible with the graphics. Hm, what to do!

There is a lot of writing on the internet about sidenote implementation, and I ended up reading various pages about what to do. I enjoyed reading this guide on how to prevent the sidenotes from colliding and used the basic setup from Koos Looijesteijn’s site but I used <aside> for my sidenote element, since it plays well with Hugo’s un-sanitized HTML compilation setting.

I think as long as I keep a lot of text along with the sidenotes they shouldn’t collide with each other. Right now I’ve done it so that they physically can’t collide with each other at the price of perhaps the sidenotes becoming a bit untethered from the paragraphs they are supposed to be in if I have too many super long sidenotes in a row. But that can be solved by writing slightly shorter sidenotes and writing slightly longer texts in between them! Really, I should be writing most of my stuff here in the main body of the post, and let the side notes be something funny to glance over at.

Sidenotes will also be responsive to page width (I’m sorry to mobile-only viewers because they look pretty boring on narrow screens) and appear inline when the page gets too small to view them. I do hope the text size is suitable for viewing and isn’t too annoyingly tiny; I wanted to de-emphasize the text, but… if I de-emphasize it too much, then it will be difficult for people to read. I have a preference for small text and zoom my pages out, but this is certainly not a shared preference for the rest of the world. For this reason, I’m not the best judge for text sizes. Please let me know!

When implementing the sidenotes, it’s actually pretty simple to do in Hugo. First, in your hugo.toml settings file, you have to make sure that Hugo’s Markdown parser will allow you to have HTML in it, which used to be turned on by default in the version I’m used to, but at some point, it was updated into something you have to opt in to:

1[markup]
2	[markup.goldmark]
3		[markup.goldmark.renderer]
4			unsafe = true

It’s “unsafe”, but just be thoughtful about how you use your website and it will be fine.

Ok, and now you can just write in your markdown file like this:

1Here's some text that I'm writing in Markdown. Notice that it isn't wrapped in any HTML elements and I can use regular Markdown formatting to make my life *easier*.
2
3<aside>And here is some text that I want to format as a side note</aside>

When you render your page, it will look like nothing happened. That’s because you need to style the side note in CSS!

 1aside {
 2  display: block;
 3  position: relative;
 4  float: right;
 5  width: calc(50vw - (720px / 2) - 8ch);
 6  left: -4ch;
 7  top: calc((-2rem * 1.6) + 1ch);
 8  clear: right;
 9  margin-bottom: 1em;
10  margin-right: calc(-50vw + (720px / 2));
11  padding: 1ch 1ch;
12}
13
14aside:nth-of-type(even) {
15  float: left;
16  left: unset;
17  right: -4ch;
18  margin-left: calc(-50vw + (720px / 2));
19  clear: left;
20}

I’m setting the width here to be responsive to page width but never collide with the main text area (which is 720px wide at most) and then have some padding around it. The most important part to making sure that the notes don’t collide with each other is the clear:right and clear:left properties for the floating objects. If you want all your margin notes on one side you can get rid of the aside:nth-of-type(even) block and just set clear: to whichever side you’re floating to, or even just both to be extra safe.

I then did some extra stuff with colors and borders and z-indices, but that’s not necessary at all. You can also play with the positioning as much as you want.

But how can I make it responsive? That’s pretty simple too, I just use the @media rule to get rid of all the floating and then I style it sort of like a blockquote.

 1@media (max-width: 1100px) {
 2  aside, aside:nth-of-type(even) {
 3    position: relative;
 4    float: none;
 5    width: unset;
 6    margin-top: 0;
 7    top: unset;
 8    right: unset;
 9    left: unset;
10    padding: 0;
11    background: unset;
12    padding-left: 2ch;
13    margin-right: 0;
14    margin-left: 0;
15    margin-bottom: 0;
16    border-left: 1px dashed var(--accent-color);
17    border-right: unset;
18
19  }
20}

Please implement sidenotes onto your website and tell me about it. If there was any trouble with implementing them also please tell me so I can revise things to be more understandable!

My next blog post will hopefully also have some marginalia in it.