Pretext klingt nach einem akademischen Nischenprojekt. Aber wer die interaktiven Demos öffnet, versteht sofort: Das hier löst echte Probleme, die viele Entwickler mit Heuristiken und DOM-Hacks zu umgehen versuchen.
Fünf Demo-Kategorien zeigen die Bandbreite. Jede adressiert einen klassischen Schmerzpunkt beim Text-Layout im Browser.
1. The Editorial Engine
Die Editorial Engine Demo ist das beeindruckendste Showcase: ein mehrspaltiges Layout mit draggable Orbs. Man zieht Kreise über die Seite, und der Text fliesst in Echtzeit um sie herum, Zeile für Zeile angepasst. Bei 60fps.
Das ist exakt das Problem, bei dem normale Browser-Lösungen versagen. Text um beliebig geformte Hindernisse fliessen zu lassen, erfordert präzise Kenntnis der Zeilenbreiten an jeder Position. CSS kann das nicht. Canvas normalerweise auch nicht. Pretext macht es möglich, weil layout() unterschiedliche Zeilenbreiten für jeden einzelnen Absatz unterstützt.
2. Fluid Smoke — Typografisches ASCII
Die Fluid Smoke Demo macht etwas komplett anderes: Sie rendert eine Fluidsimulation als Typografie. Statt Pixel werden Schriftzeichen verwendet, deren visuelle Gewichtung der Dichte der Simulation entspricht.
Das funktioniert nur, weil Pretext präzise weiss wie breit jedes einzelne Zeichen ist, auch bei Proportionalschriften wo jeder Buchstabe unterschiedlich breit ist. Ein simpler Grid-Ansatz würde hier scheitern.
3. Justification Compared — CSS vs. Knuth-Plass
Der Justification-Vergleich stellt drei Algorithmen nebeneinander: CSS-Blocksatz (greedy), CSS mit Silbentrennung, und Knuth-Plass optimal. Der Unterschied ist augenfällig. CSS-Blocksatz erzeugt "Flüsse" (rivers), unschöne Weissräume die sich diagonal durch den Text ziehen. Knuth-Plass, der Algorithmus aus TeX, verteilt Abstände optimal über den gesamten Absatz.
Mit Pretext ist Knuth-Plass im Browser implementierbar, ohne eine einzige DOM-Messung.
4. Shrinkwrap Showdown
Der Shrinkwrap-Vergleich löst ein deceptively einfaches Problem: Wie findet man die exakt engste Breite für einen mehrzeiligen Text? CSS fit-content ist unzuverlässig. Pretext findet den Wert durch Binärsuche über das Arithmetik-Modell, ohne Layout-Queries.
5. Variable Typographic ASCII
Die Variable ASCII Demo kombiniert ein Partikelsystem mit typografischem Rendering: Jedes Partikel wird als Buchstabe dargestellt, ausgewählt nach Helligkeit und Breite über drei verschiedene Font-Weights. Das Ergebnis ist ein lebendiges typografisches Bild.
RTL und Emoji-Support
Ein oft übersehener Aspekt von Pretext: Die Bibliothek unterstützt vollständig alle Sprachen. Arabisch, Hebräisch und andere RTL-Texte werden korrekt gemessen. Emojis mit ihren variablen Breiten werden präzise behandelt. Mixed-Bidi-Text, wo Arabisch und Englisch gemischt werden, funktioniert korrekt.
Das sind Bereiche, in denen viele Canvas-basierte Lösungen kapitulieren oder sich auf Näherungswerte verlassen. Pretext macht keine Kompromisse.