Pretext Lab
27Text along a curve
Arc 9 · Kinetic & Organic

Text along a curve

Reading is a path the eye walks. The path does not have to be a straight horizontal line. Pretext gives exact character widths; a parametric curve gives a position and a tangent at each arc-length. Put them together and text follows any shape you want.

Mechanism

We define a parametric path p(t) → (x, y) where t ∈ [0, 1]. For each character we compute its cumulative width via canvas measureText, map that width to an arc-length fraction along the path, look up the point, and compute the tangent angle. Then ctx.translate, ctx.rotate, ctx.fillText(char), restore.

Pretext's role here is to make it cheap to re-lay-out if the path changes — no DOM, no reflow.

Application

Spirals of text. Calligraphic flourishes where the line turns. Text that follows a signature, a breath waveform, a skyline. Headlines that arch. Anywhere the reading path itself is a design element.

"The universe is wider than our views of it."

Henry David Thoreau, Walden (1854)

Direct Claude

"text on a curve" per-char canvas render with rotation tangent to a parametric path "spiral of text" polar path r(θ) = r₀ + kθ, place each char at (r cos θ, r sin θ) "headline that arches" quadratic bezier, arc-length sample

Novel extension — HN commenters referenced torus and curved-text layouts as a Pretext frontier.