Mesurer précisément la taille d’un texte sur le web a toujours été un défi technique majeur. Un nouvel algorithme imaginé par Cheng Lou pourrait bien changer la donne… et transformer en profondeur le développement front-end.
À première vue, afficher du texte semble trivial. Pourtant, c’est l’un des problèmes les plus complexes du web moderne.
- Un simple “caractère” peut cacher une réalité bien plus complexe :
- Emojis composés (👨👩👧👦)
- Drapeaux (🇫🇷)
- Variantes de peau
- Ligatures typographiques (fi, fl)
- Écritures non latines
- À cela s’ajoutent les règles linguistiques :
- Français / anglais → découpe par espaces
- Chinois / japonais → pas d’espaces
- Arabe → écriture RTL (droite → gauche)
- Certaines langues → règles de césure spécifiques
- Et enfin… le navigateur entre en scène.
Le rôle (coûteux) du navigateur : DOM, CSS et ...
Pour afficher une page, le navigateur suit un pipeline complexe :
- HTML → transformation en DOM
- Application du CSS
- Calcul du layout (positions, tailles, retours à la ligne)
- Rendu à l’écran
- Le problème :
Dès qu’un développeur veut mesurer un texte, il déclenche souvent un recalcul → le fameux reflow.
-Résultat :
- Performances dégradées
- Interfaces moins fluides
- Code complexe et fragile
Les solutions actuelles (et leurs limites)
Jusqu’ici, deux approches existaient :
1. Mesurer via le DOM
✔ Simple
❌ Déclenche des reflows coûteux
2. Recréer le moteur de layout
✔ Contrôle total
❌ Complexité extrême (langues, glyphes, typographie…)
- Conclusion : aucun compromis satisfaisant.
La solution : un algorithme qui contourne le navigateur
C’est ici qu’intervient l’innovation de Cheng Lou.
Son projet, Pretext, propose une approche radicale :
-Sortir le calcul du texte du navigateur.
Comment ça fonctionne ?
-
Pré-calcul du texte
- Mesure via canvas
- Analyse des glyphes
-
Simulation du layout en TypeScript
- Calcul des retours à la ligne
- Détermination de la hauteur
- Aucun accès au DOM
Résultat :
- Pas de reflow
- Calcul instantané
- Contrôle total
Jusqu’à 500 fois plus rapide ?
Le développeur annonce des performances pouvant atteindre ×500.
Attention toutefois :
- Ce n’est pas une comparaison directe
- Le navigateur fait beaucoup plus (layout complet)
- Le gain vient surtout de l’évitement du DOM
En réalité, c’est un changement de paradigme :
On ne demande plus au navigateur → on calcule soi-même.
Des possibilités inédites pour le front-end
Cette approche ouvre la porte à des interfaces bien plus avancées :
Cas d’usage concrets :
- Bulles de chat parfaitement ajustées
- Layouts éditoriaux type magazine
- Texte autour de formes complexes
- Virtualisation massive de contenu
- ASCII art avec polices proportionnelles
-Bref : plus de liberté, moins de hacks CSS.
Les limites à ne pas ignorer
Malgré son potentiel, Pretext n’est pas magique :
Précision imparfaite
Les moteurs des navigateurs restent ultra sophistiqués.
Accessibilité
Si tout passe en canvas :
- Pas de sélection de texte
- Pas de lecture vocale native
- Navigation clavier complexe
Compatibilité
Différences selon :
- OS
- polices
- navigateurs
Vers une nouvelle ère du web ?
Pretext pourrait marquer un tournant :
-Redonner aux développeurs le contrôle du layout
-Réduire la dépendance au moteur du navigateur
-Accélérer les interfaces complexes
Mais une question reste ouverte :
Le web doit-il rester déclaratif… ou devenir de plus en plus programmatique ?
L’algorithme de Cheng Lou ne se contente pas d’améliorer les performances.
Il propose une vision différente du web :
- plus contrôlable
- plus prévisible
- potentiellement plus rapide
- S’il tient ses promesses, il pourrait bien redéfinir la manière dont nous concevons les interfaces utilisateur.