Text messen, ohne das DOM anzufassen
Pretext ist eine reine TypeScript-Textlayout-Bibliothek, die Browser-Layout-Reflows umgeht und Texthöhe sowie Zeilenumbrüche mit reiner Mathematik berechnet. 300-600x schneller als DOM-basierte Messung, mit vollständiger Unterstützung für mehrsprachigen Text, Emojis und bidirektionalen Text. Gebaut für das Zeitalter von Canvas / SVG / WebGL.
“Textlayout und Textmessung waren schon immer der letzte und größte Engpass auf dem Weg zu interessanteren UIs, besonders im KI-Zeitalter.”
Installation & Nutzung
import { prepare, layout } from '@chenglou/pretext';
// Schritt 1: Schrift einmal analysieren (1-5ms, nur einmal)
const prepared = await prepare('Hello, 世界 🌍', '16px Inter');
// Schritt 2: Layout für beliebige Breiten berechnen (0.0002ms, frei aufrufbar)
const { height, lineCount } = layout(prepared, 300);
console.log(height); // Exakte Pixelhöhe
console.log(lineCount); // Anzahl der Zeilen
Pretext unterstützt sowohl ESM als auch CJS. Läuft im Browser, in Node.js und in Web Workern.
Offizielle Demos
Alle ansehen →Accordion
↗Expand/Collapse-Animationen, bei denen Pretext die Texthöhe in Echtzeit berechnet, ganz ohne DOM-Reads
Editorial Engine
↗Animierte Sphären, live umfließender Text, Pull Quotes und Mehrspaltenfluss, alles ohne DOM-Messung
Dynamic Layout
↗Obstacle-aware Text-Routing mit Pretext: Text fließt mit 60fps kontinuierlich um beliebige Formen
Masonry
↗Waterfall-Layout für Textkarten, deren Höhen von Pretext und nicht vom DOM vorhergesagt werden
Justification Comparison
↗CSS-Justify vs. greedy line-breaking vs. Knuth-Plass-Layout, direkt nebeneinander
Rich Text
↗Präzises Layout für Inline-Code, Links, Chips und andere reiche Elemente im Textfluss
Variable Typographic ASCII
↗Partikelgetriebene ASCII-Art, die proportionale Glyphenmessung mit einer Monospace-Version vergleicht
Bubbles
↗Kompakte mehrzeilige Message-Bubbles, deren optimale Breite Pretext automatisch berechnet
Community Showcase
Kreative Demos, die auf X / Twitter viral gingen und zeigen, was mit Pretext möglich wird
Das Web ist wieder interessant
@EsotericCofe"Endlich ist das Web wieder interessant geworden"
Der kleine leuchtende Drache
@Riyvir"Dieser kleine leuchtende Drache freut sich sehr über Pretext."
Die magischste Zeit meines Lebens
@reathchris"Ich bin in der magischsten Zeit meines Lebens"
Das Textlayout meiner Träume
@rauchg"Ich kann endlich das Textlayout meiner Träume shippen"
Fluid Interfaces FTW
@vamsibatchuk"Das ist Gold. Fluid Interfaces FTW."
Dein Physikbuch ist nicht mehr langweilig
@stevibe"Dein Physikbuch ist nicht mehr langweilig"
Verrückter Wasserwellen-Effekt
@dushankas"Verrückt"
Los geht's: Pretext Breaker spielen
@singular_prism"Los geht's! Spiel Pretext Breaker 🎮"
Warum Pretext?
Jeder Aufruf von getBoundingClientRect() oder offsetHeight zwingt den Browser dazu, die komplette JavaScript-Ausführung zu pausieren und die Geometrie der gesamten Seite neu zu berechnen, bevor eine Zahl zurückgegeben wird. Auf einer Seite mit 500 Textblöcken braucht DOM-basierte Messung 15-30ms und löst 500 Layout-Reflows aus. Pretext erledigt dieselbe Aufgabe in 0.05ms ohne einen einzigen Reflow und ist damit 300-600x schneller.
Traditioneller Ansatz
Unsichtbares DOM-Element erstellen → CSS anwenden → in das Dokument einfügen → getBoundingClientRect() aufrufen → Element entfernen. Jede Messung erzwingt einen vollständigen Seiten-Reflow. 500 Textblöcke = 500 Reflows.
Pretext-Ansatz
prepare() analysiert Font-Metriken einmal mit Canvas measureText und cached sie. Jeder spätere layout()-Aufruf ist reine Arithmetik: kein DOM-Zugriff, kein Reflow, aufrufbar aus Web Workern und auf dem Server.
Virtual Scrolling
Layout Shift vermeiden
Canvas / WebGL Rendering
Masonry-Layouts
Textfluss um Hindernisse
SVG / Server-seitiges Rendering
So funktioniert es
Ein zweiphasiges Design, das teure Messung von billiger Berechnung trennt
prepare() — Einmalige Font-Analyse
Pretext normalisiert zunächst Whitespace gemäß CSS-Spezifikation und nutzt dann den eingebauten Intl.Segmenter des Browsers für Unicode-Segmentierung. Dadurch werden CJK-Zeichen, Thai ohne Wortabstände, arabische RTL-Skripte und Emoji-Sequenzen korrekt behandelt. Die segmentierten Einheiten werden mit Canvas measureText gemessen und unter dem Schlüssel (segment, font) gecacht. Die gesamte prepare()-Phase dauert 1-5ms und läuft nur einmal.
layout() — Reine Arithmetik
Mit gecachten Font-Metriken ist jeder layout()-Aufruf reine Mathematik: gecachte Segmentbreiten aufsummieren, bis maxWidth erreicht ist, dann in die nächste Zeile umbrechen. Auch der CSS-Sonderfall, dass trailing spaces über die Zeilenbreite hinausragen, ohne einen Reflow auszulösen, wird abgedeckt. Jeder Aufruf dauert etwa 0.0002ms und kann in jedem Animationsframe laufen.
Safari-Emoji-Kalibrierung
Safaris Canvas API meldet bei Emojis mitunter andere Breiten als die tatsächliche DOM-Darstellung. Trifft Pretext bei einer Schriftart erstmals auf Emojis, führt es eine versteckte DOM-Messung durch, ermittelt einen Korrekturfaktor, cached ihn und wendet ihn auf alle folgenden Emoji-Messungen an. So bleibt die Messung browserübergreifend pixelgenau.
Eingebaute Verifikation
Pretext enthält ein Verifikationssystem, das versteckte DOM-Elemente erzeugt und ihre reale Render-Höhe mit den berechneten Pretext-Werten vergleicht. Dieser Side-by-Side-Abgleich stützt die Genauigkeitsversprechen und hilft Entwicklerinnen und Entwicklern beim Validieren im Debug-Modus.
Unterstützte Textarten
CJK (Chinesisch / Japanisch / Koreanisch)
Emojis
Bidirektionaler Text (BiDi)
Sprachen ohne Leerzeichen
Soft Hyphens
Reiche Inline-Elemente
Vergleich mit Alternativen
Pretext ist nicht der einzige Ansatz für Textmessung, führt aber bei der Kombination aus Geschwindigkeit, Genauigkeit und Sprachunterstützung
DOM-Messung
Rohes Canvas.measureText
HarfBuzz (WASM)
Pretext
Über den Autor
Cheng Lou
Ehemaliges Mitglied des React-Core-Teams, Mitentwickler von ReasonML (heute Melange) und aktuell Frontend-Ingenieur bei Midjourney. Auch die Entstehung von Pretext ist bemerkenswert: Cheng Lou lieferte Browser-Rendering-Benchmarks an KI-Coding-Assistenten wie Claude Code und Codex, die die Implementierung über Wochen hinweg für zentrale Containerbreiten testeten und optimierten. Nachdem die Zuverlässigkeit in Midjourneys Produktionsumgebung bestätigt war, veröffentlichte er Pretext als Open Source.
Resonanz aus der Community
Nach dem Launch im März 2026 löste Pretext sofort Diskussionen in der Frontend-Community aus
“Textlayout und Textmessung waren schon immer der letzte und größte Engpass auf dem Weg zu interessanteren UIs, besonders im KI-Zeitalter.”
“Pretext löst das langjährige Problem, die Höhe von umbrochenem Text außerhalb des DOM zu berechnen.”
“Das ist keine flashy Demo, sondern fundamentale Infrastruktur, um CSS-basiertes Layout zu ersetzen. Ein echter UI-Paradigmenwechsel.”
Bekannte Grenzen
Pretext ist kein Wundermittel. Diese Grenzen solltest du vor dem Einsatz kennen