Dom-Independent Text Height Measurement Via Wrapping Emulation

Issue 88 Edition 2026-03-29 6 min read

General

Sources: 1 • Confidence: Medium • Updated: 2026-03-30 03:31

Key takeaways

Pretext can calculate the height of line-wrapped paragraph text without rendering it in the DOM.
In Pretext, prepare() tokenizes text into segments handling soft hyphens, non-Latin sequences, and emoji, measures segments using an off-screen canvas, and caches the results.
Cheng Lou says he used Claude Code and Codex with browser ground truth to iteratively measure and refine behavior at significant container widths over weeks.
Pretext is a browser library created by Cheng Lou, a former React core developer and the creator of react-motion.
Pretext testing compared its estimates to browser ground truth by rendering the full text of The Great Gatsby across multiple browsers and later expanded to public-domain corpora across many languages including Thai, Chinese, Korean, Japanese, and Arabic.

Pretext can calculate the height of line-wrapped paragraph text without rendering it in the DOM.
In Pretext, layout() emulates browser word-wrapping to compute wrapped line count at a given width and derive the resulting height.

In Pretext, prepare() tokenizes text into segments handling soft hyphens, non-Latin sequences, and emoji, measures segments using an off-screen canvas, and caches the results.
Pretext structures computation as a single prepare() step followed by multiple layout() calls.

Cheng Lou says he used Claude Code and Codex with browser ground truth to iteratively measure and refine behavior at significant container widths over weeks.
The author used Claude to build an interactive artifact visualizing a simplified version of Pretext.

Pretext is a browser library created by Cheng Lou, a former React core developer and the creator of react-motion.
Cheng Lou claims Pretext is only a few kilobytes, accounts for browser quirks, and supports complex multilingual scenarios including Korean mixed with right-to-left Arabic and platform-specific emojis.

Pretext testing compared its estimates to browser ground truth by rendering the full text of The Great Gatsby across multiple browsers and later expanded to public-domain corpora across many languages including Thai, Chinese, Korean, Japanese, and Arabic.

How accurate is the computed height versus actual DOM layout across a broad range of fonts, font-loading states, OS font stacks, and browser versions?
What are the performance characteristics (latency, throughput, memory) for prepare() and layout() under realistic workloads (very long documents, frequent resizes, many concurrent paragraphs)?
Which specific browser text-layout behaviors are emulated (and which are not), and how is parity maintained as browsers change wrapping/typography behavior over time?
Is the “few kilobytes” size claim reproducible under typical production bundlers and configurations, and what features (e.g., multilingual edge cases) are included at that size?
How generalizable and repeatable is the LLM-assisted, ground-truth-driven development loop for keeping behavior aligned with browsers (e.g., rerunning the process for new browser releases)?

If DOM independent text height measurement is accurate and fast, it could reduce layout and reflow costs in web apps that frequently measure text at many widths, supporting smoother rendering and more responsive UI patterns.
A prepare and layout pipeline with canvas measurement and caching implies a reusable preprocessing step that could shift performance from repeated DOM layout to deterministic computation, potentially benefiting editors, virtualized lists, and document viewers.
A corpus based validation approach across many languages suggests an ambition to support global typography edge cases, which could expand applicability beyond Latin scripts if parity with browser ground truth holds over time.

Independent benchmarks showing height error rates versus actual DOM layout across multiple browsers, OS font stacks, and font loading states, including reported worst case and typical case deviations on large multilingual corpora.
Published performance profiles for prepare and layout under realistic workloads, including long documents, frequent resizes, and many paragraphs, reporting latency, throughput, and memory, and comparing against DOM measurement baselines.
Reproducible bundle outputs validating the few kilobytes footprint under common bundlers, with clarity on which multilingual and emoji handling features are included at that size and which require additional code or data.

Material mismatches versus browser ground truth that persist across common fonts or browsers, such that height estimates frequently differ enough to break layout or require fallback to DOM measurement.
Prepare or layout performance or memory costs that scale poorly on long documents or high concurrency, eliminating the claimed advantage over DOM bound measurement in production like scenarios.
Inability to maintain parity as browsers change wrapping or typography behavior, leading to frequent regressions or a growing maintenance burden that undermines reliability across versions.