pretext

Use pretext's layoutNextLineRange with a per-row width function that returns the corridor width at each y position. Call materializeLineRange to get each line's text and draw it with canvas fillText, skipping rows too narrow to fit a line.

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 triggering DOM reflow.

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 404 or serve raw TypeScript.

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 solves layout, rich text editors, or general inline formatting engines, since the library is intentionally narrow. It also does not handle image-to-text conversion or non-text generative art.

Use Intl.Segmenter with granularity set to grapheme, which correctly handles emoji, combining marks, and CJK characters. Plain string split breaks multi-codepoint characters into invalid fragments.