Pretext : la bibliothèque qui rend la mise en page de texte web 500 fois plus rapide

Pendant 30 ans, le web a traité le texte comme un citoyen de seconde classe. Alors que les designers print font couler des paragraphes autour des images, les enveloppent dans des colonnes et adaptent la typographie à des formes arbitraires depuis longtemps, les navigateurs ne proposaient rien de tel sans des reflows DOM coûteux. Pretext, une nouvelle bibliothèque open source créée par Cheng Lou, ingénieur chez Midjourney, change la donne — en mesurant et disposant le texte multiligne jusqu'à 500 fois plus vite que les méthodes traditionnelles des navigateurs, le tout à 120 images par seconde.

Points clés

• Aucun reflow DOM : Pretext implémente sa propre logique de mesure de texte en utilisant le moteur de polices du navigateur via Canvas, contournant complètement les opérations coûteuses comme getBoundingClientRect et offsetHeight
• Deux opérations fondamentales : prepare() analyse et met en cache les mesures de texte en environ 19 ms pour 500 paragraphes, tandis que layout() calcule les hauteurs en seulement 0,09 ms pour le même lot
• Typographie de qualité magazine : le texte coule autour des obstacles, se distribue en colonnes et se conforme à des formes arbitraires — des capacités considérées comme impossibles sur le web
• Rendu universel : fonctionne avec DOM, Canvas et SVG, avec un support côté serveur prévu
• Support multilingue complet : gère tous les systèmes d'écriture, y compris les textes de droite à gauche, les emojis et le contenu bidirectionnel mixte

Comment ça fonctionne

Le principe fondamental de Pretext est simple mais puissant. Au lieu d'insérer du texte dans le DOM et de mesurer le résultat — ce qui déclenche un reflow du navigateur, l'une des opérations les plus coûteuses du rendu — Pretext utilise l'API measureText() du Canvas pour construire son propre cache de mesures. À partir de ce cache, la bibliothèque peut calculer les hauteurs de paragraphes, renvoyer des objets ligne individuels, et même disposer le texte ligne par ligne avec des largeurs variables.

La bibliothèque propose une API progressive. Dans sa forme la plus simple, un appel à prepare() suivi de layout() donne la hauteur d'un paragraphe sans toucher au DOM. Pour les cas avancés, layoutWithLines() renvoie les objets ligne individuels, walkLineRanges() permet de créer des bulles de texte ajustées, et layoutNextLine() accepte des largeurs différentes par ligne — rendant trivial le contournement d'obstacles par le texte.

Ce que cela permet

La page de démonstration du projet présente sept exemples interactifs illustrant les nouvelles possibilités :

• Mises en page éditoriales avec des orbes animés, un reflux de texte en direct, des citations en exergue et un flux multicolonne — le tout sans aucune mesure DOM
• Bulles de messages ajustées qui maintiennent le nombre de lignes avec un minimum d'espace perdu, similaires aux applications de messagerie
• Dispositions en Masonry où les hauteurs de cartes sont prédites à partir du contenu textuel plutôt que mesurées après le rendu
• Titres conscients des obstacles qui routent le texte autour des images en temps réel
• Formatage riche en ligne avec des blocs de code, des liens et des badges qui s'enroulent naturellement

Ces motifs sont standard dans le design print et les applications natives depuis des décennies, mais restaient impraticables sur le web en raison des contraintes de performance.

Pourquoi c'est important

La mise en page de texte est un problème fondamental du développement web. Chaque bulle de chat, chaque grille de cartes, chaque page éditoriale a besoin de connaître la hauteur du texte avant de le rendre. L'approche standard — rendre invisiblement, mesurer, puis positionner — provoque des instabilités de layout et un défilement saccadé, surtout sur les appareils mobiles.

Pretext élimine toute cette catégorie de problèmes de performance. À 0,09 ms par calcul de mise en page, les développeurs peuvent recalculer les positions de texte à chaque frame d'animation sans descendre en dessous de 120 images par seconde. Cela ouvre la voie à une typographie web fluide de qualité magazine qui réagit aux interactions utilisateur en temps réel.

Contexte

Cheng Lou, connu dans la communauté React pour son travail sur React Motion et Reason (ReasonML), a construit Pretext pendant son travail chez Midjourney. La bibliothèque s'appuie sur des concepts fondamentaux du projet antérieur text-layout de Sebastian Markbage. Elle est distribuée sous licence MIT et a déjà recueilli plus de 6 000 étoiles sur GitHub en quelques jours seulement après sa publication.

La bibliothèque prend en charge les comportements textuels standards, notamment white-space: normal, word-break: normal, overflow-wrap: break-word, ainsi qu'un mode optionnel pre-wrap qui préserve les espaces, tabulations et retours à la ligne.

Et ensuite

Le support du rendu côté serveur figure dans la feuille de route, ce qui permettrait d'effectuer les calculs de mise en page lors du build ou sur le serveur — réduisant davantage le travail côté client. La bibliothèque est écrite en TypeScript sans aucune dépendance, ce qui facilite son intégration dans tout projet web.

Source : Pretext sur GitHub