These days, I try to remove tangents from my writing, publishing any good tangents as microblog content instead.
I'm also considering unhyperlinked footnotes, and letting the reader scroll to the bottom if they want, the low-tech way. It's less distracting that way, and there's no accessibility issues either.
On my personal site, if there's enough room, I show the footnotes to the side of the page, with their top roughly aligned with their position in the text. There's still links, and hovering over the superscript indicator adds a slight background to the corresponding sidebar element. This seems to work well,on desktop. They still follow all the traditional conventions you'd expect, with anchors and return links, so if you can't use the sidebar, it's not an utterly useless experience either
I've been thinking about adding popups, koreader style, for mobile, but haven't yet. Partially because I haven't figured out some of the deeper UX concerns, but mostly because I'm lazy
Anyway, here's an article with a decent amount of footnotes (side notes?):
Sadly not quite yet. With CSS Anchor positioning, something like this is possible, but cross-browser support isn't really there yet. Firefox, and current versions of Safari, don't support it, but they're tracking it, so maybe soon
But the actual Javascript isn't all that complex. It basically just checks that the site satisfies a min-width media query, then calculates the top position of the superscript links, and sets a css custom property to store that value. The CSS then uses a mix of media queries, js-controlled data- properties, and absolute positioning to move the body of the footnotes out of the footer and into the sidebar. If JS doesn't load, then nothing happens, and they remain at the bottom of the site.
I'm a big fan of sidenotes as a solution for this. If you're on desktop they'll pop out to the side and it's easy enough to glance over at them or stay focused on the main text without having to navigate around. On mobile that obviously doesn't work, but instead you can just have them open inline, so you don't have to deal with the annoying anchor link jump behavior and remembering where you were. And it's all doable with CSS and float, no Javascript!
Here's an example with a fair number of sidenotes:
It's ok, but you're still being taken out of the flow. Especially as the notes appear arbitrarily on the left or right. And yeah, you have to find your place again afterwards. It's way better than scrolling solutions though.
That particular example on mobile falls back to a revealing pattern, which is pretty good.
It still has the problem where it's just a test of your curiosity. You don't really know what the supplementary content covers until you expand it. The link text is just a superscript number which is kinda useless.
This is why I prefer the solutions in the article where the supplementary content has a heading that hints at the content.
The entire point of footnotes is that they have been moved out of the main text because their presence would negatively impact the flow. If most readers are expected to want to read them then they should just be part of the text and probably not even in parentheses.
Right, but it should be easy for the reader to decide whether to divert to the additional content. A superscript number tells you nothing about the additional content. Whereas on the web, link text or a details summary can help you make a decision.
Lila any good solution design, we should start with the problem, but the author skips right over that part:
> [The superscript number] indicates to you that I, the writer, have something more to say on this topic.
Not really, though? Notes range from citations to parentheticals. “Having more to say” would be included in the main text I’d think. The point of notes is that you don’t “have more to say” on the main topic, but you have this other information that some readers might find useful.
I do agree that there is no need to get hung up on solutions used in print (footnotes and endnotes) for online material.
> If you did make your way down to the footnotes, I hope you appreciated that I set the text size to be a little smaller than the 'ideal' size that I chose for the main body content, making them harder to read, such is the tradition within the footnote community.
Your "ideal" body text size (an line spacing) is way too large anyway. Even the footnotes are still well above ideal size.
Interestingly enough, I think the physical Kindle does this too. I haven't read a book with footnotes in ages on it, preferring the larger screen of my onyx box device for technical writing, but I have distinct memories of footnotes sharing the same interface as the definitions lookup features
I have to question the premise here: is reading footnotes really that hard? I can't recall ever struggling to find where I was in the text after "returning" from a footnote.
I've always enjoyed the to-me graceful experience of coupling each link to a footnote with a return anchor, so that you get the (to olds like me) familiar experience of footnotes without the pain of navigating to the bottom and then forgetting where you came from. My memory is that Daring Fireball, among many other sites, does this. (I just checked, and it does. Here's the most recent article that uses a footnote: https://daringfireball.net/2025/06/apple_app_store_policy_up.... Here's the reference to the footnote: https://daringfireball.net/2025/06/apple_app_store_policy_up.... And here's the footnote itself: https://daringfireball.net/2025/06/apple_app_store_policy_up.... This does require some special handling if you refer to the same footnote multiple times, but, if you really need to do that, the solution could be as simple as having the second reference be to a new footnote that immediately refers to the old one.)
You are right, thanks. Ironically, I didn't realize that because I only read the text:
> If the footnote markers are links, then the user can use the back button/gesture to return to the main content. But, even though this restores the previous scroll position, the user is still left with the challenge of finding their previous place in a wall of text^6.
and didn't read footnote 6, which mentions the technique I'm describing. But I still don't seem to see the UX issues, other than the mention of a teeny-weeny hit target, which I admit is perfectly legitimate. But I am an academic, so it is probably no surprise that imitating academia appeals to me.
The other issue is the poor link text (a superscript number) which gives no clue as to the content at the other end of the link. Like I said, it just becomes a test of your curiosity. Whereas the other examples have headings relevant to the content.
i prefer them laid flat out too - grinds my gears when there is a wall of text, then trying to use the browsers built-in-search to find a text i remember but cannot find due to some hover/click-element that only displays text sometimes. though - i do not mind a list of sources at the bottom nor embedded within a bracket or w/e - there are many standards
(i guess what is worse are pages which re-invent the wheel and re-implement text-searching, like [gitlab i think], where the browser search is broken as its only displaying a sub-section of text at any given moment and browser search fails unless you scroll a page down and find again)
Ugh, this has become a huge issue with text editing controls. More and more, I find that content gets unloaded once it’s out of the editor’s viewport, making the browser’s built-in search fail.
Leaving aside the author's unsubstantial introductory diatribe, he does not properly evaluate the "popover" footnote implementation, which is the clear solution, nor does he compare it with his three alternatives.
Regarding the popover:
> We could try to solve that problem by dynamically pulling the content from the footnotes and displaying it in a popover. In some browsers (including yours) that will display like a tooltip, pointing directly back to the footnote marker. Thanks to modern web features, this can be done entirely without JavaScript.
> But this is still shit! I see good, smart people, who'd always avoid using "click here" as link text, littering their articles with link texts such as 1, 7, and sometimes even 12. Not only is this as contextless as "click here", it also provides the extra frustration of a tiny-weeny hit target.
The claim that footnotes are "contextless" is not sound. One cannot attribute the "contextlessness" of "click here" hyperlinks to footnotes because footnotes and hyperlinks fundamentally differ: footnotes are simply placeholders for additional text and do not call the user to action.
Perhaps the author meant that a footnotes's form, i.e. a number or symbol, doesn't provide context for the note itself. While this claim is sound, it is irrelevant because a footnote link shouldn't need context; the sentence provides it.
While the claim about a "tiny-weeny hit target" is sound, the author fails to consider alternatives. Increasing font size or wrapping the link in brackets would help the problem.
Regarding popovers vs. the three proposed alternatives: i) parentheses; ii) `note`; and iii) `<details>`:
1) All three options are more distracting because they occupy more space. And (ii) and (iii) add color. And I'd guess that readers are more likely to unintentionally skim (ii) or open (iii) because they're primed by other websites. All these modes of distraction run contrary to the purpose of the footnote. In fact, a footnote occupies the minimum space possible.
2) Option (ii) adds lots of unseemly vertical space to the webpage.
3) Option (iii) moves the webpage text below the note up and down. This interferes more with the reading experience than does the static popover.
4) Options (ii) and (iii) are not portable over copy paste. If you copy a webpage with these elements into another file, you'll have to manually rearrange them to appear as actual footnotes.
5) All options, as implemented by the author, eliminate the key-value nature of footnotes. One cannot refer to a particular parenthetical, `note`, or `<details>` because they aren't numbered. While (ii) and (iii) could be numbered with no problem, numbered parentheticals start to look weird.
6) All three options give footnotes more visual presence than they should have. Particularly (ii) will make the footnote seem like the most important quote of the article. Footnotes should be out of eyesight most of the time, just like feet.
> Perhaps the author meant that a footnotes's form, i.e. a number or symbol, doesn't provide context for the note itself.
Yes. I was referring to the uselessness of the linking text being a superscript number, which is as bad, if not worse, than "click here".
> While this claim is sound, it is irrelevant because a footnote link shouldn't need context; the sentence provides it.
It doesn't. The sentence gives you information about the general topic, but not about the content of the footnote, and if it's worth visiting. Whereas the note & details examples have a heading that describes the topic of the supplementary content.
> 1) All three options are more distracting because they occupy more space. And (ii) and (iii) add color. And I'd guess that readers are more likely to unintentionally skim
Are they too distracting or too easy to ignore? Make your mind up!
> In fact, a footnote occupies the minimum space possible.
Using smaller text is a bug, not a feature.
> 2) Option (ii) adds lots of unseemly vertical space to the webpage.
Vertical space is cheap. And in the example it's hardly lots.
> 3) Option (iii) moves the webpage text below the note up and down. This interferes more with the reading experience than does the static popover.
It only moves it down, and then you can read the content in flow.
> 4) Options (ii) and (iii) are not portable over copy paste. If you copy a webpage with these elements into another file, you'll have to manually rearrange them to appear as actual footnotes.
That's a feature, not a bug. Content is in the correct order.
> 5) All options, as implemented by the author, eliminate the key-value nature of footnotes. One cannot refer to a particular parenthetical, `note`, or `<details>` because they aren't numbered.
For footnotes/sidenotes/endnotes, I think about a few implementations:
- Dorian's expandable parentheticals (click on the gray phrases): https://doriantaylor.com/person/dorian-taylor#me
- Gwern's list of sidenote implementations: https://gwern.net/sidenote
- The ellipsis -> bottom modal pattern, found on buttondown articles like this one: https://buttondown.com/hillelwayne/archive/you-can-cheat-a-t...
These days, I try to remove tangents from my writing, publishing any good tangents as microblog content instead.
I'm also considering unhyperlinked footnotes, and letting the reader scroll to the bottom if they want, the low-tech way. It's less distracting that way, and there's no accessibility issues either.
There are absolutely accessibility issues https://adrianroselli.com/2022/09/brief-note-on-super-and-su...
On my personal site, if there's enough room, I show the footnotes to the side of the page, with their top roughly aligned with their position in the text. There's still links, and hovering over the superscript indicator adds a slight background to the corresponding sidebar element. This seems to work well,on desktop. They still follow all the traditional conventions you'd expect, with anchors and return links, so if you can't use the sidebar, it's not an utterly useless experience either
I've been thinking about adding popups, koreader style, for mobile, but haven't yet. Partially because I haven't figured out some of the deeper UX concerns, but mostly because I'm lazy
Anyway, here's an article with a decent amount of footnotes (side notes?):
https://pdx.su/blog/2024-08-10-diy-permanent-xmas-lights/
Oh, those look nice... how did you pull that off? Pure CSS?
Sadly not quite yet. With CSS Anchor positioning, something like this is possible, but cross-browser support isn't really there yet. Firefox, and current versions of Safari, don't support it, but they're tracking it, so maybe soon
But the actual Javascript isn't all that complex. It basically just checks that the site satisfies a min-width media query, then calculates the top position of the superscript links, and sets a css custom property to store that value. The CSS then uses a mix of media queries, js-controlled data- properties, and absolute positioning to move the body of the footnotes out of the footer and into the sidebar. If JS doesn't load, then nothing happens, and they remain at the bottom of the site.
The JS involved is at https://github.com/paradox460/pdx.su/blob/main/assets/js/sid...
The CSS that affects them is https://github.com/paradox460/pdx.su/blob/main/assets/css/ge... (there's also a small query that makes the parent paragraph of a superscript flash when you return to it, using has queries)
I'm a big fan of sidenotes as a solution for this. If you're on desktop they'll pop out to the side and it's easy enough to glance over at them or stay focused on the main text without having to navigate around. On mobile that obviously doesn't work, but instead you can just have them open inline, so you don't have to deal with the annoying anchor link jump behavior and remembering where you were. And it's all doable with CSS and float, no Javascript!
Here's an example with a fair number of sidenotes:
https://blog.alexbeals.com/posts/possession
It's ok, but you're still being taken out of the flow. Especially as the notes appear arbitrarily on the left or right. And yeah, you have to find your place again afterwards. It's way better than scrolling solutions though.
That particular example on mobile falls back to a revealing pattern, which is pretty good.
It still has the problem where it's just a test of your curiosity. You don't really know what the supplementary content covers until you expand it. The link text is just a superscript number which is kinda useless.
This is why I prefer the solutions in the article where the supplementary content has a heading that hints at the content.
The entire point of footnotes is that they have been moved out of the main text because their presence would negatively impact the flow. If most readers are expected to want to read them then they should just be part of the text and probably not even in parentheses.
Right, but it should be easy for the reader to decide whether to divert to the additional content. A superscript number tells you nothing about the additional content. Whereas on the web, link text or a details summary can help you make a decision.
Instead of using numbers, what about having a line from the text to the sidenote?
Lila any good solution design, we should start with the problem, but the author skips right over that part:
> [The superscript number] indicates to you that I, the writer, have something more to say on this topic.
Not really, though? Notes range from citations to parentheticals. “Having more to say” would be included in the main text I’d think. The point of notes is that you don’t “have more to say” on the main topic, but you have this other information that some readers might find useful.
I do agree that there is no need to get hung up on solutions used in print (footnotes and endnotes) for online material.
> If you did make your way down to the footnotes, I hope you appreciated that I set the text size to be a little smaller than the 'ideal' size that I chose for the main body content, making them harder to read, such is the tradition within the footnote community.
Your "ideal" body text size (an line spacing) is way too large anyway. Even the footnotes are still well above ideal size.
> I see good, smart people, who'd always avoid using "click here" as link text
Links to: https://www.w3.org/QA/Tips/noClickHere
> contributed Sep 2001 by Aaron Swartz
RIP you're still remembered
Those aren't footnotes. Those are endnotes. Footnotes go at the bottom of the same page they're cited on.
I hate that every e-book format I've encountered seems to only do endnotes, too.
Koreader let's you pop em up in a floating dialog box when you tap the superscript for it
huh, nice! Much better than the endnotes I get out of the Kindle app and Apple Books. Sadly there's no iThing version, as that's what I use.
Interestingly enough, I think the physical Kindle does this too. I haven't read a book with footnotes in ages on it, preferring the larger screen of my onyx box device for technical writing, but I have distinct memories of footnotes sharing the same interface as the definitions lookup features
I have to question the premise here: is reading footnotes really that hard? I can't recall ever struggling to find where I was in the text after "returning" from a footnote.
I've always enjoyed the to-me graceful experience of coupling each link to a footnote with a return anchor, so that you get the (to olds like me) familiar experience of footnotes without the pain of navigating to the bottom and then forgetting where you came from. My memory is that Daring Fireball, among many other sites, does this. (I just checked, and it does. Here's the most recent article that uses a footnote: https://daringfireball.net/2025/06/apple_app_store_policy_up.... Here's the reference to the footnote: https://daringfireball.net/2025/06/apple_app_store_policy_up.... And here's the footnote itself: https://daringfireball.net/2025/06/apple_app_store_policy_up.... This does require some special handling if you refer to the same footnote multiple times, but, if you really need to do that, the solution could be as simple as having the second reference be to a new footnote that immediately refers to the old one.)
Fwiw this technique is covered in the article, with an example, and the UX issues are discussed.
The simpler solutions presented do not have these issues.
You are right, thanks. Ironically, I didn't realize that because I only read the text:
> If the footnote markers are links, then the user can use the back button/gesture to return to the main content. But, even though this restores the previous scroll position, the user is still left with the challenge of finding their previous place in a wall of text^6.
and didn't read footnote 6, which mentions the technique I'm describing. But I still don't seem to see the UX issues, other than the mention of a teeny-weeny hit target, which I admit is perfectly legitimate. But I am an academic, so it is probably no surprise that imitating academia appeals to me.
The other issue is the poor link text (a superscript number) which gives no clue as to the content at the other end of the link. Like I said, it just becomes a test of your curiosity. Whereas the other examples have headings relevant to the content.
i prefer them laid flat out too - grinds my gears when there is a wall of text, then trying to use the browsers built-in-search to find a text i remember but cannot find due to some hover/click-element that only displays text sometimes. though - i do not mind a list of sources at the bottom nor embedded within a bracket or w/e - there are many standards
(i guess what is worse are pages which re-invent the wheel and re-implement text-searching, like [gitlab i think], where the browser search is broken as its only displaying a sub-section of text at any given moment and browser search fails unless you scroll a page down and find again)
Ugh, this has become a huge issue with text editing controls. More and more, I find that content gets unloaded once it’s out of the editor’s viewport, making the browser’s built-in search fail.
xkcd standards; why use the standard search feature when you can build a new search feature per page per website ! new shiny, ooo weeee ooo
personally, i blame javascript
Leaving aside the author's unsubstantial introductory diatribe, he does not properly evaluate the "popover" footnote implementation, which is the clear solution, nor does he compare it with his three alternatives.
Regarding the popover:
> We could try to solve that problem by dynamically pulling the content from the footnotes and displaying it in a popover. In some browsers (including yours) that will display like a tooltip, pointing directly back to the footnote marker. Thanks to modern web features, this can be done entirely without JavaScript.
> But this is still shit! I see good, smart people, who'd always avoid using "click here" as link text, littering their articles with link texts such as 1, 7, and sometimes even 12. Not only is this as contextless as "click here", it also provides the extra frustration of a tiny-weeny hit target.
The claim that footnotes are "contextless" is not sound. One cannot attribute the "contextlessness" of "click here" hyperlinks to footnotes because footnotes and hyperlinks fundamentally differ: footnotes are simply placeholders for additional text and do not call the user to action.
Perhaps the author meant that a footnotes's form, i.e. a number or symbol, doesn't provide context for the note itself. While this claim is sound, it is irrelevant because a footnote link shouldn't need context; the sentence provides it.
While the claim about a "tiny-weeny hit target" is sound, the author fails to consider alternatives. Increasing font size or wrapping the link in brackets would help the problem.
Regarding popovers vs. the three proposed alternatives: i) parentheses; ii) `note`; and iii) `<details>`:
1) All three options are more distracting because they occupy more space. And (ii) and (iii) add color. And I'd guess that readers are more likely to unintentionally skim (ii) or open (iii) because they're primed by other websites. All these modes of distraction run contrary to the purpose of the footnote. In fact, a footnote occupies the minimum space possible.
2) Option (ii) adds lots of unseemly vertical space to the webpage.
3) Option (iii) moves the webpage text below the note up and down. This interferes more with the reading experience than does the static popover.
4) Options (ii) and (iii) are not portable over copy paste. If you copy a webpage with these elements into another file, you'll have to manually rearrange them to appear as actual footnotes.
5) All options, as implemented by the author, eliminate the key-value nature of footnotes. One cannot refer to a particular parenthetical, `note`, or `<details>` because they aren't numbered. While (ii) and (iii) could be numbered with no problem, numbered parentheticals start to look weird.
6) All three options give footnotes more visual presence than they should have. Particularly (ii) will make the footnote seem like the most important quote of the article. Footnotes should be out of eyesight most of the time, just like feet.
> Perhaps the author meant that a footnotes's form, i.e. a number or symbol, doesn't provide context for the note itself.
Yes. I was referring to the uselessness of the linking text being a superscript number, which is as bad, if not worse, than "click here".
> While this claim is sound, it is irrelevant because a footnote link shouldn't need context; the sentence provides it.
It doesn't. The sentence gives you information about the general topic, but not about the content of the footnote, and if it's worth visiting. Whereas the note & details examples have a heading that describes the topic of the supplementary content.
> 1) All three options are more distracting because they occupy more space. And (ii) and (iii) add color. And I'd guess that readers are more likely to unintentionally skim
Are they too distracting or too easy to ignore? Make your mind up!
> In fact, a footnote occupies the minimum space possible.
Using smaller text is a bug, not a feature.
> 2) Option (ii) adds lots of unseemly vertical space to the webpage.
Vertical space is cheap. And in the example it's hardly lots.
> 3) Option (iii) moves the webpage text below the note up and down. This interferes more with the reading experience than does the static popover.
It only moves it down, and then you can read the content in flow.
> 4) Options (ii) and (iii) are not portable over copy paste. If you copy a webpage with these elements into another file, you'll have to manually rearrange them to appear as actual footnotes.
That's a feature, not a bug. Content is in the correct order.
> 5) All options, as implemented by the author, eliminate the key-value nature of footnotes. One cannot refer to a particular parenthetical, `note`, or `<details>` because they aren't numbered.
So? They have headings instead.
[dead]