Sidenotes
Papicu supports footnotes out of the box thanks to Jekyll and kramdown. But some people (sidenote: Like me.) , if given the chance to choose between footnotes and sidenotes, would much prefer the latter. And that’s why Papicu supports them.
Our sidenotes were heavily inspired by the code published by Koos Looijesteijn (sidenote: Check out his blog post Making semantic sidenotes without JavaScript.) .
Usage
Insert a sidenote with the following line anywhere in your Markdown content (sidenote: Example content.) :
... anywhere in your Markdown content {% include sidenote.html label="example" content="Example content." %}
Testing sidenotes in different contexts
Here are sidenotes applied to some “less conventional” elements:
- First, a sidenote inside a list (sidenote: Hey!)
Second, a sidenote inside a
<blockquote>tag (sidenote: Use either raw HTML or Markdown syntax inside sidenotes. Both work.) .
Third, a few sidenotes inside a set of <details> and <summary> tags (sidenote: Ahoy!)
A sidenote goes here (sidenote: Sidenotes everywhere.) .
Another one here (sidenote: Almost there.) .
- And now the very last one
- A sidenote inside a list inside a
<blockquote>inside a<details>(sidenote: Almost there yet.)
Known issues
A couple of caveats when using sidenotes within Papicu:
Footnotes and sidenotes are numbered independently. To avoid confusion, pick your preferred annotation method and stick to it
Each sidenote must receive a different
label. If any two sidenotes have the samelabel, only the first one will be togglable on narrow screensSeveral edge cases have not been properly handled. For instance, multiple sidenotes in a short paragraph may result in some ugly overlapping
The look ‘n’ feel of our sidenotes is suboptimal on “browser readers”, like Firefox Reader View and Safari Reader (a). That’s because they overwrite all CSS of a page. There isn’t much we can do on this case because our sidenotes are intentionally based on CSS only
March 2022
