Pretext — Fast Accurate Text Measurement and Layout Engine

Introduction

Pretext is a TypeScript library that solves the long-standing problem of accurate text measurement and layout in web and cross-platform applications. It provides pixel-perfect font metrics, line breaking, and text shaping that work consistently across browsers, Node.js, and native runtimes.

What Pretext Does

• Measures text dimensions with sub-pixel accuracy across all platforms
• Performs correct Unicode-aware line breaking and word wrapping
• Handles complex text shaping including ligatures and kerning
• Provides a layout engine for multi-line text with alignment and truncation
• Works in browsers, Node.js, and WebAssembly environments

Architecture Overview

Pretext uses a hybrid approach combining compiled font parsing with a platform-independent shaping engine. Font metrics are extracted at load time and cached for fast repeated measurements. The layout algorithm processes text in a streaming fashion, calculating break opportunities and glyph positions in a single pass for optimal performance.

Self-Hosting & Configuration

• Install via npm, yarn, or pnpm as a dependency
• Import measurement and layout functions directly
• Provide font data as ArrayBuffer for precise metrics
• Configure default text properties like language and direction
• Tree-shakeable exports keep bundle size minimal

Key Features

• Sub-pixel accurate text measurement consistent across platforms
• Full Unicode support including emoji, CJK, and bidirectional text
• Streaming layout algorithm handles large text blocks efficiently
• Zero native dependencies with optional WASM acceleration
• Comprehensive TypeScript types for all APIs

Comparison with Similar Tools

• Canvas measureText — browser-only and imprecise; Pretext is cross-platform and exact
• opentype.js — focuses on font parsing; Pretext adds full layout and line breaking
• Skia/CanvasKit — heavy WASM binary; Pretext is lightweight and tree-shakeable
• Yoga — flexbox layout engine; Pretext focuses specifically on text measurement

FAQ

Q: Why not use the browser's native text measurement? A: Browser APIs produce inconsistent results across engines and lack features like line-break prediction needed for custom renderers.

Q: Does it support variable fonts? A: Yes, Pretext reads OpenType variation axes and applies them during measurement.

Q: What is the bundle size? A: The core measurement module is under 20 KB gzipped without WASM acceleration.

Q: Can I use it in a canvas renderer? A: Yes, Pretext is designed to work with any rendering backend including HTML Canvas, WebGL, and SVG.

Sources

• https://github.com/chenglou/pretext