PRETEXT / TEXT LAYOUT WITHOUT DOM MEASUREMENT

Know where text will go
before you draw it.

Pretext is a JavaScript text-layout engine. Give it text, a font, and a width; it returns line breaks and geometry without inserting anything into the page.

The whole idea

Typical browser code insert text into the DOM→read its size→adjust
With Pretext prepare text once→query any width→render anywhere

Loading the local text engine…

01 / FLOWdirect manipulation

FIRST, TRY THIS

drag the blue block

Move it through the paragraph. The available width changes row by row, so the same prepared text gets new line breaks immediately.

You changeblock position
Pretext returnsline ranges
This page ownsCanvas drawing

waiting for layout…

02 / MEASUREexact fit

NOW CHANGE A CONSTRAINT

How tall will it be?

Resize the text column. Pretext answers before a DOM text box has to exist.

You changecolumn width
Pretext returnsline count + height
This page ownspreview + fit UI
—

waiting for measurement…

03 / SCALEvirtual list

FINALLY, USE THE NUMBERS

10,000 rows. A few DOM nodes.

Pretext predicts every row height. The page can place a tiny rendered window anywhere in the full document.

You changetarget row
Pretext returnspredicted height
This page ownsvirtualization
10,000predicted row heights
—virtual document
—DOM rows mounted

preparing row templates…

THE BOUNDARYwhat the library actually does

Pretext returns numbers. Your app decides what they mean.

It measures and breaks text. It does not draw the blue block, render the Canvas, choose a card size, or virtualize a list. Those are host-app decisions built from the geometry it returns.

sourceofficial demosproject sitecommunity demos