Pretext
lastmod 2026-03-30created 2026-03-301 edits
A pure JS layout library that measures text height without the DOM
About
Figuring out how many lines a piece of text takes up in the browser is trickier than you'd think. Usually you use getBoundingClientRect or offsetHeight, but these methods force the browser to recalculate layout. This is the so-called layout reflow. From the browser's point of view, it is a fairly heavy operation. Pretext solves this problem differently. It gets character widths directly from the font engine with Canvas's measureText(), and after that, line calculation is pure arithmetic on the cached width values. It doesn't touch the DOM at all.
const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)