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.
