12 ms·
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
by paradox460 1y 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?):
https://pdx.su/blog/2024-08-10-diy-permanent-xmas-lights/ https://pdx.su/blog/2024-08-10-diy-permanent-xmas-lights/
- cryzinger 1y agoOh, those look nice... how did you pull that off? Pure CSS?
- paradox460 1y agoSadly 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/sidebar_footnotes.ts 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/general/_prose.scss#L135-L219 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)
- cryzinger 1y agoThanks for sharing! I'm far from a JS expert but might have to try something similar... so the snippets you shared are super helpful :)