Prepare once · layout at any width
Pretext Field Lab
Pretext measures multiline text without putting it in the DOM. The toys below show the three useful facts: a UI hook's wrap, a bubble's height, and mixed-script line breaks.
One prepared handle. Phone, tablet, and poster layouts. Wrap is the line-count jump between the narrow and wide ends. Use that number for packing and HUD alignment; do not remount the engine sitewide.
import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'
const prepared = prepareWithSegments(
'Hello, pretext.js — no reflow needed.',
'16px system-ui'
)
const phone = layoutWithLines(prepared, 288, 27)
const desktop = layoutWithLines(prepared, 1072, 27)
// wrap = |phone.lineCount - desktop.lineCount|
The observatory is the demo: prepare, layout at three widths, read wrap. The sandbox is the same handle at a dragged width.
Open a lab view with [. Sit with ].
This lab places the control surface directly adjacent to the simulated outputs. Keeping explanation and experiment in one field reduces cognitive load by minimizing eye travel and stabilizing attention.
Width labels, telemetry readouts, and named projections make the important change visible: what varies across phone, tablet, and poster is the layout outcome, not the source text.
Preset probes give the visitor a solvable example first, then the same surface opens into freeform text so experimentation can take over without changing tools.
Line Break Observatory
Start with hook — the Software-page line from the phone screenshot. Stable = 0–1 line jump, responsive = 2–3, volatile = 4+.
Loading Pretext.js and waiting for fonts…
Probe Telemetry
- prepare once, when the string or whitespace mode changes.
- layout again at each width — no extra DOM nodes.
- wrap is phone lines minus poster lines.
Drag the handle. The brace below keeps the richest Spw expression that still fits on one line in that width.
copy[hook]{wrap}
Waiting for measure…
What it buys
Three facts. The official playground is still the API catalog.
Height before paint
A chat bubble or HUD can reserve its box from layout.height instead of measuring a hidden node.
Wrap class for packing
Phone vs desktop line counts tell alignment work whether a hook stays one line. npm run audit:copy:align and npm run audit:copy:expr list titles and expression hosts.
Mixed scripts, one handle
Latin, CJK, and Arabic share prepareWithSegments. Layout does not need a second code path.