Pretext.js
Mesure de texte qui ne touche jamais le DOM.
Pretext mesure et positionne le texte multiligne entièrement par calcul arithmétique — pas de getBoundingClientRect, pas de reflow, pas de thrashing. Rapide dès le premier appel. Instantané pour chaque appel suivant.
Pourquoi Pretext existe : chaque mesure DOM est un piège de performance.
Chaque fois que votre JavaScript appelle getBoundingClientRect(), offsetHeight ou scrollHeight sur un nœud DOM, le navigateur doit mettre en pause l'exécution du script, traiter tous les changements de style en attente et effectuer un passage de rendu complet — juste pour répondre à votre question sur la taille d'une boîte.
Cela s'appelle le reflow synchrone forcé, et c'est l'une des opérations les plus coûteuses qu'un navigateur puisse effectuer. Dans une boucle serrée — par exemple, mesurer mille éléments dans une liste à défilement virtuel — cela provoque du thrashing : le navigateur alterne entre le rendu et l'exécution JavaScript des centaines de fois par frame, mettant même le matériel moderne à genoux.
La cruelle ironie est que la plupart du temps, vous n'avez besoin que d'un nombre : quelle sera la hauteur en pixels de ce texte, pour cette largeur de conteneur ? Il n'y a aucune raison pour que cette question nécessite de toucher le DOM. Pretext existe pour prouver exactement cela.
// Force le layout du navigateur à chaque itération const heights = items.map((item) => { const el = createElement(item.text); document.body.appendChild(el); // ← force le reflow ici const h = el.getBoundingClientRect().height; reflow ! document.body.removeChild(el); return h; }); // 1000 éléments = 1000 reflows = ~94ms ≈ 6 frames perdues
Comment fonctionne Pretext : mesurer une fois, mettre en page pour toujours.
Faites glisser le séparateur pour comparer l'approche DOM traditionnelle avec Pretext. L'une déclenche un reflow à chaque appel. Pretext utilise de l'arithmétique pure.
import { prepare, layout } from '@chenglou/pretext' // prepare() s'exécute une seule fois — utilise Canvas const prepared = prepare( 'The quick brown fox jumped.', '16px Inter' ); // layout() est de l'arithmétique pure const { height, lineCount } = layout( prepared, containerWidth, lineHeight ); pas de reflow // 1000 éléments = 0 reflows = ~0.05ms // 500x plus rapide, zéro accès DOM
// Force le layout du navigateur à chaque itération const heights = items.map((item) => { const el = createElement(item.text); document.body.appendChild(el); // ← force le reflow ici const h = el.getBoundingClientRect().height; reflow ! document.body.removeChild(el); return h; }); // 1000 éléments = 1000 reflows = ~94ms // ≈ 6 frames perdues à 60fps
Segmenter le texte
Normaliser les espaces, appliquer les règles de retour à la ligne Unicode et diviser la chaîne en unités mesurables en utilisant la segmentation de texte native du navigateur.
Mesurer avec Canvas
Passer chaque segment par Canvas measureText() pour obtenir les largeurs réelles des glyphes du moteur de police. Les résultats sont mis en cache.
Pretext utilise de l'arithmétique pure
Étant donné une largeur de conteneur, calculer les retours à la ligne en additionnant les largeurs des segments. Multiplier le nombre de lignes par la hauteur de ligne. Retourner la hauteur. Pas de DOM, jamais.
Fonctionnalités de Pretext : conçu pour les cas critiques en performance.
Pretext est conçu pour les développeurs qui construisent des interfaces complexes et riches en texte où la mesure DOM traditionnelle est devenue un goulot d'étranglement. Voici les fonctionnalités qui le rendent prêt pour la production.
Zéro lecture DOM
Dans Pretext, après prepare(), chaque appel layout() est de l'arithmétique pure. Pas de getBoundingClientRect, pas d'offsetHeight, pas de reflow synchrone forcé — jamais.
Métriques de police réelles
Pretext mesure les largeurs de glyphes en utilisant le moteur de police Canvas natif du navigateur, pas des heuristiques ou des tables de correspondance. Le résultat correspond à ce que le navigateur rendrait réellement.
Multilingue par conception
Pretext supporte entièrement les systèmes d'écriture CJK, arabe, hébreu, thaï, hindi et coréen, y compris la segmentation Unicode correcte et le traitement du texte bidirectionnel.
TypeScript natif
Écrit en TypeScript de A à Z. Types précis pour chaque fonction, paramètre et valeur de retour — pas de packages @types nécessaires, pas de gymnastique de types.
Handles prepared réutilisables
Un seul appel prepare() couvre toutes les largeurs de conteneur. Calculez les hauteurs pour mobile, tablette et desktop en trois opérations arithmétiques à partir du même handle.
Zéro dépendance runtime
Pas de packages externes, pas de polyfills, pas de surprises dans votre bundle. Pretext s'appuie entièrement sur les API standard du navigateur disponibles dans tout environnement moderne.
Pretext dans des scénarios réels.
Pretext excelle là où la mesure DOM traditionnelle atteint ses limites. Ces exemples montrent comment Pretext résout de vrais défis de production — du défilement virtuel aux interfaces de chat multilingues.
Défilement virtuel à hauteur variable
Rendu d'une liste de 10 000 éléments avec des hauteurs de texte variables, calculées entièrement sans lectures DOM. Défilement fluide à 60fps sur tout appareil.
Pretext pour les bulles de chat IA
Utilisez Pretext pour pré-calculer les hauteurs des bulles pour les réponses IA en streaming avant qu'elles ne finissent de se rendre. Éliminez complètement les décalages et les sauts dans les interfaces de chat.
Flux de contenu multilingue
Un flux social mélangeant chinois, arabe, coréen et latin dans une seule liste virtualisée. Chaque script mesuré avec précision, sans traitement spécial requis.
Construit avec Pretext.
Démos créatives de la communauté — drum machines de texte, simulations de fluides, tableaux blancs collaboratifs et plus encore. Découvrez ce que les développeurs construisent avec Pretext.
Effet d'écriture sur sable
Un magnifique effet d'écriture sur sable construit avec Rive — les caractères apparaissent comme dessinés dans le sable avec une texture et une animation réalistes.
Visualisation géométrique de texte
Une visualisation géométrique de texte saisissante montrant les possibilités de typographie créative avec le moteur de layout Pretext.
Habillage de texte autour d'objet 3D
Le texte s'enroule de manière fluide autour d'un objet 3D gaussian splat en temps réel — combinant le layout Pretext avec le rendu 3D.
Installez Pretext en trois minutes.
Pretext est publié sur npm et inclut des déclarations TypeScript complètes. Installez-le avec votre gestionnaire de paquets préféré, importez les deux fonctions dont vous avez besoin, et vous êtes prêt à mesurer du texte sans toucher le DOM.
import { prepare, layout } from '@chenglou/pretext' // Étape 1 : prepare une fois pour un couple texte+police const handle = prepare( 'Hello, Pretext — no reflow needed.', '16px "Inter"' ); // Étape 2 : layout à n'importe quelle largeur, instantanément const { height, lineCount } = layout( handle, 400, // largeur du conteneur en px 24 // hauteur de ligne en px ); console.log(height); // → 48 console.log(lineCount); // → 2 // Étape 3 : réutilisez le handle pour différentes largeurs const narrow = layout(handle, 240, 24); // → 3 lignes
Blog Pretext.
Analyses approfondies sur le rendu de texte, les performances des navigateurs et comment Pretext résout les problèmes que les développeurs rencontrent chaque jour — qu'ils connaissent la cause profonde ou non.
Signification de Pretext : qu'est-ce que Pretext et pourquoi les développeurs l'adorent
Que signifie Pretext ? De ses racines latines au moteur de mise en page de texte JavaScript le plus rapide — découvrez comment Pretext calcule le layout avant le rendu, avec des showcases communautaires et des témoignages de développeurs.
Chenglou Pretext : l'histoire derrière le moteur de layout de texte JavaScript le plus rapide
Comment Cheng Lou est passé de l'équipe core React à la création de Pretext chez Midjourney — un moteur de layout de texte JavaScript pur qui est 600x plus rapide que la mesure DOM.
Pretext NPM : comment installer et utiliser la bibliothèque JavaScript & TypeScript
Installez Pretext depuis npm et commencez à mesurer la mise en page de texte en JavaScript et TypeScript. Guide complet de l'API, exemples de frameworks et cas d'utilisation réels.
Essayez Pretext dès aujourd'hui.
Que vous construisiez une liste à défilement virtuel, un éditeur de code, une interface de chat IA, ou quoi que ce soit d'autre où la hauteur du texte compte — Pretext vous donne des mesures précises sans coût de performance.