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 request each line's range inside the animation loop and draw with ctx.fillText.

@chenglou/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 without causing reflow.

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

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 both font strings 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 image-to-ASCII tools for image conversion rather than pretext.

The common cause is calling prepare or prepareWithSegments inside the animation loop, which is the expensive operation. Cache the prepared handle in module scope and only rerun layout functions per frame; also set ctx.font once per frame rather than per fillText call.