Typography on the web has always lagged behind print. One of the most useful tools available to print designers — the marginal note — has been largely absent from web writing. This post demonstrates a pure-CSS sidenote implementation
The entire toggle mechanism on mobile works via the HTML checkbox hack: a hidden <input type="checkbox"> paired with a <label>, toggled by the CSS :checked pseudo-selector. No JavaScript is loaded or executed.
that works at any viewport size.
Why sidenotes?
Footnotes interrupt reading flow. You finish a sentence, track to the bottom of the page, read the note, then hunt for your place again. Sidenotes solve this by keeping the annotation visible alongside Edward Tufte pioneered the use of sidenotes in technical writing. His books The Visual Display of Quantitative Information and Envisioning Information make heavy use of marginal annotations to add context without cluttering the main argument. the text it refers to.
The tradeoff is space: sidenotes require wide margins, which means a wide viewport. On narrow screens they become impractical. The solution here is a progressive approach — sidenotes appear in the margin on wide displays and collapse to inline toggles on mobile.
How it works
The shortcode generates a small HTML structure: a <label> linked to a hidden checkbox, followed by the note content. On desktop
Below 1280px the margin isn't wide enough to fit a 200px sidenote without overlapping the content. The threshold can be adjusted in assets/css/extended/sidenotes.css.
, the note is absolutely positioned into the right or left margin using a negative margin-right or margin-left. On mobile, the CSS :checked pseudo-selector makes the note block appear below the label when the user taps it.
Usage in Markdown looks like this:
Some text{{< sidenote right "sn-id" "the label" >}}
The note content.
{{< /sidenote >}} that continues.
The three arguments are: position (right or left), a unique ID per note, and the inline label text — the words that appear underlined in the body copy.
Limitations
Left Left-positioned sidenotes appear in the left margin on wide viewports. Useful when the right margin is crowded, or for stylistic variation. sidenotes require enough space on the left side of the content column, which may not be available on all themes. The current implementation assumes the content is centered with symmetric margins.
Sidenote content is rendered as raw HTML inside the shortcode, so Markdown syntax like **bold** won’t work — use <strong>bold</strong> instead. This is a Hugo limitation: inner content of shortcodes that contain block elements gets wrapped in <p> tags, breaking inline placement.
Tooltips
A lighter alternative to sidenotes is the inline tooltip — a small popover that appears on hover (or tap on mobile). Use it for brief clarifications that don’t warrant a full marginal note.
Usage:
Some {{< tooltip "This is the tooltip content, supporting **markdown**." >}}annotated text{{< /tooltip >}} in a sentence.
Example: I studied A branch of mathematics dealing with continuous change, including derivatives and integrals. Developed independently by Newton and Leibniz in the 17th century. for two semesters, alongside Linear algebra covers vector spaces, matrices, and linear transformations — essential for machine learning and computer graphics. .
On desktop, hover over the underlined words to see the tooltips. On touch devices, tap to toggle them.
Conclusion
For long-form technical writing, sidenotes are a meaningful upgrade over footnotes. The implementation here is about 60 lines of CSS and a 5-line Hugo shortcode — a small investment for a noticeably better reading experience on wide screens.