Pretext: text layout without the browser 🤯
Pretext measures and lays out text in JavaScript without the DOM, from chat bubbles to Canvas and server-side rendering.
Cheng Lou has built a dependency-free library for measuring multiline text and laying it out without involving the browser.
What does that give you?
You can get text dimensions, lines, and line breaks based on a specified width and font.
It works with any language, font, and even emoji 👍 Most importantly, all the calculations happen in JS, without the DOM, which means none of the reflows browsers love to trigger on every measurement.
💡 What you can build
-
Perfectly sized chat bubbles for a particular text, without excess empty space. Example.
-
Text wrapping around dynamic objects. Example. (The performance deserves a special mention: ~19ms for 500 words of text.)
-
Text rendering in Canvas, SVG, and even on the server.
It looks niche, but it is really about control: you manage the text layout yourself, rather than letting the browser do it for you.