Looking for a way to implement footnotes in HTML, Thomas Steiner experimented with using the <ruby> element.
The MDN docs describe the ruby element as follows.
“The HTML
<ruby>element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.”Hmm 🤔, this sounds like it could fit the footnotes use case.
The markup looks like this:
<ruby tabindex="0">some term<rt>content for the footnote</rt></ruby>Using CSS Counters number indicators are injected, and using :target the footnotes are shown.
Not sure if this is how <ruby> should be used, but it’s quite a nice solution. Let’s hope this will open up the discussion again to adding elements to allow native footnotes in HTML.