Aller au contenu

Pretext : moteur de text layout sans DOM par Cheng Lou

Resume

Pretext (@chenglou/pretext) est un moteur de mesure et layout de texte pour le web qui fonctionne sans toucher au DOM. Quelques KB, 500x plus rapide que getBoundingClientRect(), mesure via canvas.measureText() puis layout en arithmetique pure. API en 2 phases : prepare() (mesure unique ~19ms pour 500 textes) puis layout() (~0.09ms par appel). Supporte le multiligne, le bidirectionnel (arabe + chinois + emoji), la virtualisation a 120fps de centaines de milliers de text boxes, les chat bubbles shrinkwrapped, le multi-colonnes responsive. 14.8k stars, 265 commits, MIT. Par Cheng Lou — l'ingenieur derriere react-motion (21K stars), ReasonML, et le front-end de Messenger chez Meta, aujourd'hui chez Midjourney.

Le tweet original a fait 18M de views, 57K likes, 55K bookmarks — le post tech le plus viral de la semaine.

Analyse critique

Ce qui est solide : - Le probleme est reel et ancien : la mesure de texte dans le navigateur declenche des layout reflows qui sont parmi les operations les plus couteuses du web. Tout developpeur front-end qui a fait de la virtualisation ou du responsive dynamique a bute la-dessus. - L'approche est elegante : mesurer une fois via canvas (pas de DOM), stocker les largeurs, puis layout en arithmetique pure. Ca decouple completement la mesure du rendu. - Le pedigree de l'auteur (react-motion, ReasonML, Messenger, Midjourney) donne de la credibilite. Ce n'est pas un side project — c'est un outil forge par quelqu'un qui gere le front-end d'un produit a des millions d'utilisateurs. - L'API est minimaliste et bien pensee : prepare() + layout() pour le cas simple, layoutNextLine() avec largeur variable par ligne pour les cas avances. - Support multilangue robuste (CJK, RTL, emoji) — pas juste ASCII.

Detail methodologique remarquable : Cheng Lou dit avoir construit le moteur en montrant a Claude Code et Codex le "ground truth" des navigateurs et en les faisant mesurer et iterer. C'est du dev assiste par IA sophistique : pas du vibe coding (prompt → code → merge), mais un LLM qui itere contre une source de verite objective (le rendu navigateur reel). Le LLM genere des hypotheses, le navigateur les valide — boucle courte.

Ce qui est a nuancer : - Ne gere pas les ligatures complexes, text-decoration, ni les CSS typographiques avancees. C'est un moteur de mesure, pas un moteur de rendu complet. - system-ui non fiable sur macOS — il faut nommer la police explicitement. - Le server-side rendering est "prevu" mais pas encore la.

Pertinence ProbatioVault

Impact modere, specifiquement pour ProbatioVault-site (Astro).

  • Generation de layouts dynamiques : le site Astro pourrait utiliser Pretext pour des layouts texte avances (FAQ responsive, comparatifs multi-colonnes, temoignages avec chat bubbles) sans les penalites de performance du DOM.
  • Virtualisation : si le site a des pages avec beaucoup de contenu textuel (documentation legale, conditions d'utilisation), la virtualisation a 120fps sans estimation de hauteur est un vrai gain.
  • Rendu Canvas/SVG : pour des elements visuels type infographies ou schemas explicatifs qui melent texte et graphiques.
  • Compatibilite Astro : Pretext est une lib JS pure, pas de framework dependency — s'integre facilement dans un composant Astro client-side.

A evaluer concretement quand la prochaine story site (PD-226+) sera en cours.