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 with a cursor, skipping rows where the corridor is too narrow.

Pretext is a 15KB zero-dependency TypeScript library that measures multiline text via canvas without DOM reflow. Given text, font, and width, it returns line breaks, per-line widths, per-grapheme positions, and total height for custom rendering.

Import from https://esm.sh/@chenglou/[email protected] inside a script type="module" tag, since esm.sh compiles the TypeScript exports to browser-ready ESM. Avoid unpkg, which may serve raw TypeScript or 404.

Measurement drift happens when the canvas 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 passed to prepare exactly in sync with the CSS.

Avoid pretext for static pages where CSS already solves layout, rich text editors, or general inline formatting engines, since the library is intentionally narrow. It fits cases needing line breaks known before rendering, like reflow around shapes or shrink-wrap sizing.

Use Intl.Segmenter with granularity "grapheme" to split text, since naive string splitting breaks emoji, combining marks, and CJK characters. Combine with walkLineRanges or materializeLineRange to get per-glyph x and y positions for physics.