rendering footnotes as sidenotes ¹

I want to write markdown text with footnotes and have it display as a sidenote ².

The markdown for this looks like:

I want to write markdown text with footnotes and have it display as a sidenote [^2].

[^2]: Like this :)

The way this is currently done is inelegant, but it works. I made it more difficult for myself by:

1. Wanting to write the sidenotes as markdown footnotes, in pure markdown, in a way that other markdown viewers/editors would respect.
2. Being lazy.

I looked at a bunch of blog posts on the topic ³ until I found a really helpful post on gwern.net ⁴ that compares most of the currently-documented methods. It’s quite easy to get it to work if you’re working in html, just use a different tag for the sidenotes, or name them differently, and style it. But I have been trying to write all the content for this site in Markdown, it’s like the main lure of using GitHub Pages, so those options didn’t really work for me.

I liked the idea of using <aside> tags, suggested elsewhere, but that would mean converting the <li> footnotes to <aside> tags, finding the fnref in the text, and inserting the <aside>-tagged footnote content alongside it, which isn’t impossible but was more work than I was hoping to do.

Thankfully though someone else had already done this! With jQuery ⁵! So for now I’m using that. It uses quite an old version of jQuery, though it could be updated to use a newer version quite easily I think ⁶. But it works, and it’s not like this site needs to do anything other than satisfy me. Maybe I’ll update it later.

With the footnotes tagged as <aside>s, it’s easy to style them very basically so they look like sidenotes ⁷ like this:

aside {
    float: right;
    clear: right;
    width: 20%;
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: 0.8rem;
    line-height: 1.2;
    vertical-align: baseline;
    position: relative;
    display: inline-flex;
}

:not(aside) > p {
  width: 79%;
}

<aside>s float to the right, and take up 20% of the screen, non-aside text floats left and takes up 80% of the screen. I don’t think this is very elegant, but it does okay on responsiveness up to a point.

To-do:

• Hide sidenotes and show footnotes on really small screens (mobile)
  • Done! Sidenotes are hidden on mobile using a builtin jQuery.sidenotes function, and text width is updated.
  • Could still do with adding more flexible text width handling.
• Check it for accessibility, I’m not sure how screen readers handle this
• Either update jQuery.sidenotes to use a newer version of jQuery, or find a way to do this without jQuery

Sidenotes are cool ⁸.

1. created: 27/05/24, updated: 04/06/24 ↩

2. Like this :) ↩

3. Styled <small> tags, Tufte CSS, sidenotes.js ↩

4. gwern.net/sidenotes ↩

5. jQuery.sidenotes by Andrew Clark ↩

6. Not to mention the fact that using jQuery in 2024 feels a bit sacrilegious. ↩

7. I’m really not a frontend girlie please be kind. ↩

8. I had fun doing this :) ↩