pretext

Measure text height and layout using Canvas measureText without DOM reflow.

Updated May 20, 2026

Search Tags:#performance #layout #canvas #text measurement #pretext

Ready to run

npx skills add https://github.com/RealEmmettS/shaughv-code --skill pretext-realemmetts

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/RealEmmettS/shaughv-code/tree/main/plugins/shaughv-code/skills/pretext
Command: npx skills add https://github.com/RealEmmettS/shaughv-code --skill pretext-realemmetts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides efficient text measurement and layout without relying on DOM reflow, making it ideal for scenarios where performance is critical and reflow should be minimized.

Core Features & Use Cases

Text Measurement: Accurately measure text height and line layout using Canvas measureText().
Layout Calculation: Perform layout calculations using pure arithmetic on cached widths.
Use Case: Use this Skill when building applications that require precise text measurement without causing layout shifts or using the DOM.

Quick Start

Install the @chenglou/pretext package and use the provided functions to prepare and layout your text.

Frequently Asked Questions about pretext

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

FAQPage Schema

How do I measure text width without causing DOM reflow?▼

You can measure text width without DOM reflow by utilizing the Canvas `measureText()` API. This approach calculates accurate text height and line layout purely through arithmetic on cached widths, bypassing the DOM entirely to prevent performance degradation.

Why does text measurement cause layout shifts and how can I avoid it?▼

Text measurement causes layout shifts when it forces the browser to recalculate the DOM structure. You can avoid this by using Canvas for text measurement and performing layout calculations with pure arithmetic on cached widths.

Do I need the @chenglou/pretext package to perform text layout calculations?▼

Yes, you need to install the @chenglou/pretext package to use the provided functions for preparing and laying out your text. It provides the required functions to perform efficient measurement without relying on DOM reflow.

What is the best way to handle text layout for performance-critical web applications?▼

The best way to handle text layout in performance-critical applications is to use Canvas `measureText()` for accurate sizing and perform layout calculations using pure arithmetic on cached widths, completely avoiding DOM reflow.

Can I calculate text line layout using cached widths without the DOM?▼

Yes, you can calculate text line layout without the DOM by performing pure arithmetic on cached text widths. This method uses Canvas to initially measure the text and then computes the layout independently of the document structure.

What are the limitations of using Canvas for text measurement instead of the DOM?▼

Using Canvas for text measurement isolates layout calculations from the DOM to prevent reflow, but requires manual layout computation. You must handle line breaking and height calculation through pure arithmetic on cached widths rather than relying on automatic browser layout.