pretext — Fast Multiline Text Measurement & Layout

No DOM reflow. Pure arithmetic on cached font metrics.

pretext

getBoundingClientRect

offsetHeight

Installation

Plugin (Claude Code)

claude plugin marketplace add chenglou/pretext

npm

npm install @chenglou/pretext

Skill (any platform)

npx skills add https://github.com/akillness/oh-my-skills --skill pretext

When to use

• Calculate paragraph heights and line counts without measuring in the DOM
• Build manual line layouts for text flowing around floated images or variable-width containers
• Handle rich text with emoji, CJK characters, RTL text, and mixed-language content
• Render measured text to DOM, Canvas, or SVG with accurate metrics
• Implement soft hyphenation, letter-spacing, or locale-aware word breaking
• Avoid layout reflow in performance-critical rendering loops
• Server-side text measurement (SSR-friendly)

Do not use when

• You need full CSS text engine fidelity → rely on DOM measurements directly
• You need OpenType feature support (ligatures, kerning tables) → use a dedicated font shaping library
• You need PDF text layout → route to a PDF generation library
• Your target environment lacks

  Intl.Segmenter

  and Canvas 2D support

Core API

Use Case 1: Height Measurement

prepare()

import { prepare, layout } from '@chenglou/pretext'

// One-time analysis + font measurement (cached)
const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀‎', '16px Inter')

// Pure arithmetic — no DOM interaction
const { height, lineCount } = layout(prepared, 320, 20)
// width: 320px container, lineHeight: 20px

Use Case 2: Manual Line Layout

import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'

const prepared = prepareWithSegments('Text here', '18px "Helvetica Neue"')
const { lines } = layoutWithLines(prepared, 320, 26)

for (const line of lines) {
  // line.text, line.y, line.width, line.segments
}

Use Case 3: Shrink-wrap width

import { prepare, shrinkWrap } from '@chenglou/pretext'

const prepared = prepare('Hello world', '14px system-ui')
const { width } = shrinkWrap(prepared, 26)

Options reference

whiteSpace

'normal'

'pre-wrap'

'pre-wrap'

wordBreak

'normal'

'keep-all'

'keep-all'

letterSpacing

const prepared = prepare(text, font, {
  whiteSpace: 'pre-wrap',
  wordBreak: 'keep-all',
  letterSpacing: 1.5,
})

Requirements

• Intl.Segmenter

  API (locale-aware word/grapheme segmentation)
• Canvas 2D text measurement (

  CanvasRenderingContext2D.measureText

  )
• Works in modern browsers and Node.js 16+ (with canvas package for Node)

Output targets

lines

transform: translateY

lines[i].y

ctx.fillText

lines[i].y

<text y=...>

Operating rules

1. Call

   prepare()

   /

   prepareWithSegments()

   once per unique (text, font) pair — it's the expensive step
2. Cache

   prepared

   objects when the same text is measured at different widths
3. Call

   layout()

   /

   layoutWithLines()

   freely — it's pure arithmetic with no side effects
4. Always check

   Intl.Segmenter

   availability before initializing in non-browser environments
5. Use

   shrinkWrap

   to find minimum width before measuring at a fixed container width
6. Prefer

   prepareWithSegments

   over

   prepare

   when you need per-line segment access for rich rendering

Examples

import { prepare, layout, prepareWithSegments, layoutWithLines } from '@chenglou/pretext'

// Basic height check
const p = prepare('Hello, 世界! 🌏', '16px sans-serif')
console.log(layout(p, 200, 20))  // { height: 20, lineCount: 1 }

// Variable-width layout (text around floated image)
const ps = prepareWithSegments('Long article text...', '16px Georgia')
const { lines } = layoutWithLines(ps, (lineIndex) => {
  return lineIndex < 5 ? 200 : 320  // narrower for first 5 lines
}, 24)