● Numerama 📅 30/03/2026 à 15:55

Cybersécurité 👤 Lisa Imperatrice

🏷️ Tags : cert pm rag rte

Lecture Zen Résumer l'article Cheng Lou dévoile Pretext, un algorithme TypeScript qui reprend la mesure et la mise en page du texte côté client sans dépendre du DOM/CSS ni déclencher de reflow. En s’appuyant sur des mesures via canvas et un calage empirique sur les navigateurs, l’outil revendique des gains de performance allant jusqu’à « 500 fois ». La parité parfaite avec les moteurs typographiques des navigateurs reste à démontrer sur la durée et selon les plateformes. Cheng Lou dévoile Pretext, un algorithme TypeScript qui reprend la mesure et la mise en page du texte côté client sans dépendre du DOM/CSS ni déclencher de reflow. En s’appuyant sur des mesures via canvas et un calage empirique sur les navigateurs, l’outil revendique des gains de performance allant jusqu’à « 500 fois ». La parité parfaite avec les moteurs typographiques des navigateurs reste à démontrer sur la durée et selon les plateformes. Recevez tous les soirs un résumé de l’actu importante avec Le Récap’ Mesurer précisément la taille d’un texte sur le web est un casse-tête bien connu des développeurs. Un nouvel algorithme, développé par Cheng Lou, propose de contourner les limites du navigateur en reprenant le contrôle du layout directement en TypeScript — avec, à la clé, des gains de performance significatifs. Cet algorithme pourrait bien préfigurer l’avenir de l’ingénierie des interfaces utilisateur. Si vous êtes développeur front-end– ou simplement intéressé par le sujet –, vous savez à quel point le texte sur le web peut rapidement devenir un casse-tête. Ce qui est d’autant plus ironique que le web est, en grande majorité… composé de texte. Mais ces contraintes pourraient appartenir bientôt au passé. L’ingénieur logiciel Cheng Lou a annoncé, dans un message publié sur X le 28 mars 2026, avoir trouvé une solution. Concrètement, celui-ci a développé « un algorithme de mesure de texte rapide, précis et complet côté utilisateur », écrit en TypeScript pur et utilisable pour piloter la mise en page des pages web. Et ce, sans dépendre du CSS pour le layout du texte et en s’affranchissant des mesures DOM (et donc du reflow). Cheng Lou a développé cet algorithme de mesure de texte. // Source : @_chenglou sur X Pourquoi le texte sur une page web est-il un vrai casse-tête ? Avant toute chose, il faut comprendre pourquoi le texte est un véritable casse-tête sur le web. Un « caractère » n’est pas toujours une lettre simple : il y a les emojis, les drapeaux, les variantes de couleur de peau, les ligatures, les écritures cursives… Tout cela fait que la largeur visuelle ne correspond pas simplement au nombre de caractères. Ensuite, les langues n’ont pas les mêmes règles : en français ou en anglais, on coupe aux espaces ; en chinois ou en japonais, il n’y a pas d’espace entre les mots. D’autres langues ont des règles de coupure très spécifiques, sans parler des écritures qui peuvent se lire de droite à gauche ou verticalement. Le navigateur applique en plus un moteur typographique sophistiqué (polices, kerning, césure, sens d’écriture mélangés) pour transformer du texte brut en glyphes affichés à l’écran. Résultat : savoir combien de place va prendre un paragraphe est un problème difficile, que seuls les moteurs internes des navigateurs résolvent correctement. Pour afficher une page, le navigateur transforme le HTML en DOM, un arbre en mémoire où chaque balise et chaque bout de texte devient un objet. Ensuite, il applique les règles CSS (police, taille, marges, largeur de colonne, etc.) pour calculer comment le texte se casse en lignes dans chaque bloc, leur largeur et hauteur, ainsi que la position de chaque élément sur la page. Ce calcul s’appelle le « layout ». À chaque modification ou lorsqu’on interroge certaines propriétés, le navigateur peut être obligé de recalculer tout ou partie de ce layout : c’est le fameux « reflow ». Et celui-ci est coûteux. Si un site le déclenche trop souvent — par exemple pour mesurer en permanence des blocs de texte –, les performances chutent et l’interface devient moins fluide. Pour un développeur, le besoin est simple : savoir à l’avance combien de place prendra un texte. Mais sur le web, cette question en apparence triviale est en réalité l’une des plus complexes à résoudre. Jusqu’ici, il n’existait que deux approches : Laisser le navigateur faire, puis mesurer : on insère un élément dans le DOM, on laisse le moteur casser les lignes, puis on lit la taille — au risque de déclencher un reflow. Reproduire soi-même la logique de mise en page du texte, ce qui implique de gérer les langues, les coupures, les emojis… un travail extrêmement complexe. Résultat : pour des interfaces avancées (colonnes éditoriales, texte autour de formes, viewers de documents, interfaces de chat sophistiquées), les développeurs accumulent des contournements DOM/CSS coûteux en performances — et souvent en créativité. En quoi consiste ce nouvel algorithme ? L’algorithme de Cheng Lou, regroupé dans sa bibliothèque Pretext, propose de reprendre la mise en page du texte côté JavaScript/TypeScript, au lieu de la laisser entièrement au navigateur. Pour construire son moteur, le développeur a d’abord pris les principaux navigateurs comme référence : il a observé comment ces derniers cassent le texte, sur des milliers de combinaisons de contenus, de polices et de largeurs de colonnes. L’occlusion (virtualisation) de centaines de milliers de zones de texte, chacune de hauteur différente, sans mesure du DOM. // Source : Cheng Lou Il a ensuite utilisé des IA de programmation (Claude Code, Codex) pour générer et affiner l’algorithme, en le confrontant en continu au comportement réel des navigateurs. Une approche presque expérimentale : plutôt que de reproduire théoriquement un moteur typographique, il s’agit ici d’en apprendre les règles en observant ses résultats. Son outil fonctionne ensuite en deux temps. Il prépare d’abord le texte une fois pour toutes (découpage et mesure précise via un canvas), puis recalcule à la volée la manière dont ce texte se casse en lignes, en pur TypeScript, sans interroger le DOM. Concrètement, Pretext ne demande presque jamais « combien mesure cette boîte ? » au navigateur : il mesure le texte via un canvas, corrige ponctuellement certains cas (notamment certains emojis), puis ne fait plus que des calculs pour déterminer la hauteur des paragraphes. Le développeur évoque des performances pouvant aller jusqu’à « 500 fois plus rapides », tout en reconnaissant que la comparaison est biaisée. En réalité, Pretext ne fait pas la même chose que le moteur de layout du navigateur, qui calcule la mise en page. Il évite surtout les allers-retours coûteux avec ce dernier. Le gain ne vient donc pas d’un code intrinsèquement plus rapide, mais d’un changement complet d’approche. On ne demande plus au navigateur « combien mesure ce bloc de texte ? » — on le calcule directement, à partir de données déjà disponibles. Une approche prometteuse Cette approche ouvre la voie à des interfaces plus précises, plus performantes et plus créatives. Elle permet notamment de créer des bulles de chat qui épousent exactement la taille du message, même sur plusieurs lignes, sans bricolage CSS. Elle rend aussi crédible une mise en page multi-colonnes façon magazine, mais entièrement responsive et recalculée en direct. Elle permet même de faire de l’ASCII art avec des polices non monospace, puisque chaque caractère est mesuré précisément. This little illuminated dragon is very happy about Pretext. He's too busy having fun to care about people's "hot takes" on how "it's not that special." (This little dragon also only works on desktop right now but maybe I'll do mobile later)https://t.co/k9FH6p1G0T https://t.co/8sxaxlssJ6 pic.twitter.com/wNhFk1ZBwM— River Marchand (@Riyvir) March 29, 2026 Ce contenu est bloqué car vous n’avez pas accepté les cookies et autres traceurs. Ce contenu est fourni par Twitter. Pour pouvoir le visualiser, vous devez accepter l’usage étant opéré par Twitter avec vos données qui pourront être utilisées pour les finalités suivantes : vous permettre de visualiser et de partager des contenus avec des médias sociaux, favoriser le développement et l’amélioration des produits d’Humanoid et de ses partenaires, vous afficher des publicités personnalisées par rapport à votre profil et activité, vous définir un profil publicitaire personnalisé, mesurer la performance des publicités et du contenu de ce site et mesurer l’audience de ce site (en savoir plus) En cliquant sur « J’accepte tout », vous consentez aux finalités susmentionnées pour l’ensemble des cookies et autres traceurs déposés par Humanoid et ses partenaires. Vous gardez la possibilité de retirer votre consentement à tout moment. Pour plus d’informations, nous vous invitons à prendre connaissance de notre Politique cookies. J’accepte tout Gérer mes choix Plus largement, elle simplifie de nombreux cas réputés pénibles en CSS : zones de texte auto-dimensionnées, accordéons dynamiques, centrage vertical de texte multi-lignes ou rendu typographique dans un canvas. « Le moteur est minuscule (quelques ko), conscient des particularités des navigateurs, et prend en charge toutes les langues nécessaires, y compris le coréen, l’arabe RTL (écriture de droite à gauche) et les emojis spécifiques à chaque plateforme », affirme Cheng Lou. Reste une limite importante : imiter le comportement des navigateurs ne garantit pas une correspondance parfaite dans tous les cas. Les moteurs de rendu intègrent des années d’optimisation et gèrent des subtilités typographiques extrêmement complexes, qui évoluent en permanence. De plus, sur le papier, Pretext ne remet pas en cause l’accessibilité dès lors que le texte reste rendu dans le DOM. En revanche, les usages les plus ambitieux — où tout est dessiné dans un canvas ou un moteur graphique maison — devront reconstruire une partie de l’accessibilité du web (sélection, lecture par synthèse vocale, navigation au clavier), un chantier loin d’être trivial. Une bibliothèque comme Pretext devra donc faire ses preuves sur le long terme, notamment face aux différences entre plateformes, polices ou langues. Mais si l’approche tient, elle pourrait changer en profondeur la manière dont le web gère le texte — en redonnant aux développeurs la main sur un terrain longtemps dominé par les navigateurs. À noter que Pretext est disponible comme bibliothèque open source sur GitHub, et peut être intégré à un projet web via npm. Toute l'actu tech en un clin d'œil Ajoutez Numerama à votre écran d'accueil et restez connectés au futur ! Installer Numerama Tous nos articles sont aussi sur notre profil Google : suivez-nous pour ne rien manquer ! Crédit photo de la une : Numerama / Cheng Lou Signaler une erreur dans le texte Ne plus voir cette pub Ne plus voir cette pub Claude Code codex css Github open-source

🔗 Lire l'article original 👁️ 0 lecture