Developers tired of hacking Canvas APIs or DOM offscreen elements for text layout now have Pretext, a TypeScript library that precisely measures and lays out multiline text. Cheng Lou, a React core team member at Meta, released it on December 10, 2024, via X (formerly Twitter). It tackles a core problem: getting exact dimensions and wrapping behavior for text blocks without relying on browser rendering engines.
Traditional tools fall short. Canvas’s ctx.measureText() handles only single lines, forcing devs to manually simulate wrapping—error-prone and slow for complex fonts. Libraries like FitText or textwrap.js approximate, but ignore font-specific metrics like kerning or ligatures. Pretext loads fonts directly as ArrayBuffers, computes glyph widths, and simulates line breaking using Unicode rules. It outputs line-by-line metrics: widths, heights, ascent/descent, and even bounding boxes per character.
Core Features and Performance
Pretext shines in non-DOM environments. Feed it a string, target width, font data, and style options (size, weight, style). It returns a layout object with arrays of lines, each containing trimmed text, width, height, and positions. Supports ellipsis truncation and max lines. Demos at chenglou.me/pretext show it rendering justified text, vertical centering, and dynamic reflows in Canvas—smooth at 60fps even for 10,000-character blocks.
Benchmarks from the repo (GitHub: somnai-dreams/pretext) clock it at under 1ms for typical paragraphs on modern hardware. Compare to offscreen Canvas: 5-10x slower due to rasterization overhead. In Node.js, it runs without issues, ideal for server-side PDF generation or game asset precomputation. Example usage:
import { measureText } from 'pretext';
const font = await fetch('/font.woff2').then(r => r.arrayBuffer());
const layout = measureText({
text: 'Your long multiline text here...',
width: 300,
font: new Uint8Array(font),
fontSize: 16,
lineHeight: 1.2,
});
console.log(layout.lines); // [{ text: 'line1', width: 280, height: 19.2 }, ...]
It handles variable fonts and subsets via WOFF2, keeping bundles small—under 50KB gzipped.
Implications for UI and Games
This matters for Canvas-heavy apps. Data viz tools like D3 or Observable plot need tight text bounding boxes for labels—Pretext eliminates guesswork, preventing overlaps in responsive charts. Games (Phaser, PixiJS) gain accurate NPC dialogue boxes or UI menus without frame drops. React Native devs sidestep Sketch or Yoga layout hacks for custom text components.
One demo, Kevin Ho’s BioMap at kevinho.com/experiments/biomap, maps text to biological structures with real-time wrapping. Another at somnai-dreams.github.io tests edge cases like CJK wrapping and RTL hints. Why care? Pixel-perfect layout boosts accessibility (screen readers use metrics) and cuts dev time by 20-50% on text-heavy features.
Skepticism check: It skips full shaping engines like HarfBuzz, so complex scripts (Arabic, Indic) may need polyfills. No built-in rendering—just metrics—so pair with Canvas2D or SVG paths. Still, for Latin/Greek/CJK at web scale, it’s production-ready. Lou’s track record (ReasonML, Reanimated) suggests reliability; 500+ stars on GitHub in days confirm demand.
Bottom line: Pretext plugs a gap in JS text ecosystem. If your app renders text off-DOM, integrate it now—saves headaches and cycles. Fork it, benchmark your fonts, and watch layouts snap into place.
