Pretext : mesurer du texte sans jamais toucher au DOM

Chaque fois que tu appelles getBoundingClientRect() ou que tu crées un élément fantôme pour mesurer une ligne, tu forces le navigateur à recalculer tout le layout. C'est lent, c'est fragile, et ça devient catastrophique dès que tu virtualises une liste ou que tu animes du texte frame par frame.

Pretext, publié par @_chenglou, implémente l'algorithme de line-breaking directement en JavaScript à partir des métriques de police. Pas de noeud DOM créé, pas de reflow déclenché, du calcul arithmétique pur.

Pretext (bleu) superposé au layout CSS natif (rouge), les écarts révèlent les limites de ce que le navigateur calcule.

Pourquoi les deux approches classiques ne suffisent pas

Mesurer du texte côté web, c'est historiquement une misère. Tu crées un élément DOM hors-écran, tu l'injectes, tu lis sa taille, tu le supprimes : coût d'un reflow complet à chaque mesure. Ou tu utilises canvas.measureText(), rapide mais limité à la largeur, sans gestion des sauts de ligne, sans i18n correct.

Dans les deux cas : des listes virtualisées qui scintillent, des animations de texte qui sautent, des interfaces qui devinent les hauteurs au lieu de les calculer.

L'API

L'API tourne autour de deux étapes : prepare() et layout().

import { prepare, layout } from 'pretext'

// Une fois, au chargement de la police
const font = await prepare({
  fontFamily: 'Inter',
  fontSize: 16,
  lineHeight: 1.5,
})

// Autant de fois que tu veux, sans coût DOM
const result = layout(font, 'Mon texte dynamique', { maxWidth: 320 })
console.log(result.lines)   // tableau de lignes avec positions exactes
console.log(result.height)  // hauteur totale calculée

prepare() charge les métriques de la police une seule fois. layout() est ensuite du pur calcul synchrone, appelable à chaque frame sans remords.

Pour une liste de 10 000 items avec du texte variable, ça change complètement l'équation de la virtualisation : tu connais la hauteur de chaque ligne avant de la rendre.

Ce que ça débloque

Les cas d'usage documentés sur learn-pretext.com couvrent un spectre plus large qu'on ne l'anticipe :

• Listes virtualisées : hauteurs calculées avant render, plus de sauts au scroll.
• Canvas rendering : Pretext te donne les positions exactes de chaque glyphe, tu dessines directement sur le canvas sans passer par le DOM.
• Typographie cinétique : animer du texte mot par mot ou caractère par caractère avec des positions précises, à 60fps.
• i18n : gestion correcte des scripts RTL et des ligatures, là où canvas.measureText() lâche prise.

La démo la plus absurde générée par la communauté : Prematrix, Pretext branché sur du WebGL avec un environnement Matrix navigable en WASD. Aucune utilité pratique, et c'est exactement le genre de truc qui prouve que la primitive est solide.

Commencer en 10 minutes

Le diff tool permet de comparer visuellement le résultat Pretext avec le rendu CSS natif, utile pour calibrer les cas limites sur tes polices custom.

L'écosystème

39 900 stars GitHub en quelques semaines, un awesome-pretext communautaire, un site d'apprentissage complet sur learn-pretext.com avec des sections dédiées à l'accessibilité et aux performances.

Le problème de mesure de texte est l'un de ces problèmes que chaque dev front-end senior a rencontré, bricolé, et jamais vraiment résolu. Pretext l'attaque à la racine plutôt que de le contourner.