Pretext.JS

Pretext.js: The Future of High-Performance Text Measurement

In the world of web development, performance is often dictated by how efficiently a browser handles the Document Object Model (DOM). Pretext.js emerges as a groundbreaking solution for developers who need to measure and position multiline text without the heavy performance cost of traditional DOM-based methods. As a pure JavaScript and TypeScript-first library, Pretext.js allows for text layout that never touches the DOM, ensuring your applications remain fast, fluid, and responsive.

What's Pretext.js?

Pretext.js is a specialized text layout engine that calculates text dimensions and line breaks entirely through arithmetic. Traditionally, determining the height of a text block requires methods like getBoundingClientRect(), which force the browser into a synchronous reflow—a process often referred to as "layout thrashing."

Pretext.js eliminates this bottleneck. By using the browser's Canvas measureText() API once to gather glyph metrics and then performing pure mathematical calculations for subsequent layout tasks, Pretext.js can lay out 1,000 blocks of text in approximately 2ms. This makes it significantly faster than traditional approaches, often reaching speeds 500x faster than DOM-dependent code.

Features of Pretext.js

Zero DOM Reads

The core philosophy of Pretext.js is the total avoidance of DOM reads. After an initial preparation phase, every layout call is pure arithmetic. There is no offsetHeight, no scrollHeight, and absolutely no forced synchronous reflow.

Real Font Metrics

Unlike some libraries that use heuristics or lookup tables, Pretext.js measures actual glyph widths using the browser's Canvas font engine. This ensures the results perfectly match what the browser would naturally render on the screen.

Multilingual by Design

Pretext.js is built to handle the complexities of global text. It provides full support for over 12 writing systems, including:

• CJK (Chinese, Japanese, Korean)
• Arabic and Hebrew (Bidirectional text handling)
• Thai and Hindi
• Correct Unicode segmentation and line-break rules.

TypeScript-Native

Developed from the ground up in TypeScript, the library offers precise types for every function and return value. Developers can enjoy a seamless experience without needing external @types packages.

Zero Runtime Dependencies

Pretext.js is a lightweight addition to any project. It relies exclusively on standard browser APIs, ensuring no extra bloat or polyfills are added to your production bundle.

How to Use Pretext.js

Integrating Pretext.js into your workflow is straightforward, involving a simple two-step process: prepare and layout.

1. Installation

You can install the library via your preferred package manager:

npm install @chenglou/pretext
# or
pnpm add @chenglou/pretext
# or
bun add @chenglou/pretext

2. Implementation

The following example demonstrates how to use Pretext.js to measure text layout instantly:

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

// Step 1: Prepare the text and font (runs once, uses Canvas)
const handle = prepare(
  'Hello, pretext.js — no reflow needed.',
  '16px "Inter"'
);

// Step 2: Calculate layout at any width using pure arithmetic
const { height, lineCount } = layout(
  handle,
  400,  // container width in pixels
  24    // line height in pixels
);

console.log(`Height: ${height}, Lines: ${lineCount}`);

Use Cases for Pretext.js

Variable-Height Virtual Scrolling

Managing a list of 10,000 items with varying text lengths can ground a browser to a halt if each item requires a DOM measurement. Pretext.js enables smooth 60fps scrolling by pre-calculating every item's height without a single reflow.

AI Chat Interfaces

In streaming AI responses, text height changes constantly. Pretext.js can be used to pre-compute bubble heights before the text is even rendered, eliminating annoying UI jumps and layout shifts.

Internationalized Content Feeds

For platforms mixing multiple scripts like Arabic, Korean, and Latin, Pretext.js ensures accurate measurement in a single layout pass, making it ideal for global social feeds.

Creative Typography and Animations

From geometric text visualizations to 3D object text wrapping, the speed of Pretext.js allows for real-time layout updates that are too computationally expensive for traditional DOM methods.

FAQ

Q: Is Pretext.js compatible with all modern browsers?

A: Yes. Pretext.js relies on standard browser APIs like the Canvas API and Unicode segmentation rules, which are available in all modern environments.

Q: How does Pretext.js handle different font styles?

A: When you call the prepare() function, you pass the specific font string (e.g., '16px Inter'). Pretext.js then uses that specific font engine to ensure the measurements are accurate for that style.

Q: Can I reuse the prepared handles?

A: Absolutely. One prepare() call covers any container width. You can compute heights for mobile, tablet, and desktop layout versions using three simple arithmetic operations from the same handle.

Q: Does Pretext.js support TypeScript?

A: Yes, it is TypeScript-native. It provides built-in types for all parameters and return values, ensuring a robust development experience.