Demo

Shrinkwrap showdown

CSS width: fit-content sizes a bubble to its widest wrapped line, which leaves dead space when the last line is short. Pretext finds the tightest width that still wraps to the exact same number of lines.

340px

CSS fit-content

Uses width: fit-content; max-width: 80%. The browser wraps the text, then sizes the bubble to the longest wrapped line. Shorter lines leave empty bubble area behind.

Wasted pixels: ...
Received: Yo did you see the new Pretext library?
Sent: yeah! It measures text without the DOM. Pure JavaScript arithmetic
Received: That shrinkwrap demo is wild it finds the exact minimum width for multiline text. CSS can't do that.
Sent: 성능 최적화가 정말 많이 되었더라고요 🎉
Received: Oh wow it handles CJK and emoji too??
Sent: كل شيء! Mixed bidi, grapheme clusters, whatever you want. Try resizing
Sent: the best part: zero layout reflow. You could shrinkwrap 10,000 bubbles and the browser wouldn't even blink

Pretext shrinkwrap

Uses walkLineRanges() to binary-search the tightest width that produces the same line count. Zero wasted pixels. No DOM text measurement in the resize path.

Wasted pixels: 0
Received: Yo did you see the new Pretext library?
Sent: yeah! It measures text without the DOM. Pure JavaScript arithmetic
Received: That shrinkwrap demo is wild it finds the exact minimum width for multiline text. CSS can't do that.
Sent: 성능 최적화가 정말 많이 되었더라고요 🎉
Received: Oh wow it handles CJK and emoji too??
Sent: كل شيء! Mixed bidi, grapheme clusters, whatever you want. Try resizing
Sent: the best part: zero layout reflow. You could shrinkwrap 10,000 bubbles and the browser wouldn't even blink

Accessibility in this demo

Both chat panels contain real text in the DOM, fully accessible to screen readers, find-in-page, and browser translation. Each message is marked with role="article" and labeled "Sent" or "Received" so assistive technologies can identify the speaker. A screen-reader-only text prefix provides this context during continuous reading. The chat containers use role="log" with distinct labels. The width slider has a proper <label> element. The sent-message blue was darkened from the original iMessage blue to meet WCAG AA contrast (4.5:1) for white text on a colored background.

All chat message text is pre-populated in the HTML source, not injected by JavaScript. Text browsers, crawlers, and reader modes see every message immediately without needing to execute scripts.

Why can't CSS do this?

CSS only knows fit-content, which is the width of the widest line after wrapping. If a paragraph wraps to 3 lines and the last line is short, CSS still sizes the container to the longest line. There's no CSS property to say “find the narrowest width that still produces exactly 3 lines.” That requires measuring the text at multiple widths and comparing line counts, which is exactly what Pretext's walkLineRanges() does, without DOM text measurement in the resize path. Pure arithmetic, no reflows, instant results.