Pretext Layout Lab

Problem

Card UIs break when text is longer than the designer assumed: a title grows two lines, a description overflows, and the grid jumps. The usual fixes — measuring a hidden DOM node, or shipping it and clamping with CSS — either force expensive reflows or hide the failure instead of predicting it. I wanted to know a card would overflow before painting it.

Approach

The lab is built on Pretext, which measures and lays out text without touching the live DOM. Given a string, a width, and a font, it returns line breaks and a height — so I can run layout math in advance and decide what to do while there is still time to change it. Eight focused demos each isolate one failure mode:

• Text-aware cards without DOM reflow — measure, then render once.
• Overflow prediction — flag SAFE vs OVERFLOW RISK against a line budget.
• Line-count prediction for CRM/Kanban titles that grow until they break.
• Mixed-language wrapping — English, Spanish, Arabic, CJK, emoji, long tokens.
• List/card height before render — batch prepare() + layout() over many cards.
• Tightest multiline width — binary-search the narrowest width that preserves line count.
• Measure-first vs jump-later — side-by-side feeds with and without reserved height.
• Raw line output — feed Pretext's lines straight into canvas/SVG/custom layers.

Tradeoffs

• Measure cost vs. reflow cost — measuring up front isn't free, but it's paid once and off the critical render path, instead of thrashing layout on every change.
• Prediction vs. perfection — the goal is a reliable height/overflow signal, not pixel-exact rendering; the browser still does the final paint.
• One dependency, kept small — Pretext does the measuring; everything around it stays vanilla JS so the demos are readable.