Footnotes
Implementing this assumes basic JS skills.
Sygnal's team has implemented a number of different footnote solutions, but we've not found a single solution that works for everyone.
Each client’s implementation requirements are different. Some want the footnotes as a scroll-to section. Some want a sidebar. Some want a tooltip or a popup. The indicators can be styled differently too.
But a basic footnotes feature is straightforward to build if you are familiar with basic JS.
The best approach I’ve found is to have two separate rich text fields in the CMS- one for the article content, one for the footnotes.
In both, I use the notation [n] to indicate footnotes, with n as any positive integer.
The script parses the blog content [n]'s into footnote indicators that you like, I often keep the brackets and the number, and link and superscript them. These are linked to #footnote-n.
It also parses the footnote content [n]'s similarly, usually presenting them as a bolded numeric indicator prefacing the footnote, which has the id footnote-n.
That’s the whole setup.
This lets you add as many footnotes as you want, and to repeat references like [36]. Using numbers also has the advantage that if JS is disabled in the browser, the user can still read and locate the correct footnote.
Note that it won’t warn you if you’ve created a footnote references that doesn’t exist, or about orphaned footnotes. Also the editing experience isn’t ideal since they’re completely separate.
But this is the simplest implementation.
There are a LOT of variations to this, but we generally recommend keeping it simple if you can.
https://discourse.webflow.com/t/interactive-footnotes-in-cms-blog-posts/257818/2
These are not Webflow-specific tools, but might be adaptable with some additional work to work well with Webflow.
https://littlefoot.js.org/
https://github.com/lemonmade/bigfoot
Technical Notes
<p>This is some text.<aside><sup>1</sup> This is a footnote.</aside></p>
<p>This is some text.<details><summary><sup>1</sup></summary>This is a footnote.</details></p>
This is some text.<sup><a href="#note1">1</a></sup>
<p>This is some text.<sup><a href="#fn1">1</a></sup></p>
<details id="fn1">
<summary>Footnote 1</summary>
This is the content of the footnote.
</details>
...
<ol>
<li id="note1"><a href="#ref1">^</a> This is a footnote.</li>
</ol>
A11y concerns
<p aria-describedby="footnote1">This is some text.<sup id="ref1"><a href="#note1">1</a></sup></p>
...
<div id="footnote1">This is a footnote.</div>
https://codepen.io/goblindegook/pen/oPNzGE?editors=1010
