Back to Playground
Accordion Height Prediction
layoutWithLines
Pretext predicts the exact pixel height of each section before it opens, enabling smooth CSS transitions with no DOM measurement needed.

Pretext is a pure JavaScript library for multiline text measurement and layout. It computes line breaks, text height, and width using only arithmetic after an initial canvas measurement pass. No DOM reads, no reflows, no layout thrashing.

Pretext uses an offscreen canvas to measure character and word widths once via the prepare() function. After that, all layout calculations are pure math. This means you can call layout() thousands of times without triggering a single browser reflow. The library handles all scripts, including Latin, CJK, Arabic, and emoji. It correctly handles bidirectional text, combining marks, and grapheme clusters.

Knowing text dimensions before rendering unlocks smooth animations, virtualized lists with accurate row heights, chat bubbles that perfectly hug their content, and editorial layouts with text flowing around obstacles. Traditional approaches require rendering text to the DOM first, measuring it, then adjusting, which causes visible flicker and poor performance. Pretext eliminates that entire round trip.

Yes. Pretext is tiny (around 15KB) and has zero dependencies. It works in all modern browsers and can render to DOM, Canvas, or SVG.

The transition target height is known before the content is visible because pretext calculated it without rendering to the DOM.