Pretext Reflow Demo

Interactive text reflow demo powered by Pretext — Cheng Lou's DOM-free text layout engine.

Drag the sprite around and watch the text reflow in real-time.

Run

Open index.html in any modern browser, or:

npx serve .

Customize

Edit the CONFIG object at the top of the <script> section in index.html:

• spriteHTML — Replace with any SVG or <img> tag
• spriteSize — Width/height of the draggable sprite (px)
• paragraphs — Array of { text, title } objects
• columns / columnGap — Multi-column layout settings
• fontSize / fontFamily — Typography
• Colors — titleColor, firstTitleColor, textColor, lastParaColor

How it works

1. prepareWithSegments() measures all text segments once via Canvas measureText() — no DOM reflow
2. On each drag frame, layoutNextLine() computes line breaks with per-line variable widths to flow around the sprite
3. Text is rendered to <canvas> in a multi-column layout

License

MIT