Footnotes: No Fun to Create, Either

Tyler Sticka notes in Footnote Trouble that while footnotes work reasonably well in print, the Web is not print and what works in print doesn’t necessarily work on the Web. He finds it hard to read footnotes online, since they’re generally implemented with a link that takes you to the footnote, where if you’re lucky the webmaster thought to provide a link (generally marked with ↩) that will take you back to where you had been on the page.

This is probably less than optimal because it’s a context switch. The footnote isn’t anywhere near the text referencing it, so in practice it’s more like an endnote. Who reads endnotes? I only sometimes do so in print, because navigating back an forth through a physical book can be a pain in the ass. This is especially the case if the book is secondhand at best, heavily used, and in dire need of a new binding.

I’ll be honest with you: implementing footnotes in HTML isn’t my idea of a good time, either.

What’s the alternative, then? Gwern Branwen has sidenotes, which use CSS and MIT-licensed JavaScript to emulate sidenotes in Edward Tufte’s handouts. It certainly lends itself to a distinctive aesthetic, but while it looks nice I’ve always found it a bit janky in practice. Also, I am committed to not using JavaScript on this website.

Moreover, why does a website need to emulate print? If I want to go off on a tangent, or provide additional information that isn’t necessarily of interest to all readers, why make people jump around the page? The details and summary elements let me hide tangents inline and mark them accordingly. I can use aside to indicate that the text within is tangential to the main text. I can then use CSS rules like the following to style a tangent, like so:

details[open] > summary {
    padding-bottom: 1rem;
}

details[open] > summary, details > aside {
  border-bottom: 2px solid #16161D;
}

summary.tangent::before {
  content: "tangent: ";
}

I suppose I should provide an example of markup for a tangent as well, for visitors using smartphones and tablets who don’t have access to the "view source" function that desktop browsers still provide. Please refer to the following example.

<details>
    <summary class="tangent">sample tangent</summary>
    <aside>
        <p>
            You can put anything you want inside this <code>aside</code> element.
            Including a cat.
        </p>
        __FIG_JPG([smudge], 360, 480, [a photo of a long-haired brown tabby cat with white patches sitting in a ratty armchair looking thoroughly miffed], [Smudge about to be a querulous coeurl because of the camera])
    </aside>
</details>

Here is how the markup, CSS, and m4 macro shown above will look.

I don’t know if Tyler Sticka would find this an improvement, but since his post ended with the following I suspect it’s a step in a better direction.

Of course, I’m not going to go through all of my old posts where I had used footnotes and replace them with tangents right away. It might be worthwhile to do it eventually, though.