Pretext : mesure et mise en page de texte sans reflow DOM

Mesurer le texte sans passer par le DOM

Pretext est une bibliothèque pure JavaScript et TypeScript pour la mesure et la mise en page de texte multiligne. Le README la présente comme rapide et précise, prenant en charge des langues auxquelles on ne penserait pas, et permettant le rendu dans le DOM, Canvas, SVG et bientôt côté serveur. Plutôt que d'appeler getBoundingClientRect ou offsetHeight, qui déclenchent un reflow de mise en page, Pretext implémente sa propre logique de mesure en utilisant le moteur de police du navigateur comme référence. La bibliothèque ne prétend pas être un moteur de rendu de polices complet ; elle cible un ensemble précis de fonctionnalités CSS de texte.

L'API en deux étapes : prepare et layout

Le premier cas d'usage public consiste à mesurer la hauteur d'un paragraphe sans toucher au DOM. prepare() effectue le travail ponctuel : normaliser les espaces, segmenter le texte, appliquer les règles de colle, mesurer les segments avec Canvas et renvoyer un handle opaque. layout() effectue ensuite une arithmétique pure sur les largeurs mises en cache, reçoit une largeur maximale et une hauteur de ligne, et renvoie height et lineCount. Le README déconseille de réexécuter prepare() pour le même texte et la même configuration, car cela annulerait le précalcul ; lors d'un redimensionnement, il faut seulement rappeler layout(). Les options incluent whiteSpace: 'pre-wrap' pour rendre visibles les espaces ordinaires, les tabulations et les retours à la ligne durs, ainsi que wordBreak: 'keep-all' et letterSpacing en pixels.

À quoi sert la hauteur mesurée

Le README énumère quatre usages : une virtualisation ou occlusion correcte sans estimations ni caches ; des mises en page utilisateur comme masonry et des implémentations flexbox pilotées en JS ; une vérification au moment du développement que les étiquettes ne débordent pas sur la ligne suivante, ce que l'auteur juge particulièrement utile avec du code généré par IA ; et la prévention des décalages de mise en page lorsque de nouveaux textes chargent et qu'on veut ré-ancrer la position de défilement. La bibliothèque note aussi que layout() avec une chaîne vide renvoie lineCount 0 et height 0, alors que les navigateurs dimensionnent un bloc vide à une ligne de line-height ; les appelants peuvent donc clamper avec Math.max(1, lineCount) * lineHeight.

Mise en page manuelle des lignes et flux riche en ligne

Le deuxième cas d'usage confie le contrôle de la mise en page des lignes à l'appelant. prepareWithSegments() renvoie une structure plus riche, et layoutWithLines() renvoie les lignes à une largeur fixe. Pour un niveau plus bas, walkLineRanges() et measureLineStats() fournissent nombre de lignes, largeurs et curseurs sans construire de chaînes ; layoutNextLineRange() avec materializeLineRange() permet des largeurs variables par ligne, par exemple pour faire couler du texte autour d'une image flottante. Le helper dans @chenglou/pretext/rich-inline gère le texte enrichi en ligne avec des polices par élément, l'espacement des lettres, extraWidth pour les éléments en pilule et break: 'never' pour les éléments atomiques comme les chips et les mentions. Il ne prend volontairement en charge que white-space: normal et n'est pas un moteur général de formatage en ligne CSS.

Limites, prérequis d'exécution et points non documentés

Le README liste les fonctionnalités de texte actuellement couvertes par Pretext : white-space normal et pre-wrap, word-break normal et keep-all, overflow-wrap break-word, line-break auto, letter-spacing comme valeur numérique en pixels, et les tabulations avec la taille par défaut du navigateur tab-size: 8. Il nécessite Intl.Segmenter et la mesure de texte Canvas 2D ; les environnements sans Intl.Segmenter ne sont pas pris en charge. system-ui est signalé comme dangereux pour la précision de layout() sur macOS, avec renvoi à un journal de bugs de plateforme. Les traits d'union conditionnels sont traités comme des points de césure optionnels, mais la césure automatique n'est pas intégrée. La source ne mentionne pas de numéros de version précis, de benchmarks, de résultats de production ni de garanties de sécurité ; ce sont des questions à vérifier.

Installation, démos et licence

L'installation se fait via npm avec @chenglou/pretext. Pour les démos, il faut cloner le dépôt, exécuter bun install puis bun start, puis ouvrir /demos/index dans un navigateur ; sous Windows, le README indique d'utiliser bun run start:windows. Une démo en direct est disponible sur chenglou.me/pretext et une autre collection sur somnai-dreams.github.io/pretext-demos. Le dépôt est sous licence MIT, avec un copyright attribué aux contributeurs de Pretext pour 2026. La licence accorde le droit d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et vendre des copies, et déclare que le logiciel est fourni « tel quel », sans garantie d'aucune sorte. Elle ne dit rien sur le support, la maintenance ou la posture de sécurité. Les instructions de développement sont dans DEVELOPMENT.md, et les crédits attribuent le design initial au travail antérieur de Sebastian Markbage, text-layout.

Conclusion éditoriale

Pretext est distribué sous licence MIT, renvoie à ses notes de développement et à un journal de bugs de plateforme, mais ne documente ni numéros de version, ni benchmarks, ni garanties de sécurité. Pour Pretext : mesure et mise en page de texte sans reflow DOM, le public visé doit pouvoir contrôler Pretext est une bibliothèque pure JavaScript et TypeScript pour la mesure et la mise en page de text dans un environnement de test et accepter les limites documentées; ce choix ne convient pas à une attente de garantie non écrite.

Sources officielles

1. Official documentation
2. Official README
3. Project repository