pretext

Use pretext's layoutNextLineRange with a per-row width function that returns the corridor width at each y position. Call it in a loop each frame, skipping rows too narrow to fit a line, so paragraphs reflow around the obstacle at 60fps without DOM reads.

Pretext is a 15KB zero-dependency TypeScript library that measures multiline text via canvas, returning line breaks, per-line widths, and grapheme positions for a given text, font, and width. It enables layouts and text effects that CSS cannot produce.

Yes, but you must split text with Intl.Segmenter using grapheme granularity rather than String.split, which breaks emoji and combining marks into separate characters. Intl.Segmenter is built into every modern browser.

The canvas ctx.font string must exactly match the rendered CSS font, including weight and family. If a web font fails to load, CSS falls back to another family and measurements drift by 5-20%, so always preload fonts explicitly.

Avoid pretext for static pages where CSS already solves 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 canvas art with no text role.

Call prepare or prepareWithSegments only once per text and font pair, then rerun only the cheap layout functions on resize or per frame. Set ctx.font once per frame rather than per fillText call, since changing canvas font state is slow.