This post demonstrates the sidenotes featureSidenotes are margin notes that appear beside the paragraph they reference, popularized by Edward Tufte’s work on information design. in XenT. Unlike traditional footnotes that appear at the bottom of the page, sidenotes appear in the margin on wide screens and as inline pop-ins on narrow screens.

How Sidenotes Work

The implementation uses pure CSSSpecifically, this uses the “checkbox hack” - a checkbox element controls visibility via CSS :checked pseudo-class. with no runtime JavaScript required. On wide screens (≥1400px), sidenotes appear in the right margin. On narrow screens, they become toggle-able inline elements.

Multiple Sidenotes

You can have multiple sidenotesThe first sidenote in this paragraph. in the same paragraphThe second sidenote, demonstrating multiple notes work correctly. without any issues. The numbering is automatic and consistent.

Responsive Behavior

Wide Screens (Desktop)

On screens 1400px and wider, sidenotes automatically appear in the right margin:

• Always visible (no interaction required)
• Aligned with their reference number
• Positioned using float + negative margin technique
• Numbered to match their reference

Narrow Screens (Mobile/Tablet)

On screens narrower than 1400px, sidenotes become interactive:

• Hidden by default to save space
• Click/tap the bracketed number to toggle
• Smooth slide-in animation
• Highlighted background for visibility
• Tap again to collapse

Technical Details

The implementationSee src/integrations/remark-sidenotes.ts for the full implementation. consists of three main parts:

1. Remark plugin - Transforms markdown footnotes into sidenote HTML structure using mdast-util-to-hast for proper markdown rendering
2. CSS styling - Handles positioning and responsive behavior
3. Checkbox hack - Enables toggling without JavaScript

Markdown Support

Sidenotes support full markdown formattingThe plugin uses mdast-util-to-hast and hast-util-to-html to convert markdown AST to HTML, supporting bold, italic, links, and code. including:

• Bold and italic text
• Links
• Inline code
• Line breaks

Accessibility

Sidenotes are accessible with:

• Semantic HTML roles (role="note", role="button")
• Keyboard navigation (Tab + Enter/Space)
• Screen reader support
• Minimal ARIA attributes for clarity

Long Content Test

This sidenote contains much longer content to test how the layout handles it.This is a longer sidenote to demonstrate how the system handles multi-line content. It includes multiple sentences and should wrap properly in the margin space. On narrow screens, it will expand inline with appropriate padding and background. The goal is to ensure readability regardless of content length. The sidenote should gracefully handle the extra height without breaking the layout.

Conclusion

Sidenotes provide a superior reading experience compared to traditional footnotesTraditional footnotes force readers to jump to the bottom of the page and back, interrupting reading flow. Sidenotes eliminate this friction. by keeping contextual information close to its reference point.

Try resizing your browser window to see the responsive behavior in action!