pretext

Use pretext's layoutNextLineRange with a per-row width function that subtracts the obstacle's horizontal span at each y position. Call prepareWithSegments once, then stream lines each frame, skipping rows where the corridor is too narrow.

Pretext is a 15KB zero-dependency TypeScript library for DOM-free multiline text measurement and layout. Given text, font, and width, it returns line breaks, per-line widths, and grapheme positions via canvas measurement, enabling text-as-geometry creative demos.

Import from esm.sh with a pinned version, for example https://esm.sh/@chenglou/[email protected], inside a script type=module tag. Avoid unpkg, which can 404 or serve raw TypeScript that browsers cannot execute.

Measurement drift happens when the canvas ctx.font string differs from the rendered CSS font, often because a web font failed to load and CSS fell back to another family. Preload the font and keep the font string exactly in sync.

Avoid pretext for static pages where CSS already handles layout, rich text editors, or general inline formatting engines, since the library is intentionally narrow. Also use dedicated tools for image-to-ASCII conversion or non-text canvas art.

The common cause is calling prepare or prepareWithSegments inside the animation loop; only layout functions are cheap enough per frame. Cache the prepared handle in module scope and set ctx.font once per frame rather than per fillText call.