How does Pretext work?

1. Segment the text; Normalize whitespace, apply Unicode line-break rules, and split the string into measurable units using the browser’s own text segmentation.
2. Measure with Canvas; Feed each segment through Canvas measureText() to get real glyph advance widths from the font engine. Results are cached.
3. Pretext.js uses pure arithmetic; Given a container width, compute line breaks by summing segment widths. Multiply line count by line-height. Return height. No DOM, ever.

Unfortunately, that doesn’t really explain the final integration. And it seems I misunderstood/-assumed at first.

Looking at the example at the top right, it renders numerous div elements?

So, presumably, you lose text wrap behavior and clean markup like <p> for a paragraph? I also can’t select text from it in a normal or consistent way.

This example isn’t very convincing either.

Seems like a cool visual gimmick more than practically useful and accessible for primary content.

Everybody knows that text reflow after load is a no-go. Can’t read what it does, because the orbs constantly reflow the text.