Cheng Lou, ehemals Mitglied des React-Kernteams bei Meta, hat eine Bibliothek erschaffen, die das Text-Layout im Browser von Grund auf neu denkt. Pretext nennt er sie. Der Name ist Programm: Es geht darum, was vor dem eigentlichen Text-Rendering passiert, das unsichtbare Fundament, auf dem jedes Layout aufbaut.
Das grundlegende Problem: Wenn man im Browser Text messen will, etwa um zu wissen wie viele Zeilen ein Absatz einnimmt, muss man normalerweise das DOM befragen. Das bedeutet getBoundingClientRect(), offsetHeight, oder ähnliche Methoden. Und das bedeutet Layout-Reflow.
Was ist Layout-Reflow?
Jedes Mal wenn der Browser gezwungen wird, die Geometrie eines Elements zu berechnen, muss er möglicherweise den gesamten Seitenbaum neu berechnen. Das ist teuer. Sehr teuer. Für interaktive Anwendungen, die hunderte von Textelementen verwalten, virtualisierte Listen rendern, oder animierte Layouts zeigen, kann dieser Overhead die Performance ruinieren.
Der Pretext-Ansatz
Pretext umgeht das Problem komplett. Statt DOM-Manipulation nutzt es die Canvas-API. Genauer gesagt: die measureText() Methode des Canvas 2D Contexts. Diese Methode gibt präzise Metriken über Text zurück, ohne je ein Layout auszulösen.
Der Workflow besteht aus zwei Phasen:
- prepare(): Einmaliger Schritt der alle nötigen Font-Metriken via Canvas sammelt und cacht
- layout(): Reine Arithmetik. Kein DOM-Zugriff, kein Reflow, nur Berechnungen
Die Performance-Zahlen
Wer braucht das?
Pretext richtet sich an eine spezifische Zielgruppe: Entwickler, die an den Grenzen des Browsers arbeiten. Wer Standard-Webseiten baut, braucht das nicht. Aber für alle, die komplexe UI-Layouts ohne CSS-Hacks implementieren wollen, oder Text auf Canvas und WebGL rendern, oder virtuelle Listen ohne Heuristiken aufbauen, ist Pretext ein Werkzeug das fehlt.
Besonders interessant: die Bibliothek unterstützt vollständig alle Sprachen inklusive Emojis, RTL-Texte (Arabisch, Hebräisch), und gemischtes Bidirektional-Layout. Das sind Bereiche, in denen viele Canvas-basierte Lösungen kapitulieren.
Das grössere Bild
Was Cheng Lou mit Pretext demonstriert, ist etwas Grundsätzlicheres: Manchmal löst man Performance-Probleme nicht durch bessere Browser-APIs, sondern indem man die bestehenden kreativer nutzt. Die Canvas-API wurde nie als Mess-Instrument für Text konzipiert. Und doch ist sie, mit dem richtigen Blickwinkel, genau das.
Pretext ist ein gutes Beispiel dafür wie tiefes Verständnis einer Plattform zu eleganten Lösungen führt, die auf den ersten Blick nicht offensichtlich sind.