Pretext.js is a high-performance text layout library that solves the critical performance bottleneck of DOM-based text measurement. Traditional methods like getBoundingClientRect() trigger forced synchronous reflows, causing significant slowdowns in text-heavy applications. Pretext.js eliminates this by using pure arithmetic for layout calculations after an initial preparation phase.
Key Features:
- Zero DOM Reads: After the initial
prepare()call, alllayout()operations are pure arithmetic with no DOM access - Real Font Metrics: Uses Canvas
measureText()for accurate glyph width measurements matching browser rendering - Multilingual Support: Handles CJK, Arabic, Hebrew, Thai, Hindi, Korean, and other writing systems with proper Unicode segmentation
- TypeScript-First: Built with TypeScript from the ground up with precise type definitions
- Framework-Agnostic: Works with any JavaScript framework or vanilla JS
- Zero Dependencies: No external packages required
Use Cases:
- Virtual scrolling lists with variable-height items
- AI chat interfaces with streaming responses
- Multilingual content feeds and social platforms
- Code editors and text-heavy UIs
- Any application where text layout performance is critical
How It Works:
- Prepare: Normalize text, apply Unicode rules, and measure glyphs using Canvas (runs once)
- Layout: Compute line breaks and heights through arithmetic (instant, no DOM)
- Reuse: Same prepared handle works for any container width
Performance: Measures 1,000 text blocks in ~2ms with 0 DOM reads, compared to ~94ms with traditional methods.
