@shipitandpray/pretext-devtools

See exactly why your
text breaks.

Hover any element to compare the Pretext-predicted width & height against what the browser actually rendered — live, on any page.

GitHub npm Try the demo ↓

Use on any page — drag to your bookmarks bar

No extension required. Drag the button below to your browser's bookmarks bar. Click it on any page to toggle the measurement overlay.

⊹ Pretext DevTools

Drag the button above to your bookmarks bar, then click it on any page to inspect text measurements.

Live Demo

Toggle the overlay, then hover any element below to see Pretext measurements. The panel shows predicted vs actual dimensions, match %, and overflow detection.

ⓘ Hover an element below after enabling the overlay. The floating panel updates in real time.
Display Heading

The quick brown fox

Section Heading

Subheading with regular weight

Body Copy

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Small / Caption

Last updated March 2026 · Version 0.1.0 · MIT License See changelog for details on recent updates and breaking changes.

Monospace / Code

const x = measureElement(el);

Heavy Weight

SHIP IT AND PRAY

No-wrap + Ellipsis (overflow)

This is a very long string that should be clipped by white-space nowrap and text-overflow ellipsis

overflow: hidden · nowrap
Height-Clipped (hidden overflow)

This text block is artificially height-constrained to 52 px with overflow:hidden so the bottom lines are clipped and invisible to the reader even though they exist in the DOM.

overflow: hidden · fixed height
Wide Letter-Spacing

Tracking Demo Text

Mixed inline spans

Text with bold fragments and italic accents mixed in the flow.

Large Font Size

Aa

Tiny Font

Legal: This product is provided as-is without warranty of any kind express or implied including but not limited to warranties of merchantability fitness for purpose and non-infringement.

What is Pretext?

Pretext is the idea that, given a font stack, size, weight, letter-spacing, and a string of characters, you can predict the rendered pixel dimensions before layout happens — using nothing but the browser's Canvas 2D measureText() API. Pretext DevTools exposes those predictions live so you can spot mismatches, overflow, and clipping at a glance.

Predicted Width

Canvas measureText() + letter-spacing correction across the full character run.

Predicted Height

Resolved line-height × estimated line count (word-wrap aware).

Match %

100% = canvas prediction matches getBoundingClientRect exactly. Lower = font hinting diverged.

Overflow / Clipped

Compares scrollWidth/Height to clientWidth/Height. Marks CLIPPED when overflow:hidden hides content.

How it works

1
Hover event — mousemove fires and we grab the target element.
2
getComputedStyle() — reads the exact font stack, weight, size, line-height, letter-spacing.
3
Canvas measureText() — predicts width; resolveLineHeight() × estimateLineCount() predicts height.
4
getBoundingClientRect() — reads the actual rendered dimensions.
5
Overlay panel — renders delta, match %, and overflow badge next to your cursor.