Tufte on the Web · A Typographic Swatchbook

This page is a regression-test fixture for the Tufte project layout. It contains every MDX component the codebase ships with, every sidenote kind, and a wide table — so we can spot anything that breaks.^¶

§1 — Sidenote kinds

All 8 sidenote kinds, in order of declaration:

This sentence has a numbered note. This one has a definition.^※ This one has a citation.^↗ This one has a code reference.^{{ }}

This sentence has a warning.^! This one has an open question.^? Finally, an author aside.^¶

A second numbered note further down.

§2 — Figures

Marginal figure (in the margin)

The next paragraph anchors a marginal figure. It should appear in the right margin near this line.^◇

Wide figure (full body width)

§3 — Tables

A narrow table fits in the prose column:

Column	Value
Compact	480
Comfortable	600
Spacious	640

A wide table with many columns — should scroll horizontally, not overflow:

Property	Compact (1024)	Mid (1280)	Comfortable (1440)	Spacious (1680)	Notes
measure	600	680	680	680	caps at 680 fast
margin	300	340	340	340	always measure / 2
gap	40	49	55	64	scales 40 → 64
slack	0	109	178	280	0 at edge, grows
body	940	1069	1075	1084	measure + gap + margin
wrap	1004	1242	1338	1428	body + 64 + slack

§4 — Code blocks and lists

A fenced code block (full body width via CSS):

function clamp(min: number, val: number, max: number): number {
  return Math.max(min, Math.min(max, val));
}

const measure = clamp(540, 0.547 * viewport - 20, 680);

Inline code: const x = 42; and a <Sidenote> reference inside text.

Unordered list:

• First item with inline code
• Second item with bold and italic
• Third item with an external link

Ordered list:

1. Step one
2. Step two
3. Step three

§5 — Quotes

Standard blockquote:

Sometimes the best way to honor an idea is to carry it forward into a new context.

Pull-quote:

The point is not to be original — it is to be clear.

Verse:

§6 — Embeds and cards

Bookmark card:

https://edwardtufte.github.io/tufte-css/

edwardtufte.github.io

↗

Action button:

File-block (download card):

📄

tufte-layout-spec.pdf

239.9 KB

Download ↓

Product card:

Cover block:

§7 — Specialized blocks

Math expression:

Definition list:

Todos (read-only checkboxes):

Build the asymmetric grid Add sidenote anchoring JS Wire the tweaks panel Write print stylesheet Mobile back-anchor for sidenotes

Toggle (collapsible details):

▶ Toggle

The body of a toggle can hold prose, code, or any inline-friendly content. It uses <details> under the hood so it works without JavaScript.

A native <details> for comparison:

Native HTML disclosure

Just a regular <details> block. Useful for “long” content that doesn’t need to be visible by default — implementation notes, sidebars, post-mortems.

§8 — Layout helpers

Spacer (40px gap below):

Page break (visible as horizontal rule):

---

Styled block (custom alignment):

Centered styled-block paragraph with custom line-height. Used by the editor for paragraph-level customization.

Styled heading:

A centered heading from styled-heading

§9 — Misc

Footnote (inline):

This sentence references a footnote ^[1] using the existing Footnote component.

Excalidraw placeholder:

Gallery (3 placeholder images):

Embed (YouTube):

§10 — Stress test

A long paragraph with several inline sidenotes packed together — to verify the cursor logic stacks them without overlap. Second close-packed. Third. Fourth one with a longer body to test wrapping.

End of test fixture.