skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

pretext

Measure multi-line text dimensions in pure JavaScript without triggering DOM reflow.

2|Updated Apr 15, 2026
Search Tags:#typography#typescript#layout#text measurement#pretext#virtualized lists#dom reflow
One-click install
npx skills add https://github.com/tommylower/cortex --skill pretext-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/tommylower/cortex/tree/main/design/tools/pretext
Command: npx skills add https://github.com/tommylower/cortex --skill pretext-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext.

What problem does it solve? Measuring text height and width in the browser normally requires DOM APIs like getBoundingClientRect or offsetHeight, which trigger layout reflow and cannot run before render or outside the DOM. This Skill installs and configures @chenglou/pretext so text dimensions are computed as pure arithmetic, making layout decisions deterministic and verifiable without a browser. ## Core Features & Use Cases - Pre-render text measurement: Compute text height, line counts, and shrink-wrap widths before rendering to prevent layout shift on async text loads. - Centralized measurement helper: Creates src/lib/text-measure.ts exposing measureTextHeight, shrinkWrapWidth, and fitsInOneLine, keeping font strings synced with CSS tokens. - Design-system rule fold-in: Adds measurement rules to references/tokens.md, components.md, primitives.md, responsive.md, animation.md, and platform-mapping.md. - Use Case: When building a virtualized list or a button with dynamic labels, verify that labels fit and precompute item heights without rendering hidden DOM nodes or spinning up a headless browser. ## Quick Start Install pretext in this project and set up the text measurement helper so I can verify that my button labels never overflow.

Frequently Asked Questions about pretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure text height in JavaScript without DOM reflow?▼

Use @chenglou/pretext, which computes text dimensions as pure arithmetic over precomputed font widths instead of calling getBoundingClientRect or offsetHeight. Call prepare(text, font) then layout(prepared, maxWidth, lineHeight) to get the height before rendering.

What library should I use for text measurement in virtualized lists?▼

Pretext is designed for virtualized lists and masonry layouts where per-item heights must be known without rendering items. It precomputes heights deterministically, so virtualization buffers are sized from arithmetic rather than rendered measurements.

Can I measure text on the server or in Canvas without a DOM?▼

Yes. Pretext is render-agnostic and works for DOM, Canvas, SVG, WebGL, and server-side rendering where browser DOM measurement APIs are unavailable. Measurements are pure arithmetic, so no headless browser is needed.

Why are my pretext measurements wrong compared to the rendered text?▼

Measurements drift when the font string passed to pretext does not match the CSS exactly. Sync font weight, size, family, line-height, and letter-spacing between your CSS tokens and the prepare call, and centralize calls through one wrapper helper.

When should I not use pretext for text layout?▼

Skip pretext for single-line text where CSS white-space: nowrap with text-overflow: ellipsis suffices, for fluid containers where browser wrapping is acceptable, and for decorative text whose dimensions drive no layout decision.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

typography-scale

Define a ratio-based modular typography scale for UI design.

Official
Intermediate
OpenCovenOpenCoven
20

pretext

Measure and lay out text without triggering DOM reflow.

Official
Advanced
toderiantoderian

ui-design-review

Review rendered frontend UI for design quality, accessibility, and responsiveness.

Community
Intermediate
NiiihuelNiiihuel
1

ux-css-layout

Applies VS Code CSS conventions for layouts, sizing tokens, and text truncation patterns.

Community
Intermediate