JavaScript Text-Engine
Die Pretext-Bibliothek
Die Pretext-Bibliothek ist der schnellste Weg, mehrzeiligen Text im Web zu messen. Diese reine JavaScript-Textmessungsbibliothek berechnet Zeilenumbrüche, Höhen und Layout, ohne das DOM zu berühren — etwa 600× schneller als traditionelle Browser-Messung. Die Pretext-Bibliothek funktioniert in jedem Framework, jedem Browser und jeder Sprache.
Übersicht
Was ist die Pretext-Bibliothek?
Die Pretext-Bibliothek ist eine reine JavaScript/TypeScript-Textmessungs-Engine, erstellt von Cheng Lou, einem ehemaligen Mitglied des React-Core-Teams, jetzt bei Midjourney. Im Gegensatz zu traditionellen Ansätzen, bei denen der Browser Text ins DOM rendern muss, bevor er gemessen werden kann, teilt die Pretext-Bibliothek das Text-Layout in zwei leichtgewichtige Phasen auf — und ist damit die schnellste Textmessungsbibliothek für JavaScript.
Die erste Phase der Pretext-Bibliothek ist die Vorbereitung. Sie rufen prepare() einmal mit Ihrem Text und Font auf. Die Pretext-Bibliothek segmentiert den Text nach Unicode-Regeln und misst die Glyphenbreite jedes Segments über die Canvas measureText()-API. Dies dauert typischerweise 0,1–1ms, abhängig von der Textlänge.
Die zweite Phase ist das Layout. Sie rufen layout() mit einer Containerbreite und Zeilenhöhe auf. Die Pretext-Bibliothek durchläuft die gecachten Segmentbreiten mit reiner Arithmetik — kein DOM-Zugriff, kein erzwungener Reflow. Ein einzelner Layout-Aufruf in der Pretext-Bibliothek dauert ~0,001ms, schnell genug für tausende Aufrufe pro Frame. Das prepared Handle ist wiederverwendbar: Berechnen Sie Höhen für Mobile, Tablet und Desktop aus demselben Handle in drei Operationen.
$ npm install @chenglou/pretext import { prepare, layout } from '@chenglou/pretext' const prepared = prepare('Your text', '16px Inter') const { height, lineCount } = layout(prepared, 400, 24)
Warum diese Bibliothek
Funktionen der Pretext-Bibliothek
Die Pretext-Bibliothek wurde von Grund auf für Performance und Entwicklerergonomie konzipiert. Hier erfahren Sie, warum die Pretext-Bibliothek die beste Wahl für Textmessung in JavaScript-Anwendungen ist.
Null DOM-Zugriff
Die Pretext-Bibliothek liest oder schreibt während des Layouts niemals ins DOM. Nach der initialen Canvas-Messung ist jede nachfolgende Operation reine Arithmetik. Dies eliminiert Forced Synchronous Layout, Reflow und Layout-Thrashing — die drei größten Performance-Killer in textintensiven Anwendungen.
Framework-unabhängig
Die Pretext-Bibliothek ist ein eigenständiges JavaScript-Modul ohne Abhängigkeiten. Importieren Sie es in React, Vue, Svelte, Angular oder reines JavaScript. Die Pretext-Bibliothek funktioniert identisch in jeder Umgebung — clientseitig, serverseitig oder in Web Workers.
Vollständige Unicode- & i18n-Unterstützung
Die Pretext-Bibliothek nutzt Intl.Segmenter für Unicode-bewusste Textsegmentierung. CJK, Arabisch, Hebräisch, Thai, Koreanisch und gemischte Schriften werden alle mit derselben API präzise gemessen. Die Pretext-Bibliothek verarbeitet bidirektionalen Text und komplexe Schriften ohne Sonderbehandlung.
Sub-Mikrosekunden-Layout
Jeder layout()-Aufruf in der Pretext-Bibliothek dauert ungefähr 0,001ms — reine Arithmetik über gecachte Glyphenbreiten. Sie können layout() tausende Male pro Animationsframe aufrufen. Das macht die Pretext-Bibliothek ideal für Echtzeit-Reflow, responsives Resizing und interaktive Typografie.
Variable Zeilenbreiten
Die Pretext-Bibliothek unterstützt zeilenweise Breitenkontrolle über layoutNextLine(). Text kann um Hindernisse fließen, unregelmäßigen Formen folgen oder sich an komplexe redaktionelle Layouts anpassen. Dies ist dieselbe Technik, die in Magazin-Textumbruch und kreativen Typografie-Projekten mit der Pretext-Bibliothek verwendet wird.
TypeScript-first
Die Pretext-Bibliothek ist in TypeScript mit vollständigen Typdefinitionen geschrieben. Jede Funktion, jeder Parameter und jeder Rückgabetyp ist stark typisiert. IDE-Autovervollständigung und Typprüfung funktionieren sofort — kein @types-Paket nötig bei Verwendung der Pretext-Bibliothek.
Performance-Vergleich
Pretext-Bibliothek vs. DOM-Messung
Traditionelle DOM-Messung erstellt unsichtbare Elemente, rendert Text, liest die berechnete Höhe und entfernt dann das Element. Die Pretext-Bibliothek eliminiert diesen gesamten Zyklus. So vergleicht sich die Pretext-Bibliothek mit Standardansätzen.
| Aspekt | DOM-Messung | Pretext-Bibliothek |
|---|---|---|
| Geschwindigkeit pro Messung | 0,5–2ms (erzwungener Reflow) | ~0,001ms (reine Arithmetik) |
| DOM-Zugriff erforderlich | Ja — erstellt versteckte Elemente | Nein — null DOM-Lese-/Schreibvorgänge |
| Layout-Thrashing | Ja — löst Browser-Reflow aus | Niemals — kein Reflow möglich |
| SSR / Web Worker-Unterstützung | Nein — benötigt Browser-DOM | Ja — funktioniert überall |
| Bundle-Größe | Browser-integriert (aber langsam) | ~15KB gzipped, 0 Deps |
| Mehrere Breiten vom selben Text | Neu rendern für jede Breite | Handle wiederverwenden — sofort |
| Unicode- & CJK-Unterstützung | Abhängig vom Browser-Rendering | Intl.Segmenter — präzise |
Anwendungen
Anwendungsfälle der Pretext-Bibliothek
Die Pretext-Bibliothek glänzt überall dort, wo Textmessung zum Engpass wird. Von virtuellem Scrollen bis zu kreativer Typografie — hier sind die häufigsten Einsatzgebiete der Pretext-Bibliothek in der Produktion.
Virtuelles Scrollen
Berechnen Sie Höhen für tausende Listenelemente mit variabler Höhe mit der Pretext-Bibliothek vor. Keine DOM-Elemente nötig. Funktioniert mit React Virtuoso, TanStack Virtual und jeder Virtualisierungsbibliothek für 60fps-Scrollen.
Chat- & KI-Interfaces
Sagen Sie Nachrichtenblasen-Höhen mit der Pretext-Bibliothek vorher, bevor gestreamte KI-Antworten fertig gerendert sind. Eliminieren Sie Layout-Shift und Sprünge. Eng umwickelte Blasen minimieren verschwendeten Leerraum auf Mobilgeräten.
Dashboards & Datentabellen
Dimensionieren Sie Chart-Tooltips, Tabellenzellen und Karten-Layouts mit der Pretext-Bibliothek — kein erzwungener synchroner Reflow. Halten Sie 60fps, auch wenn hunderte sichtbare Textelemente in Echtzeit aktualisiert werden.
Responsive Layouts
Verwenden Sie die Pretext-Bibliothek, um Texthöhen bei mehreren Breakpoints aus einem einzigen prepare()-Aufruf zu berechnen. Mobile, Tablet und Desktop — drei arithmetische Operationen aus demselben Handle, null Reflows.
Kreative Typografie
Erstellen Sie redaktionelle Layouts, in denen Text um Hindernisse fließt, Magazin-Mehrspalten-Layouts oder Partikel-ASCII-Art. Die Pretext-Bibliothek gibt Ihnen zeilenweise Kontrolle, die CSS allein nicht bieten kann.
Mehrsprachige Inhalte
Die Pretext-Bibliothek misst CJK, Arabisch, Hebräisch, Thai, Koreanisch und gemischte Schriften mit derselben Zwei-Funktionen-API. Unicode-Segmentierung und bidirektionaler Text werden automatisch verarbeitet.
API
Pretext-Bibliothek API-Referenz
Die Pretext-Bibliothek bietet eine kleine, fokussierte API. Jede Funktion in der Pretext-Bibliothek dient einem bestimmten Zweck — Vorbereitung oder Layout. Hier ist die vollständige Funktionsreferenz.
| Funktion | Phase | Zweck |
|---|---|---|
| prepare(text, font) | Vorbereitung | Text segmentieren und messen. Gibt opakes Handle zurück. |
| prepareWithSegments(text, font) | Vorbereitung | Wie prepare(), aber mit Segmentdaten für fortgeschrittene Nutzung. |
| layout(prepared, width, lineHeight) | Layout | Zeilenanzahl und Gesamthöhe berechnen. Reine Arithmetik. |
| layoutWithLines(prepared, width, lineHeight) | Layout | Wie layout(), plus Text und Breite jeder Zeile. |
| layoutNextLine(prepared, cursor, width) | Layout | Eine Zeile nach der anderen layouten. Variable Breite pro Zeile. |
| walkLineRanges(prepared, width, cb) | Layout | Zeilengrenzen iterieren, ohne Strings aufzubauen. |
Schnellstart
Erste Schritte mit der Pretext-Bibliothek
Die Installation der Pretext-Bibliothek dauert einen Befehl. Die Pretext-Bibliothek wird als einzelnes npm-Paket ohne Abhängigkeiten ausgeliefert. Folgen Sie diesen drei Schritten, um die Pretext-Bibliothek in Ihrem Projekt zu nutzen.
Pretext-Bibliothek installieren
Fügen Sie die Pretext-Bibliothek mit npm, pnpm oder yarn zu Ihrem Projekt hinzu. Das Paket ist @chenglou/pretext — ungefähr 15KB gzipped ohne Abhängigkeiten.
Text vorbereiten
Rufen Sie prepare(text, font) einmal pro Text+Font-Paar auf. Die Pretext-Bibliothek segmentiert den Text und misst Glyphenbreiten über Canvas. Speichern Sie das Handle zur Wiederverwendung bei mehreren Layout-Aufrufen.
Bei beliebiger Breite layouten
Rufen Sie layout(handle, width, lineHeight) auf, um Höhe und Zeilenanzahl zu erhalten. Die Pretext-Bibliothek berechnet dies mit reiner Arithmetik in ~0,001ms. Verwenden Sie dasselbe Handle für verschiedene Containerbreiten.
Starten Sie mit der Pretext-Bibliothek
Die Pretext-Bibliothek ist Open Source, MIT-lizenziert und produktionsbereit. Probieren Sie sie im interaktiven Playground aus, erkunden Sie Community-Demos oder tauchen Sie in den Quellcode auf GitHub ein. Schließen Sie sich tausenden Entwicklern an, die die Pretext-Bibliothek bereits für schnelle, DOM-freie Textmessung nutzen.
Die Pretext-Bibliothek wurde von Cheng Lou erstellt. Erfahren Sie mehr über das GitHub Pretext-Ökosystem.