# pretext-text-measurement

Calculates multiline text dimensions and line breaking in JavaScript without touching DOM layout properties or triggering reflow.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 694 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/pretext-text-measurement/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/pretext-text-measurement

## What it does

This skill guides coding agents on using `@chenglou/pretext` for estimating typography bounds in client-side code. Instead of querying properties like `offsetHeight` or calling `getBoundingClientRect`, which force browser layout recalculation, it processes string dimensions through cached font metrics.

The workflow separates preparation from placement. An initial call to `prepare` normalizes spaces and samples segment lengths via canvas context, while repeated calls to `layout` perform lightweight math during container resizes. That makes it suitable for canvas text rendering and virtual list row heights.

Running the resulting implementation requires adding `@chenglou/pretext` to your project dependencies.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pretext-text-measurement/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pretext-text-measurement/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pretext-text-measurement/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pretext-text-measurement/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills pretext-text-measurement
```

2. **Manually: put the files in place**
- File: `.github/skills/pretext-text-measurement/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/pretext-text-measurement
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pretext-text-measurement/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/pretext-text-measurement/SKILL.md

## When to use it
- Determine paragraph height without touching DOM nodes
- Break text into lines for HTML canvas drawing
- Pre-calculate row heights for virtualized scrolling lists
- Flow text around floated graphics with dynamic line widths

## Example prompts
- Show how to compute textarea height without reflow using pretext
- Generate code to split a paragraph into canvas lines with prepareWithSegments
- Measure row heights for a virtualized list using pretext layout

## Similar
- [pretext](https://affpapa.org/en/nevibecode/skills/pretext.md) — skill · 317 installs
- [pixijs-scene-text](https://affpapa.org/en/nevibecode/skills/pixijs-scene-text.md) — skill · 5800 installs
- [text-and-bitmaptext](https://affpapa.org/en/nevibecode/skills/text-and-bitmaptext.md) — skill · 823 installs
- [site-specification](https://affpapa.org/en/nevibecode/skills/site-specification.md) — skill · 2100 installs
- [editorial-tech](https://affpapa.org/en/nevibecode/skills/editorial-tech.md) — skill · 1500 installs
- [agency-grid-layout-minimal](https://affpapa.org/en/nevibecode/skills/agency-grid-layout-minimal.md) — skill · 1400 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 199 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md