Tufte Layout Demo:

This post demonstrates the Tufte-style layout available in this blog. The body column stays narrow and readable; the right margin holds figures, notes, and asides without cluttering the main argument.¹

¹ Margin notes are anchored to the paragraph they follow. On narrow screens they collapse below the text rather than overlapping it.

Equations

Euler’s identity is often called the most beautiful equation in mathematics, conneccting the five fundamental constants \(0, 1, e, i, \pi\) in a single line.

² The quadratic formula follows directly from completing the square. It was known to Babylonian mathematicians around 2000 BCE, long before algebraic notation existed.

Inline math works as you’d expect: the area of a circle is \(A = \pi r^2\), and the quadratic formula gives \(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\).²

Display equations use standard LaTeX delimiters. Maxwell’s equations in differential form:

\[ \nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0} \qquad \nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \]

The Gaussian integral is a workhorse of probability and physics:

\[ \int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi} \]

Tables

The values in this table come from a hypothetical measurement series. In a real post, cite the source here rather than in a footnote, keeping the main text uncluttered.

³ F₁ score is the harmonic mean of precision and recall: \(F_1 = 2 \cdot \frac{P \cdot R}{P + R}\).

A simple comparison table in the main body.³

Model comparison on the held-out test set.

Method	Precision	Recall	F₁ Score
Baseline	0.71	0.68	0.69
Fine-tuned	0.84	0.81	0.82
Ensemble	0.88	0.86	0.87
Ours	0.93	0.91	0.92

Images

Main-body figure

A sample image at body width. Caption text sits below the figure in a smaller italic font.

Figure note. Margin figures work well for small supporting visuals — a detail crop, a diagram, a sparkline — that would break the text flow if placed inline.

Margin figure

The same image can be pushed into the margin column using .column-margin around a standard Markdown image block:

A figure placed entirely in the margin. It renders at the full margin width.

Body text continues here and flows naturally past the margin figure on screens wide enough to show the two-column layout. On narrow screens the margin content collapses below the paragraph it annotates.

Sidenotes & margin notes

This is a pure text margin note — no number, just a floating aside. Use these for definitions, cross-references, or any thought that belongs near the text but not inside it.

Quarto’s .column-margin div is the primary tool for Tufte-style marginalia. Place the div immediately after the paragraph it annotates and Quarto will align it vertically with that paragraph.

You can put anything inside a margin div: prose, math, a figure, even a small table. The margin column is 310px wide by default (set in _quarto.yml), so keep content concise.

Code

echo: false suppresses the source block; only output appears. column: margin on a chunk pushes the output into the margin instead.

A code block in the body renders at full body width with a subtle left-rule:

import math

def gaussian(x, mu=0, sigma=1):
    coeff = 1 / (sigma * math.sqrt(2 * math.pi))
    exponent = -((x - mu) ** 2) / (2 * sigma ** 2)
    return coeff * math.exp(exponent)

# evaluate at a few points
for x in [-2, -1, 0, 1, 2]:
    print(f"g({x:+}) = {gaussian(x):.4f}")

To push a code output into the margin, add #| column: margin at the top of an executable chunk — the source stays in the body, the plot or table appears beside it.