I got auto-Unicode & linking footnotes¹ working!

In notes like this post, I can type "^1" (like after the word "footnotes" above) and the code on my server automatically:
* turns it into a Unicode superscript '¹'
* links it to the expansion at the end of my post
Similarly, I can type "^1" at the start of an expansion line (e.g. at the end of a post) and that code automatically:
* turns it into a Unicode superscript '¹'
* links it back to the inline reference

Since that code is part of my site’s CASSIS auto_link function², all previous posts with such "^n" style footnotes have also been updated, like my day 6 post³ and since.

Clicking an inline footnote reference scrolls to the line with the footnote expansion. Clicking the Unicode superscript number at the start of that expansion scrolls back to the inline footnote reference.

I decided to postpone adding the small return arrows '⮐' at the end of a footnote expansions. Linking the superscript numbers to each other works well, and seemed sufficiently discoverable without being distracting.

By using post-specific unique prefixes for the footnote reference & expansion links, those links also work even in the presence of more than one post with footnotes, e.g. on my home page⁴. They’re also in my Atom feed entries. I’m curious how the footnotes links in a post work in other contexts, like when viewing in a reader.

I also discovered that Unicode superscripts were inconsistent on some platforms, and added a bit of CSS to set an explicit font-family for footnotes numbers:

/* CSS style rule to use a specific font for footnote refs and expansions */
a[id*='_ref-'],a[id*='_note-'] { font-family:"Arial Unicode MS",system-ui; }
/* end of style rule */

I added this and some other tips to the #IndieWeb footnote page⁵.


This is day 30 of #100DaysOfIndieWeb #100Days

← Day 29: https://tantek.com/2023/037/t1/post-glossary
→ 🔮


¹ https://tantek.com/2023/036/t1/footnotes-unicode-hyperlink
² https://tantek.com/cassis.js
³ https://tantek.com/2023/006/t1/forward-in-time-links
⁴ https://tantek.com/
⁵ https://indieweb.org/footnote