Making Footnotes More Accessible With Littlefoot

You all know how footnotes work here, right? A little superscript number at the end of a sentence, and a list of numbers at the very bottom of the article, usually little remarks or extra details that are useful but not worth interrupting the flow of the article as a whole (or references). There’s just one problem: the notes aren’t anywhere near their associated text, meaning if you do want to read them, you might need to do some bouncing back-and-forth to understand everything. Well, no more!

I first saw this being used on mango.pdf.zone,¹ where you can occasionally see a little ellipsis mark at the end of a sentence, and if you click (or tap) on it, it’ll bring out a little pop-up bubble with some extra text. Well that’s neat. But then, my friend pointed out to me, and said “look, I really like the way footnotes are handled here, the elements of design here make it easier to read on mobile too.”

Littlefoot

Footnotes without the footprint.

Littlefoot(.js), a fork of Bigfoot, is a tiny little thing that replaces end-of-article (aka, footer) notes, with little clickable buttons that display content in a popover dialog right next to the relevant context. It’s even response enough to handle mobile devices with ease, in my testing.

Littlefoot more or less expects MultiMarkdown markup, which looks like this for the link to the footnote (that little number):

<p>
  <sup id="fnref:1">
    <a href="#fn:1">1</a>
  </sup>
</p>

and this for the actual footnote text:

<div class="footnotes">
  <ol>
    <li class="footnote" id="fn:1">
      <p>footnote. <a href="#fnref:1" title="return to article"> ↩</a></p>
      <p></p>
    </li>
  </ol>
</div>

if you have this in place, all you need to do is require it in and call littlefoot().

Now since they do have the option for CDN-hosted, meaning you just have an external script include, I decided to do that, with one small modification.

Installing

CDN-hosted Littlefoot is a three-ingredient recipe:

1. Littlefoot CSS
2. Littlefoot library
3. littlefoot.littlefoot()

The library I can just add to my JS includes in the Hugo config, the actual littlefoot() call I can modify in the base template… but that CSS though. Yes, I do have a CSS includes section in this theme, same as JS, and I can have remote includes in each, no problem. The problem is that the shipped CSS here just looks a little too light when compared to the background, and I don’t think it stands out enough. The solution to this one, simply, is that I just downloaded it into my static files, and modified the color options in CSS.

Results

I’ve gone ahead and updated a few articles where the placement of footnotes could be a little bit better, but as of this one going up, Littlefoot on here is live. Tell me what you think, I like it a lot.