_______ __ _______
| | |.---.-..----.| |--..-----..----. | | |.-----..--.--.--..-----.
| || _ || __|| < | -__|| _| | || -__|| | | ||__ --|
|___|___||___._||____||__|__||_____||__| |__|____||_____||________||_____|
on Gopher (inofficial)
URI Visit Hacker News on the Web
COMMENT PAGE FOR:
URI Give footnotes the boot â alternatives to footnotes on the web
theandrewbailey wrote 21 min ago:
> I see good, smart people, who'd always avoid using "click here" as
link text
Links to: [1] > contributed Sep 2001 by Aaron Swartz
RIP you're still remembered
URI [1]: https://www.w3.org/QA/Tips/noClickHere
account42 wrote 47 min ago:
> 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.
dado3212 wrote 5 hours 6 min ago:
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:
URI [1]: https://blog.alexbeals.com/posts/possession
jaffathecake wrote 4 hours 22 min ago:
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.
account42 wrote 36 min ago:
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.
jaffathecake wrote 29 min ago:
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.
rendaw wrote 4 hours 4 min ago:
Instead of using numbers, what about having a line from the text to
the sidenote?
globular-toast wrote 5 hours 18 min ago:
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.
lorenzohess wrote 6 hours 15 min ago:
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) ``:
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 `` 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.
jaffathecake wrote 5 hours 55 min ago:
> 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 `` because they aren't numbered.
So? They have headings instead.
jt2190 wrote 9 hours 42 min ago:
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.
wonger_ wrote 11 hours 32 min ago:
For footnotes/sidenotes/endnotes, I think about a few implementations:
- Dorian's expandable parentheticals (click on the gray phrases): [1] -
Gwern's list of sidenote implementations: [2] - The ellipsis -> bottom
modal pattern, found on buttondown articles like this one: [3] 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.
URI [1]: https://doriantaylor.com/person/dorian-taylor#me
URI [2]: https://gwern.net/sidenote
URI [3]: https://buttondown.com/hillelwayne/archive/you-can-cheat-a-tes...
jaffathecake wrote 4 hours 11 min ago:
There are absolutely accessibility issues
URI [1]: https://adrianroselli.com/2022/09/brief-note-on-super-and-su...
paradox460 wrote 12 hours 3 min ago:
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?):
URI [1]: https://pdx.su/blog/2024-08-10-diy-permanent-xmas-lights/
cryzinger wrote 7 hours 40 min ago:
Oh, those look nice... how did you pull that off? Pure CSS?
paradox460 wrote 5 hours 29 min ago:
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 [1] The CSS that affects them is [2] (there's
also a small query that makes the parent paragraph of a superscript
flash when you return to it, using has queries)
URI [1]: https://github.com/paradox460/pdx.su/blob/main/assets/js/s...
URI [2]: https://github.com/paradox460/pdx.su/blob/main/assets/css/...
egypturnash wrote 12 hours 32 min ago:
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.
paradox460 wrote 12 hours 9 min ago:
Koreader let's you pop em up in a floating dialog box when you tap
the superscript for it
egypturnash wrote 12 hours 5 min ago:
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.
paradox460 wrote 11 hours 58 min ago:
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
JadeNB wrote 13 hours 31 min ago:
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: [1]
. Here's the reference to the footnote: [1] . And here's the footnote
itself: [1] . 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.)
URI [1]: https://daringfireball.net/2025/06/apple_app_store_policy_upda...
URI [2]: https://daringfireball.net/2025/06/apple_app_store_policy_upda...
URI [3]: https://daringfireball.net/2025/06/apple_app_store_policy_upda...
out-of-ideas wrote 12 hours 58 min ago:
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)
bshacklett wrote 12 hours 28 min ago:
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.
out-of-ideas wrote 12 hours 20 min ago:
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
jaffathecake wrote 13 hours 0 min ago:
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.
JadeNB wrote 11 hours 40 min ago:
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.
jaffathecake wrote 5 hours 53 min ago:
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.
DIR <- back to front page