Playground

Every output mode and runtime hook, isolated. Resize the window or drag the resizable cards to see measurements react.

Output modes

Each marker writes one kind of output, chosen via data-pretext-mode.

height (default) — reserves min-height

The browser learns this paragraph's height at paint time. With pretext it's reserved before paint, so nothing below it jumps when the webfont swaps or content fills in late.

width — shrink-wraps to content

none — event/API only, no inline style

Subscribe in JS via the pretext:measured event.

waiting for measurement…

lines — style by wrapped-line count

↘ drag the corner — the headline restyles by line count

Measurement chips

The pretext:measured event, surfaced as inline chips (naturalWidth · height · lineCount).

Webfont swap

Switching a typeface re-measures every marked element on document.fonts.ready.

sans serif mono

Per-element attributes

<p data-pretext data-pretext-text="Loading post body…"></p>
<pre data-pretext data-pretext-white-space="pre-wrap">{{raw}}</pre>
<p data-pretext data-pretext-word-break="keep-all" lang="ja">…</p>
<p data-pretext data-pretext-apply-styles="false">…</p>
<h2 data-pretext data-pretext-no-settle>…</h2>