Pretext – eine reine JS-Layout-Bibliothek zum Messen von Texthöhen ohne DOM

Herauszufinden, wie viele Zeilen ein Text im Browser einnimmt, ist kniffliger, als es scheint. Üblicherweise verwendet man getBoundingClientRect oder offsetHeight, aber diese Methoden zwingen den Browser dazu, das Layout neu zu berechnen. Der sogenannte Layout-Reflow. Aus Sicht des Browsers ist das eine ziemlich aufwendige Aufgabe.
Pretext löst dieses Problem auf eine andere Weise. Mit Canvas-measureText() holt es die Zeichenbreite direkt aus der Font-Engine, und danach werden die Zeilen nur noch mit zwischengespeicherten Breitenwerten per reiner Arithmetik berechnet. Es greift überhaupt nicht auf das DOM zu.

const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)

Auch die Performance ist beeindruckend. Bei 500 Text-Layouts benötigt prepare() etwa 19 ms, danach liegt layout() bei rund 0,09 ms.
Zwei Nutzungsarten
Wenn nur die Höhe benötigt wird, reicht die Kombination aus prepare() + layout(). Das lässt sich für virtualisierte Listen, das Beibehalten der Scroll-Position oder dafür verwenden, zu prüfen, ob von einer AI erzeugter Text über einen Button hinausläuft.
Wer das Layout direkt zeilenweise steuern möchte, nutzt APIs wie layoutWithLines(), walkLineRanges() oder layoutNextLine(). Das lässt sich auch an Canvas, SVG, WebGL oder Server-Side-Rendering anbinden, und sogar Layouts, bei denen die Breite pro Zeile variiert – etwa wenn Text neben einem Bild entlangfließt – werden unterstützt.
Unterstützt werden auch Emojis, CJK und bidirektionaler Text wie Arabisch. Ein Projekt von chenglou, dem Entwickler hinter React und Relay. ⭐ 7.1k
https://github.com/chenglou/pretext​​​​​​​​​​​​​​​​

[xenoside]

Hinter dem GitHub-Link ganz unten hängen viele %E2%80%8B (Zero-Width Space).
js .replace(/\u200b/g, '')

[xguru]

Ich denke, die Seite https://chenglou.me/pretext/editorial-engine/ in der Demo zeigt es am besten.

[smboy86]

Ich kenne mich damit nicht wirklich gut aus, daher vorab bitte ich um Nachsicht.

Es soll auf Basis von measureText auf dem Canvas neu berechnet werden ...
dieser API traue ich nicht so recht.
Genauer gesagt misstraue ich nicht der API selbst,
sondern dass man beim identischen Rendern des DOM die Bedingungswerte perfekt angleichen muss, damit
die Höhe oder Form, die man im Browser sieht, auch dann identisch ist, wenn man sie über die API abruft.
Ich habe den schmerzhaften Albtraum erlebt, das nicht zu begreifen und mich dann zu fragen, warum die Werte abweichen und Bugs entstehen ...