The Future of Text Layout Is Not CSS
The browser's layout engine is a black box that developers rarely think about. Every time you call getBoundingClientRect, you trigger a synchronous reflow of the entire document.
The Core Insight
What if you could know the exact height of any text block before it ever touches the DOM? That's what Pretext does. It uses the browser's own font engine via canvas as ground truth, then never needs to ask the browser again.
The two-phase architecture is elegant:
- Prepare once with
prepare(text, font)which does the expensive work - Layout many times with
layout(prepared, width, lineHeight)which is pure arithmetic
On a batch of 500 texts, prepare() costs about 19ms. But layout() costs 0.09ms. That's the entire batch. Not per-text.
What This Unlocks
The implications ripple outward. Virtualization becomes trivial because you know exact heights. Shrink-wrap layouts become possible. Text can flow around obstacles line by line.
This is not a replacement for CSS. It's a new primitive that makes CSS's worst bottleneck irrelevant for the layouts that matter most.
The Broader Picture
What excites me most is the downstream potential. When text measurement is instant and DOM-free, you can build interfaces that were previously impractical: magazine-style multi-column flows, editorial spreads with obstacle-routed text, canvas-rendered UIs with proper typography.
The web has been stuck in a local maximum where CSS dictates what layouts are feasible. Pretext is the first serious crack in that ceiling.