← Lab homeReal-time news-style multi-column text layout with live DOM-to-Pretext performance comparison.
What It Does
The Text Flow demo showcases a practical application of Pretext in a familiar editorial context. Two identical news-style layouts display side by side: one powered by traditional DOM measurement, the other by Pretext's instant geometry computation. Drag the container boundary between columns and watch both respond to the resize event. The DOM-based layout exhibits noticeable lag as the browser recalculates dimensions; the Pretext version responds with imperceptible latency, maintaining perfect text flow throughout the interaction. This demo proves that performance differences aren't theoretical—they're immediately visible and tangible, making it an ideal tool for demonstrating Pretext's value to colleagues and team members who need convincing.
Technical Highlights
This experiment combines real-time interaction with benchmarking instrumentation. The demo uses a draggable container divider to trigger resize events on both layout engines simultaneously, creating a direct visual comparison. DOM measurement must query the browser's layout engine, forcing reflow calculations that compound with each measurement. Pretext computes the same geometry without touching the DOM, applying typographic rules directly to text properties. The side-by-side rendering reveals the fundamental architectural difference: one is bound by browser layout constraints, the other operates freely within a computational abstraction. Both handle identical text content, font metrics, and column widths, ensuring the comparison is fair and meaningful.
Pretext APIs Used
| API | Purpose |
|---|---|
| Text measurement | Compute text dimensions and line breaks |
| Wrap geometry | Calculate multi-line text flow at any width |
| Font metrics | Apply accurate font properties to measurement |
| Real-time updates | Recalculate layout on container resize |
How to Try It
Visit the live Text Flow demo and resize the container border between the two columns. Drag smoothly to see both layout engines respond. Notice which side maintains 60fps, and which drops frames as width changes. Try rapid resizing to exaggerate the performance gap. For deeper understanding, inspect how the Pretext side handles identical content with zero DOM queries. This demo works best on desktop where dragging is fluid; touch devices are supported but frame rate differences may be less pronounced on lower-end hardware.
Built By
Created by MaiMcdull. View the source on GitHub.
