Pretext et l'Avenir de la Mise en Page de Texte sur le Web

La mise en page dans les navigateurs est remarquablement efficace dans la plupart des cas. Mais lorsqu’il s’agit de mesurer la hauteur de milliers de blocs de texte en succession rapide, ses limites commencent à apparaître. C’est précisément cette tension que Pretext a été conçu pour résoudre.

Le Coût Réel du Reflow DOM

Lorsque vous appelez getBoundingClientRect() ou lisez offsetHeight sur un élément DOM, le navigateur doit s’interrompre et recalculer la géométrie de la page avant de pouvoir répondre. C’est ce qu’on appelle un reflow de mise en page et, sur une page à structure complexe, il s’agit de l’une des opérations les plus coûteuses du rendu navigateur.

Pour la plupart des interfaces, ce coût est imperceptible. Mais dans les listes virtualisées, les grilles maçonnées, les fils de discussion IA, ou toute interface nécessitant de mesurer dynamiquement des centaines de blocs de texte, les reflows s’accumulent rapidement. Il en résulte des chutes de framerate, des saccades et des interfaces qui paraissent plus lourdes qu’elles ne devraient l’être.

C’est ce problème précis que Pretext cible. Pas le CSS. Pas le rendu en général. Uniquement le cas particulier et douloureux des mesures de texte répétées déclenchant des reflows DOM en cascade.

L’Approche de Pretext pour la Mesure de Texte

Pretext est une bibliothèque TypeScript open source développée par Cheng Lou, connu pour ses contributions à React et aujourd’hui ingénieur chez Midjourney. Elle mesure et dispose le texte entièrement en dehors du DOM grâce à une architecture en deux phases.

Phase un : prepare()

import { prepare, layout } from '@chenglou/pretext'

const prepared = prepare('Hello, world 🌍', '16px Inter')

Il s’agit de l’étape coûteuse, payée une seule fois. Pretext utilise la méthode measureText() de l’API Canvas pour segmenter le texte, appliquer les règles Unicode de retour à la ligne et mettre en cache la largeur en pixels de chaque segment. Aucune lecture DOM. Aucun reflow. La compatibilité avec les navigateurs modernes repose sur des API telles que Intl.Segmenter, désormais largement disponibles.

Phase deux : layout()

const { height, lineCount } = layout(prepared, 320, 24)
// Arithmétique pure. Pas de DOM. Pas de reflow.

Il s’agit du chemin critique. En fonction d’une largeur de conteneur et d’une hauteur de ligne, cette phase calcule la hauteur finale avec retour à la ligne en n’utilisant que les largeurs de segments mises en cache. Vous pouvez l’appeler à chaque événement de redimensionnement sans déclencher le moindre reflow.

Les benchmarks partagés lors du lancement de la bibliothèque indiquent qu’une seule opération de mise en page sur 500 blocs de texte prend environ 0,09 ms avec Pretext, contre un temps nettement supérieur avec une mesure basée sur le DOM. La bibliothèque est également conçue pour gérer les textes multilingues, les scripts bidirectionnels et les emoji, grâce à un processus d’itération assisté par IA qui a utilisé le rendu natif du navigateur comme oracle de vérification.

Cas d’Usage Pertinents

Pretext n’est pas un substitut au CSS. Il ne gère ni le rendu visuel, ni les arbres d’accessibilité, ni toute la complexité du modèle de formatage en ligne du navigateur. C’est un outil spécialisé pour un goulot d’étranglement précis.

Les cas d’usage où il s’intègre naturellement :

• Listes de texte virtualisées nécessitant des hauteurs d’éléments précises avant le rendu
• Mises en page maçonnées requérant des hauteurs de blocs précalculées pour le placement en colonnes
• Interfaces de chat IA avec des messages en streaming à longueur variable
• Interfaces canvas ou WebGL où le texte doit s’afficher entièrement en dehors du DOM
• Éditeurs et fils d’actualité dont la mise en page se recalcule en permanence à mesure que le contenu évolue

Pour une page de contenu standard, un blog ou un site vitrine, Pretext n’est pas nécessaire. La mise en page native du navigateur gère parfaitement ces cas.

Une Évolution Plus Large à Surveiller

Pretext illustre une tendance de plus en plus répandue dans le développement frontend : traiter la mise en page, la mesure et le rendu comme des préoccupations programmables au niveau applicatif, plutôt que comme des responsabilités déléguées au navigateur. Des bibliothèques comme react-window et react-virtualized adoptent déjà cette approche pour la virtualisation des listes. Pretext l’étend à la couche de mesure du texte elle-même.

La question intéressante n’est pas de savoir si Pretext remplace quoi que ce soit — ce n’est pas le cas. La vraie question est de savoir ce qui devient possible lorsque la mise en page du texte cesse d’être une boîte noire. Le flux de texte à largeur variable, les conteneurs ajustés au contenu, la prédiction de mise en page côté serveur et les algorithmes de justification de qualité typographique deviennent alors des problèmes abordables.

Pour les développeurs frontend travaillant sur des interfaces où la mesure du texte constitue un véritable goulot d’étranglement, Pretext mérite un examen attentif. Pour les autres, c’est un signal utile sur la direction que prend la frontière du rendu navigateur.

Conclusion

Pretext ne cherche pas à remplacer le moteur de mise en page du navigateur. Il isole un problème précis et coûteux — la mesure répétée de texte — et le résout proprement en s’affranchissant du DOM. Pour la plupart des sites web, cette distinction importe peu. Mais pour les équipes développant des fils virtualisés, des mises en page maçonnées ou des interfaces basées sur canvas, il offre un gain significatif en termes de plafond de performance. Plus important encore, il annonce un avenir où la mise en page du texte deviendra une primitive programmable plutôt qu’un comportement navigateur figé.

Questions Fréquentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.