Marginalia Demo

This page demonstrates the marginalia feature in Ametrine. Marginalia are side notes that appear in the margin on wide screens ¹Like this example! and as footnotes on mobile devices.

What are Marginalia?

Marginalia ²From Latin “margo” meaning margin refer to notes written in the margins of books and documents. They’ve been used for centuries by scholars ³Medieval monks were famous for their marginalia to add commentary, questions, or related thoughts without interrupting the main text flow.

Usage

To create a marginalia note, simply wrap your text in double curly braces: {{your note here}}. The syntax is simple and unobtrusive ⁴Unlike footnotes which use brackets and numbers.

Examples

Short Notes

This is useful for brief asides ⁵Short and sweet! or quick clarifications ⁶Just a few words that enhance understanding without breaking the reading flow.

Longer Commentary

Sometimes you need more space to explain a concept ⁷This is an example of a longer marginalia note. It provides additional context and explanation that would be too disruptive if placed in the main text. On desktop, this will appear in the margin. On mobile, it becomes a numbered footnote at the bottom of the page..

Multiple Notes in One Paragraph

You can have multiple marginalia notes ⁸First note in a single paragraph ⁹Second note without any issues ¹⁰Third note. Each gets its own number and position.

Combining with Other Features

Marginalia work alongside other Ametrine features:

• Highlights with marginalia ¹¹You can combine these!
• Bold and italic text ¹²Formatting works normally
• wikilinks ¹³These link to other pages
• Code snippets ¹⁴Even in technical writing

With Lists

1. First item ¹⁵Notes work in lists too
2. Second item ¹⁶Each can have its own marginalia
3. Third item ¹⁷Very flexible!

With Callouts

Technical Details

The marginalia feature uses:

• Remark plugin for parsing ²²Processes markdown AST
• Tufte CSS-inspired styling ²³Named after Edward Tufte
• Responsive design ²⁴Desktop: margins, Mobile: footnotes
• Automatic numbering ²⁵Sequential IDs

Reader Mode

Try clicking the reader mode toggle ²⁶Look for the book icon in the header to see how marginalia work in distraction-free reading mode. The sidebars hide ²⁷More focus on content but marginalia remain visible.

Best Practices

Keep them concise ²⁸Under 2-3 sentences usually. Marginalia should enhance, not overwhelm ²⁹If it’s too long, it belongs in the main text. They’re perfect for:

• Definitions ³⁰New or technical terms
• Etymology ³¹Word origins
• Cross-references ³²See also…
• Quick facts ³³Dates, numbers, stats
• Personal notes ³⁴Your thoughts

Academic Use

Marginalia are particularly useful for academic writing ³⁵Similar to glosses in classical texts. They allow you to provide scholarly context ³⁶Historical background, for example without cluttering your prose with footnotes ³⁷Though both have their place.

Example: Philosophy

Descartes’ famous statement “Cogito, ergo sum” ³⁸Latin: “I think, therefore I am” became the foundation of modern philosophy ³⁹Known as Cartesian philosophy. His method of systematic doubt ⁴⁰Also called methodological skepticism influenced generations of thinkers.

Comparison with Footnotes

Feature	Marginalia	Footnotes
Placement	Margin/inline	Bottom of page
Numbering	Automatic	Manual/automatic
Use case	Quick asides	Full citations
Reading flow	Minimal disruption	Requires jumping

Marginalia ⁴¹double braces are better for quick notes, while traditional footnotes¹ work well for formal citations.

Markdown Support

Marginalia now support full markdown formatting ⁴²This includes italic, bold, code, and links. This makes them even more powerful for adding rich context.

Text Formatting

You can use emphasis ⁴³This is italic text, strong emphasis ⁴⁴This is bold text, and even combine them ⁴⁵Bold and italic together.

Links and References

Add external links ⁴⁶See MDN Web Docs for more info or reference other resources ⁴⁷Check out Wikipedia for general knowledge.

Code Snippets

Include inline code ⁴⁸Use const x = 42 for constants or technical terms ⁴⁹The Array.prototype.map() method is useful.

Images

You can even include images in marginalia ⁵⁰. They’ll be constrained to the margin column width automatically.

Conclusion

Marginalia provide a elegant way to add commentary ⁵¹Without breaking flow to your digital garden. They’re especially effective on wide screens ⁵²Where space is plentiful and gracefully degrade on mobile ⁵³Becoming numbered notes.

Try creating your own marginalia notes and see how they enhance your writing!

Footnotes

1. This is a traditional markdown footnote for comparison. ↩