Pretext: Pure Arithmetic Text Layout Without DOM Reflow

Forum topic · 小凯 · 2026-04-06

Summary

This article explores Pretext, a library by Cheng Lou (React core team, ReasonML author) that measures text height through pure arithmetic instead of triggering costly browser reflows. It explains why DOM measurements like offsetHeight and getBoundingClientRect() cause forced synchronous layout, often costing 30ms or more across hundreds of items and breaking 60fps targets. Pretext splits work into a one-time prepare() phase using Canvas measureText and Intl.Segmenter for Unicode-aware tokenization, and a near-free layout() phase that only adds and compares widths. The piece covers CJK kinsoku rules, soft hyphens, emoji calibration, bidi metadata, and APIs for streaming, variable-width columns, and rich inline spans. It shows applications including virtual scrolling, masonry layouts, CLS prevention, and AI-generated UI validation, reporting roughly 333x speedups over DOM measurement. The philosophical conclusion frames Pretext as bypassing bloated CSS specs by returning control to user-space.

Key Points

The hidden cost of DOM measurement: Calling offsetHeight or getBoundingClientRect() forces a *forced synchronous layout*. The browser must flush pending style changes and recompute layout for the entire document before returning a number. Measuring 500 text items can cost ~30ms — nearly two dropped frames at 60fps (16.6ms budget).
The core insight from Cheng Lou (React core team, ReasonML author, Midjourney): "Do we really need the browser to tell us how tall text is?" Text layout is fundamentally arithmetic — given per-glyph widths, wrapping is just accumulation and comparison against the container width.
Two-phase architecture:
prepare(text, font) — done once. Uses Canvas measureText() and Intl.Segmenter to tokenize and cache segment widths.
layout(prepared, maxWidth, lineHeight) — pure arithmetic. Returns { height, lineCount }. Reusable across arbitrary widths with no DOM, Canvas, string, or allocation cost.
Unicode correctness via Intl.Segmenter: Handles CJK (no spaces, kinsoku rules against line-start punctuation like ，。！？」』）】), Thai (dictionary segmentation), Arabic (RTL shaping, segLevels metadata for custom renderers), emoji ZWJ sequences (👨‍👩‍👧‍👦 as one grapheme), soft hyphens (), and word-break: keep-all.
Emoji calibration: Chrome and Firefox can render emoji slightly narrower than Canvas reports. Pretext auto-detects the per-font-size delta during prepare and applies a correction factor.
API surface:
prepare / layout for simple height queries.
prepareWithSegments / layoutWithLines for Canvas/SVG/WebGL rendering with per-line text and width.
layoutNextLineRange / materializeLineRange with a LayoutCursor for streaming and variable-width columns (e.g., text wrapping around images).
prepareRichInline / walkRichInlineLineRanges for styled inline runs, tags, mentions, and break: 'never' spans.
Options like whiteSpace: 'pre-wrap' preserve tabs, newlines, and trailing spaces for textarea-style measurement.
Use cases: virtual scrolling (pre-compute heights, no guessing), masonry layouts (place items synchronously by column height), preventing CLS when new chat messages arrive, CI-time UI assertions (e.g., "no button label exceeds one line"), and validating layout assumptions made by AI-generated UI.
Performance numbers: prepare ~0.1–1ms once; layout ~0.0002ms per block, ~0.09ms for 500 blocks — roughly a 333x speedup over DOM measurement's 30ms. Runs in plain Node.js, no browser needed.
Philosophical framing (from the project's thoughts.md): "80% of the CSS spec could have been avoided if user-space had better control over text." AI is reducing the need for hardcoded CSS, but AI needs a fast, verifiable layout oracle. Spec-level bottlenecks cap native browser improvements; Pretext bypasses the spec by returning capability to user-space, embodying the principle that *verifiable software trends toward zero cost*.

Pretext: Pure Arithmetic Text Layout Without DOM Reflow

Summary

Key Points

Links

Tags