wooorm
commented
6 months ago Hey!
Title doesn’t work with touch devices and can’t contain HTML. AFAIK all accessibility guidelines really strongly recommend against using it for such important content. I’m not sure this is a good idea.
This micromark project here deals with parsing footnotes.
It has a simple HTML compilation part too, but that’s only if you use micromark directly.
With unified/remark/rehype, we use ASTs. There’s an entire ecosystem where you can do whatever you want with ASTs.
Markdown footnote constructs are turned into HTML elements ion remark-rehype.
Please take 10 minutes to read over the readme there: https://github.com/remarkjs/remark-rehype. There are many options to affect the generated HTML.
After that plugin, you can (in the rehype ecosystem, working on hast ASTs), transform the HTML to your heart’s desire.
What I personally would recommend if you want to improve the footnote experience for readers, is to use client side javascript to look for all a[data-footnote-ref], and then for each anchor replace it with a sort of <details> element containing the corresponding footnote definition, that people can click/tap on to expand.
remarcable
Initial checklist
Problem
The UX of using footnotes is often distracting – you click on a link that takes you to the bottom of the page, and then you click the "back" character to get back. Often, I'm losing the place where I originally left off.
Solution
It would be great to be able to hover the footnote and have an overlay show the contents of the footnote. E.g. like this:
Here, I manually changed the HTML of the
<a>tag to have atitleattribute with the contents of the footnote.Alternatives
I think adding footnotes as titles would be sensible, as it is very unobtrusive. Only users looking for this will actually be impacted, adding lots of Capital-D Delight to the footnotes.
(I'm not exactly sure if this is the right package to add this as an issue. I'm using remark with the
remark-gfmplugin that seems to be using this package.)