Fini les hacks CSS pour centrer du texte : cet outil fait tout en pur JS et en 500 fois plus vite (et c’est en open source)

Imaginez pouvoir anticiper exactement la taille d’un paragraphe de texte sur une page web, sans forcer le navigateur à tout recalculer à chaque fois. C’est la promesse de Pretext, une bibliothèque TypeScript imaginée par Cheng Lou, vétéran de React et Midjourney. Annoncée fin mars 2026, elle explose déjà sur GitHub avec plus de 18 000 étoiles et suscite l’enthousiasme de figures comme Guillermo Rauch de Vercel. Pour les geeks devs, c’est une arme fatale contre les lags dans les interfaces text-heavy, des feeds infinis aux bulles de chat dynamiques.

Les pièges invisibles du texte sur le web

Dans le monde du développement front-end, le texte semble anodin, pourtant il représente un défi majeur. Les navigateurs gèrent des complexités folles : ligatures, emojis multicolores, scripts mixtes comme coréen et arabe RTL, ou langues sans espaces comme le japonais. Ajoutez des polices variables et des règles de césure spécifiques, et mesurer la hauteur d’un bloc devient un calcul infernal réservé aux moteurs internes des browsers.

Traditionnellement, pour connaître la taille d’un élément textuel, on l’insère dans le DOM, on applique le CSS, puis on lit les dimensions via getBoundingClientRect(). Problème : chaque requête déclenche un reflow, un recalcul coûteux du layout qui peut faire chuter les performances à 60 fps, voire moins sur mobile. Dans un contexte geek, pensez aux galeries masonry pour comics ou aux logs de raids en MMO : des milliers d’éléments variables, et hop, l’interface rame. Les devs contournent avec des estimations ou des hauteurs fixes, au prix de la précision et de la fluidité.

Le fonctionnement ingénieux de Pretext

Cheng Lou a contourné ces limites en recréant un moteur de mesure purement JavaScript. Pretext utilise d’abord le canvas du navigateur pour des mesures précises de chaque glyphe – le font engine natif sert de référence absolue. Ensuite, une phase de préparation unique segmente le texte (mots, espaces, scripts) et calibre empiriquement sur des milliers de cas via des IA comme Claude Code et Codex, alignant le résultat sur Chrome, Safari et Firefox.

Une fois prêt (environ 1 ms pour 500 textes), la fonction layout prédit hauteurs et sauts de ligne en arithmétique pure, sans DOM. Résultat : jusqu’à 500 fois plus rapide sur les chemins chauds, avec un bundle de quelques ko seulement. Disponible via npm install @chenglou/pretext, elle gère tout : emojis plateforme-spécifiques, kerning, et même ASCII art en polices variables. Les démos de Lou, comme une virtualisation de 100 000 boîtes texte à 120 fps, impressionnent.

Perspectives pour les créateurs geeks et limites à surveiller

Pour les fans de tech et gaming, Pretext ouvre des portes : bulles de chat auto-ajustées pour apps Discord-like, layouts magazine responsives pour sites manga, ou texte canvas dans Three.js pour HUDs de jeux web. Des intégrations émergent déjà, comme Textura (Pretext + Yoga de Meta) ou Knuth-Plass pour justification LaTeX-like, réduisant les ‘rivières’ dans les paragraphes longs. La communauté s’enflamme – shadcn et Ryan Florence testent, HN débat de ses implications pour l’IA UI.

Côté ombre, la parité parfaite avec les browsers n’est pas gravée dans le marbre, surtout pour cas edge ou évolutions futures. Si rendu en canvas pur, l’accessibilité (sélection, screen readers) exige des ajouts manuels. Mais pour des projets hybrides DOM/canvas, c’est un gain net en perf et créativité.

Pretext redonne le contrôle aux devs, transformant un bottleneck historique en brique Lego. À intégrer dans vos prochains dashboards rolistes ou wikis pop culture pour des scrolls buttersmooth.