Pretext – une bibliothèque de layout en pur JS qui mesure la hauteur du texte sans DOM

Savoir combien de lignes un texte occupe dans le navigateur est plus délicat qu’il n’y paraît. En général, on utilise getBoundingClientRect ou offsetHeight, mais ces méthodes forcent le navigateur à recalculer la mise en page. C’est ce qu’on appelle un reflow de layout. Pour le navigateur, c’est une opération assez lourde.
Pretext résout ce problème autrement. Avec measureText() de Canvas, il récupère directement la largeur des caractères depuis le moteur de polices, puis effectue le calcul des lignes uniquement avec des opérations arithmétiques sur des largeurs mises en cache. Il n’accède jamais au DOM.

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

Les performances sont également impressionnantes. Sur une base de 500 placements de texte, prepare() prend environ 19 ms, puis layout() tourne autour de 0,09 ms.
Deux modes d’utilisation
Si seule la hauteur vous intéresse, la combinaison prepare() + layout() suffit. Cela peut servir à implémenter une liste virtualisée, à conserver la position de défilement, ou à vérifier si un texte généré par une IA dépasse d’un bouton.
Si vous voulez contrôler directement la mise en page ligne par ligne, vous pouvez utiliser des API comme layoutWithLines(), walkLineRanges() ou layoutNextLine(). On peut l’intégrer à Canvas, SVG, WebGL ou au rendu côté serveur, et il gère aussi les layouts où la largeur varie d’une ligne à l’autre, comme lorsqu’un texte s’écoule à côté d’une image.
Il prend en charge les emoji, les langues CJK et même les textes bidirectionnels comme l’arabe. Un projet de chenglou, créateur de React et Relay. ⭐ 7.1k
https://github.com/chenglou/pretext​​​​​​​​​​​​​​​​