❧ ✦ ❧

Prætextus

Demonstratio Typographiæ Computatæ

DOM-free text layout — measured once, arithmetic ever after

I. De Mensura On Measure

prepare() segments the text and measures each unit via canvas — once. layout() is thereafter pure arithmetic over cached widths: no DOM reads, no canvas calls. Drag the slider; the height updates without touching the DOM.

Width 320px

In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing. An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays, lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.

Don Quixote · Miguel de Cervantes · 1605

0px height

0 lines

↑ Pure arithmetic. Zero DOM reads on resize.

II. De Pagina On the Page

prepareWithSegments() + layoutNextLine() place each line individually on canvas, SVG, or WebGL. The drop cap here uses a narrower available width for the first rows, then widens automatically — all via the same streaming cursor.

III. De Fluxu On Flow

layoutNextLine() lays out one row at a time, letting each line's available width change independently. As the astrolabe orbits, each line is re-broken around wherever the obstacle happens to be — left, right, or centre.

IV. De Compressione On Compression

walkLineRanges() returns each line's width without building text strings. Here it finds the tightest container that still fits each quote — the "shrink-wrap" that CSS has always lacked for multiline text, across any script.