Terence Eden poked around with a way to do footnotes using the <details>/<summary> elements. I think it’s kind of clever. Rather than a hyperlink that jumps down to explain the footnote elsewhere, the details are right there next to the text. I like that proximity in the code. Plus, you get the native open/close interactivity of the disclosure widget.
It’s got some tricky parts though. The <details> element is block-level, so it needs to become inline to be the footnote, and sized/positioned to look “right.” I think it’s a shame that it won’t sit within a <p> tag, so that makes it impractical for my own usage.
Craig Shoemaker in the comments forked the original to fiddle with the CSS, and that inspired me to do the same.
Rather than display the footnote text itself right inline (which is extra-tricky), I moved that content to a fixed-position location at the bottom of the page:
I’m not 100% convinced it’s a good idea, but I’m also not convinced it’s a terrible one.
Most noticeable downside: the details can block the summary preventing you from closing them again. :P
Not sure it’s ready for primetime yet but def worth exploring!
The third footnote covers (on my mobile) the ‘button’ necessary to hide it again!
great idea! You might want to close all other details once one detail is opened (using some js):
document.querySelectorAll("details").forEach((targetDetail, i, allDetails) => {targetDetail.onclick = () => {
[...allDetails]
.filter(detail => detail !== targetDetail)
.forEach(detail => detail.removeAttribute("open"));
}
});
I think the inline version works a lot better than the forked version here. The separate box version has a few issues:
clicking outside the summary doesn’t close it (either good or bad depending)
no close option on the box itself (bad)
opening other summaries doesn’t close the one that’s already open so they just cover each other (or are hidden behind already opened boxes) (bad)
The Journal Le Monde Diplo wrote an (unrelated) article with a very interesting footnote system : As you scroll, a feet section will update a list of only the footnotes whose relates to on-screen (viewport) references in the article body.
See there : https://www.monde-diplomatique.fr/2020/02/SIZAIRE/61344
Isn’t the whole point of footnotes being at the very bottom of the page? If the content that is to be placed into footnotes is crucial for understanding, it would better be located in the main text.
Instead of remixing basic concepts i’d suggest sticking to proper content design here. Both Footnote and Details have unambiguous use cases and shine in their pure semantic beauty :)
Yeah, at the bottom of a “page”. Web could use some foot”viewport”notes… :)