8 ms·

I have never understood why footnotes are added to the bottom when we have an interactive medium available at hand? Why not leverage <details> and <summary> to

I have never understood why footnotes are added to the bottom when we have an interactive medium available at hand? Why not leverage <details> and <summary> to show them in-place without breaking the flow and without listing them all at bottom? See your comment as an example. Why list all links at the bottom rather than in-place?

gjvnq 5y ago
On my website, I ise margin notes for the desktop and "footnotes" for mobile, however said footnotes are displayed just below the paragraph in which they appear. This avoids requiring both long scrolling and interactivity.
- gnubison 5y ago
  Do you think you could elaborate on how this works? It seems like a very ergonomic alternative to traditional footnotes.
tyre 5y ago
Good question. For my site, there are other options that I'd like to explore. Tooltips for smaller things (like definitions) maybe sidebar notes for large screen sizes, and inline notes (like show/hide inserting it between that line and the next) for mobile. I'll look into those.
- mathnmusic 5y ago
  I like how the site being discussed implements footnotes with a hidden checkbox followed by <small> tag: https://john-doe.neocities.org/ https://john-doe.neocities.org/
npteljes 5y ago
On HN it makes sense to me, because a long link would interrupt the flow of text. So you do a footnote to make them go out of the way. Otherwise Wikipedia has a happy medium I think; footnotes are on the bottom where you'd expect, but they show on hover so you don't have to jump there and then back.
- outadoc 5y ago
  If only the Web had a way to make text clickable withtout showing the whole target URL.
  - dncornholio 5y ago
    The technology just isn't there yet.
  - Flankk 5y ago
    The reason is that trolls like to post links to shock sites or a google search for something terrible. Even worse, you could get rickrolled.
    - kreeben 5y ago
      Some day we will have native browser support for the full URL showing in the status field.
      - zaphirplane 5y ago
        Oh no cried the scammers, how will we ever again trick people into clicking a link
        johannes1234321 5y ago
        window.status to the rescue! We must override the long scam URL there!
    - tcmart14 5y ago
      Just wanted to say, the best part was acknowledging the worst was being rickrolled. xD
  - npteljes 5y ago
    There must be other reasons, if it doesn't make sense technologically, no? Instagram also has the tech to show more than 3 images in a row, and Twitter could allow longer texts if they wanted so.
layer8 5y ago
> Why not leverage <details> and <summary> to show them in-place Searchability. You want footnote content to be Ctrl+F-able.
- johannes1234321 5y ago
  A smart browser could understand footnotes and show them in searches.
  - Spivak 5y ago
    You gotta dance with the browser that brought you though. Unless you plan to never publish you’ve gotta design the best interface you can with the constraints of your real users.
chrismorgan 5y ago
I think endnotes are typically an awful idea, and the web can’t do footnotes. What you want is generally side notes. I think what I do on my website is a fairly good compromise for JavaScript-free operation, with a side column for notes on large enough screens, and the notes inlined on small screens. That wouldn’t be suitable for very long notes; such are often more suitable as appendixes, a variant on endnotes. As for <details>, you run into the problem that it’s a block-level element; it’s dubious using it as an inline-level element, though it’ll probably work well enough (I say probably due to uncertainty about screen readers) despite being nominally invalid, given that it’s not an element that will automatically close a paragraph tag like <div> does. I think links at the bottom is generally foolish, taking more effort for both reader and writer, and never do it that way, interspersing them in the text, usually surrounded by angle brackets as has historically been the way of delimiting URLs in plain text.

gjvnq 5y ago

On my website, I ise margin notes for the desktop and "footnotes" for mobile, however said footnotes are displayed just below the paragraph in which they appear. This avoids requiring both long scrolling and interactivity.

gnubison 5y ago
Do you think you could elaborate on how this works? It seems like a very ergonomic alternative to traditional footnotes.

tyre 5y ago

Good question. For my site, there are other options that I'd like to explore. Tooltips for smaller things (like definitions) maybe sidebar notes for large screen sizes, and inline notes (like show/hide inserting it between that line and the next) for mobile. I'll look into those.

mathnmusic 5y ago
I like how the site being discussed implements footnotes with a hidden checkbox followed by <small> tag: https://john-doe.neocities.org/ https://john-doe.neocities.org/

npteljes 5y ago

On HN it makes sense to me, because a long link would interrupt the flow of text. So you do a footnote to make them go out of the way. Otherwise Wikipedia has a happy medium I think; footnotes are on the bottom where you'd expect, but they show on hover so you don't have to jump there and then back.

outadoc 5y ago
If only the Web had a way to make text clickable withtout showing the whole target URL.
- dncornholio 5y ago
  The technology just isn't there yet.
- Flankk 5y ago
  The reason is that trolls like to post links to shock sites or a google search for something terrible. Even worse, you could get rickrolled.
  - kreeben 5y ago
    Some day we will have native browser support for the full URL showing in the status field.
    - zaphirplane 5y ago
      Oh no cried the scammers, how will we ever again trick people into clicking a link
      - johannes1234321 5y ago
        window.status to the rescue! We must override the long scam URL there!
  - tcmart14 5y ago
    Just wanted to say, the best part was acknowledging the worst was being rickrolled. xD
- npteljes 5y ago
  There must be other reasons, if it doesn't make sense technologically, no? Instagram also has the tech to show more than 3 images in a row, and Twitter could allow longer texts if they wanted so.

layer8 5y ago

> Why not leverage <details> and <summary> to show them in-place Searchability. You want footnote content to be Ctrl+F-able.

johannes1234321 5y ago
A smart browser could understand footnotes and show them in searches.
- Spivak 5y ago
  You gotta dance with the browser that brought you though. Unless you plan to never publish you’ve gotta design the best interface you can with the constraints of your real users.

chrismorgan 5y ago

I think endnotes are typically an awful idea, and the web can’t do footnotes. What you want is generally side notes. I think what I do on my website is a fairly good compromise for JavaScript-free operation, with a side column for notes on large enough screens, and the notes inlined on small screens. That wouldn’t be suitable for very long notes; such are often more suitable as appendixes, a variant on endnotes. As for <details>, you run into the problem that it’s a block-level element; it’s dubious using it as an inline-level element, though it’ll probably work well enough (I say probably due to uncertainty about screen readers) despite being nominally invalid, given that it’s not an element that will automatically close a paragraph tag like <div> does. I think links at the bottom is generally foolish, taking more effort for both reader and writer, and never do it that way, interspersing them in the text, usually surrounded by angle brackets as has historically been the way of delimiting URLs in plain text.