Pretext: Die DOM-freie Textmessungsbibliothek, die KI-Coding-Agents bereits verwenden

Eine neue Bibliothek erschien am 29. März auf npm, ohne Ankündigung und bereits mit Hunderten von Downloads: Pretext (@chenglou/pretext), eine reine JavaScript- und TypeScript-Bibliothek für mehrzeilige Textmessung und Layout, ohne jemals das DOM zu berühren.

Der Autor ist Cheng Lou, bekannt für seine Arbeit an React und ReasonML. Das Konzept ist klar: Text so messen, wie Browser es tun, mit der eigenen Font-Engine des Browsers als Grundlage, aber vollständig über Canvas, kein getBoundingClientRect, keine offsetHeight, kein Layout-Reflow.

Warum das wichtig ist: Das Reflow-Problem

Jeder Frontend-Entwickler ist gegen diese Wand gestoßen: Sie müssen wissen, wie hoch ein Textblock sein wird, bevor er gerendert wird. Die traditionelle Antwort ist: rendern, messen, anpassen. Das löst Layout-Reflow aus, eine der teuersten Operationen im Browser.

Pretext umgeht das vollständig. Es misst Text mit einer versteckten Canvas und der measureText()-API des Browsers, die dieselbe Font-Engine wie das DOM verwendet.

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

const prepared = prepare('AGI le printemps arrive. 시작했다 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)

prepare() macht die einmalige Arbeit: Normalisieren von Leerzeichen, Segmentieren von Text, Anwenden von Kleberegeln, Messen von Segmenten mit Canvas. layout() danach ist ungefähr 0,09 ms für 500 Texte.

Benchmark-Zahlen

• prepare(): ~19 ms (einmalig, gecacht)
• layout(): ~0,09 ms (heißer Pfad, rein arithmetisch)

Ein einzelner getBoundingClientRect()-Aufruf auf einem moderat komplexen DOM-Subtree kann 1-5 ms auf einem Mittelklasse-Gerät dauern. Pretexts heißer Pfad ist 10-50× schneller als DOM-Messung.

Vollständige Unicode + Emoji + Bidirektionale Unterstützung

Pretext behandelt Text-Shaping korrekt über alle Sprachen hinweg. Das README hebt speziell Emoji- und gemischten bidirektionalen (bidi) Text hervor, Arabisch gemischt mit Englisch, Hebräisch gemischt mit Zahlen.

Installation

npm install @chenglou/pretext

Demos auf chenglou.me/pretext. Der Quellcode auf GitHub.