A tour of the page

A good page should make room for a main idea without making every interesting detour compete for attention. This post is a tour of the ways a note here can do that. It is written in Typst, turned into HTML, and meant to be read at both a desk and on a small screen.

The reading column

The main text stays narrow enough to follow with your eyes. A numbered sidenoteOn a wide screen, this note sits beside the sentence. On a narrow screen, tap its number to open it. can hold a detail without sending you to the bottom of the page. A margin note is different: it is unnumbered and better suited to a loose observation. The ⊕ marker opens this aside on a narrow screen; on a wide screen it is already visible.

The hierarchy works in longer posts too. A heading gives the reader a place to return to; a short list makes several choices easier to compare:

  1. Write the thought first.
  2. Move the digression to the side only if it helps the reading flow.

A note can link to another note, such as this one, or to the Typst documentation. Strong text makes a point; emphasis changes the voice more gently. Inline code like square(5) belongs in the sentence, while a longer example has room to breathe:

const square = (n) => n * n;
console.log(square(5));

This is in small caps.

The code block picks up the site’s syntax theme. It is still ordinary text: you can select it, copy it, or read it without running anything.

A little math

Inline math, such as 𝑎2+𝑏2=𝑐2, stays with the prose. A displayed identity gets its own line:

∑𝑘=1𝑛𝑘=𝑛(𝑛+1)2

Neither one is a screenshot of an equation. Typst exports them as MathML, so they can scale with the page instead of blurring when you zoom in.

Pictures in and beside the story

Even a small image can work as a margin note.A grey-haired figure standing in a forest A visitor from the edge of the page. Here it accompanies the sentence rather than interrupting it. A regular figure, by contrast, belongs to the reading column; its caption sits in the margin on wider screens:

Figure 1: The same illustration as a numbered figure in the reading column.
A grey-haired figure standing in a forest

For an image that needs more space, a figure with scope: "parent" uses the full width of the article. Its caption follows the image instead of sitting to one side:

A grey-haired figure standing in a forest
Figure 2: A full-width version of the illustration, shown here to compare the two layouts.

On a phone, the margins disappear and these pieces return to a single column. That is the point of all three treatments: the picture changes place, but it should never make the text harder to read.

diagram

CeTZ lets the same page carry a hand-drawn explanation. The dashed circles show distances from the origin and from 𝑢; the solid lines connect those positions to 𝑤.

Figure 4: Two positions and the distances indicated by the dashed circles.

One last detail

Typst’s ordinary footnotes still work when an endnote is what you actually want.1 There is no rule that every detail belongs in the margin. Choose the format that lets the idea land, and leave the rest of the page quiet.

  1. 1This one stays at the end of the document; the numbered sidenote above stays next to its sentence.