Pretext Playground
Live REPL for @chenglou/pretext — DOM-free text layout. Type text, pick a font, drag sliders. Zero DOM reflow on the
measurement path.
| # | Text | Width (px) | Fill % |
|---|
How Pretext works
This page runs @chenglou/pretext in your browser (bundled with the site). When you edit text
or sliders:
- prepare(text, font) — measures via Canvas and caches character widths (no layout tree).
- layout(prepared, width, lineHeight) — returns
heightandlineCount. - layoutWithLines — returns each line’s
textandwidthfor tables and Canvas drawing.
Advanced mode uses prepareWithSegments + layoutWithLines throughout. See Canvas snippets and shape flows.
DOM measurement vs Pretext
Reading layout properties after DOM mutations can force synchronous reflow. Pretext stays on the Canvas measurement path for the hot loop.
| Method | 500 blocks (typical) | Reflows |
|---|---|---|
offsetHeight loop | 15–30ms+ | 500 |
| @chenglou/pretext | orders of magnitude less work on layout tree | 0 |
Playground FAQ
-
The Pretext Playground is a live, browser-based REPL for the @chenglou/pretext text layout library. You can type any text, choose a font, adjust container width and font size, and instantly see how Pretext measures and lays out your text. The playground runs entirely in your browser using the official @chenglou/pretext package.
-
No. The Pretext Playground is completely free and requires no account, no API key, and no server. Everything runs in your browser and all computation happens on your device.
-
Pretext uses the same font string format as the CSS font shorthand property: '[style] [weight] [size] [family]'. For example: '16px Inter', 'bold 18px Georgia, serif', 'italic 500 14px -apple-system, sans-serif'. The size and family are required. The font must be loaded in the browser before calling prepare() — otherwise Pretext will measure using the fallback system font.
-
If your text renders at a different height than Pretext measures, the most likely cause is that your font is not yet loaded. Pretext uses canvas.measureText() which reads from the font engine — if the custom font hasn't loaded yet, the browser uses a fallback font with different character widths. The fix: call prepare() after document.fonts.ready resolves. Line height is also significant — total height depends on the lineHeight value you pass to layout().
-
Yes. The Playground includes a font selector with popular Google Fonts. When you select a font, it is loaded via the Google Fonts API, and Pretext measures text using that font's actual character metrics. You can also type a custom CSS font string directly into the font input field.
-
Click the 'Copy' button in the generated code panel to copy a ready-to-run code snippet to your clipboard. You can switch between Simple API (prepare + layout) and Advanced API (prepareWithSegments + layoutWithLines) modes to see the matching code pattern for each.
-
Layout reflow is a browser operation where the browser recalculates the position and size of every DOM element on the page. Traditional text measurement triggers a full layout reflow every time. Pretext uses canvas.measureText() to access the font engine directly, bypassing the layout tree entirely. The result: zero reflows for Pretext layout computation.
-
Yes — since Pretext delegates to the browser's Canvas font engine, it inherits native Unicode Bidirectional (BiDi) text support. Arabic, Hebrew, and other RTL scripts are measured using the browser's built-in text shaping.