pretext

Measure text dimensions and layout without DOM reflows using the pretext library.

Updated Apr 23, 2026

Search Tags:#performance #layout #canvas #dom-free #pretext #text-measurement

Ready to run

npx skills add https://github.com/phintruong/skills --skill pretext-phintruong

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/phintruong/skills/tree/main/pretext
Command: npx skills add https://github.com/phintruong/skills --skill pretext-phintruong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the performance bottlenecks and layout shifts associated with measuring text dimensions using the DOM, providing a pure-math approach to text layout.

Core Features & Use Cases

DOM-Free Measurement: Calculate text dimensions and line counts without triggering browser reflows or layout thrashing.
Two-Phase Architecture: Separates expensive preparation from cheap layout updates, enabling smooth resizing and animations.
Use Case: Ideal for virtualized lists, canvas-based UIs, or complex responsive layouts where you need to know exact text heights before rendering.

Quick Start

Invoke the pretext skill to help me implement a high-performance text layout for my canvas-based dashboard.

Frequently Asked Questions about pretext

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

FAQPage Schema

How do I measure text dimensions without triggering browser reflows or layout thrashing?▼

DOM-free text measurement calculates text dimensions and line counts using a pure-math approach, completely bypassing the browser DOM to prevent reflows and layout thrashing. This ensures zero-reflow performance during dynamic UI updates.

What is the best way to calculate exact text heights for a virtualized list before rendering?▼

Calculating exact text heights for virtualized lists requires a two-phase architecture that separates expensive cold-path preparation from cheap hot-path layout computation, enabling smooth resizing and animations without DOM dependencies.

When do I need a DOM-free text layout engine for Canvas or SVG rendering?▼

A DOM-free text layout engine is needed for Canvas or SVG rendering pipelines when building complex responsive layouts, virtualized UI components, or canvas-based dashboards where exact text dimensions must be known prior to rendering.

How does the cold-path and hot-path separation improve text layout performance?▼

Separating cold-path preparation from hot-path layout computation improves text layout performance by isolating expensive measurement tasks during initialization, leaving only cheap layout updates for the hot-path to ensure smooth resizing and animations.

Can I implement high-performance text layout for a canvas-based dashboard without causing layout shifts?▼

Yes, you can implement high-performance text layout for a canvas-based dashboard without layout shifts by using a pure-math text measurement approach that enforces strict separation of preparation and layout computation, ensuring zero-reflow performance.