Moteur de texte JavaScript
La bibliothèque Pretext
La bibliothèque Pretext est le moyen le plus rapide de mesurer du texte multiligne sur le web. Cette bibliothèque de mesure de texte en JavaScript pur calcule les retours à la ligne, les hauteurs et la mise en page sans toucher le DOM — environ 600× plus rapide que la mesure traditionnelle du navigateur. La bibliothèque Pretext fonctionne dans tous les frameworks, tous les navigateurs et toutes les langues.
Présentation
Qu'est-ce que la bibliothèque Pretext ?
La bibliothèque Pretext est un moteur de mesure de texte en JavaScript/TypeScript pur créé par Cheng Lou, ancien membre de l'équipe core React, maintenant chez Midjourney. Contrairement aux approches traditionnelles qui nécessitent que le navigateur rende le texte dans le DOM avant de pouvoir le mesurer, la bibliothèque Pretext divise la mise en page du texte en deux phases légères — ce qui en fait la bibliothèque de mesure de texte la plus rapide disponible pour JavaScript.
La première phase de la bibliothèque Pretext est la préparation. Vous appelez prepare() une fois avec votre texte et votre police. La bibliothèque Pretext segmente le texte selon les règles Unicode et mesure la largeur de chaque glyphe via l'API Canvas measureText(). Cela prend généralement 0,1–1ms selon la longueur du texte.
La deuxième phase est la mise en page. Vous appelez layout() avec une largeur de conteneur et une hauteur de ligne. La bibliothèque Pretext parcourt les largeurs de segments mises en cache avec de l'arithmétique pure — pas d'accès DOM, pas de reflow forcé. Un seul appel layout() dans la bibliothèque Pretext prend ~0,001ms, assez rapide pour des milliers d'appels par frame. Le handle préparé est réutilisable : calculez les hauteurs pour mobile, tablette et desktop à partir du même handle en trois opérations.
$ npm install @chenglou/pretext import { prepare, layout } from '@chenglou/pretext' const prepared = prepare('Your text', '16px Inter') const { height, lineCount } = layout(prepared, 400, 24)
Pourquoi cette bibliothèque
Fonctionnalités de la bibliothèque Pretext
La bibliothèque Pretext a été conçue de A à Z pour la performance et l'ergonomie développeur. Voici ce qui fait de la bibliothèque Pretext le meilleur choix pour la mesure de texte dans les applications JavaScript.
Zéro accès DOM
La bibliothèque Pretext ne lit ni n'écrit jamais dans le DOM pendant la mise en page. Après la mesure Canvas initiale, chaque opération suivante est de l'arithmétique pure. Cela élimine le layout synchrone forcé, le reflow et le layout thrashing — les trois plus grands tueurs de performance dans les applications riches en texte.
Indépendant du framework
La bibliothèque Pretext est un module JavaScript autonome sans dépendances. Importez-le dans React, Vue, Svelte, Angular ou du JavaScript pur. La bibliothèque Pretext fonctionne de manière identique dans tout environnement — côté client, côté serveur ou Web Workers.
Support Unicode & i18n complet
La bibliothèque Pretext utilise Intl.Segmenter pour une segmentation de texte consciente d'Unicode. CJK, arabe, hébreu, thaï, coréen et texte multi-scripts sont tous mesurés avec précision avec la même API. La bibliothèque Pretext gère le texte bidirectionnel et les scripts complexes sans traitement spécial.
Layout sub-microseconde
Chaque appel layout() dans la bibliothèque Pretext prend environ 0,001ms — arithmétique pure sur les largeurs de glyphes en cache. Vous pouvez appeler layout() des milliers de fois par frame d'animation. Cela rend la bibliothèque Pretext idéale pour le reflow en temps réel, le redimensionnement responsive et la typographie interactive.
Lignes à largeur variable
La bibliothèque Pretext supporte le contrôle de largeur par ligne via layoutNextLine(). Le texte peut couler autour d'obstacles, suivre des formes irrégulières ou s'adapter à des mises en page éditoriales complexes. C'est la même technique utilisée dans l'habillage de texte style magazine et les projets de typographie créative construits avec la bibliothèque Pretext.
TypeScript-first
La bibliothèque Pretext est écrite en TypeScript avec des définitions de types complètes. Chaque fonction, paramètre et type de retour est fortement typé. L'autocomplétion IDE et la vérification de types fonctionnent immédiatement — aucun package @types nécessaire avec la bibliothèque Pretext.
Comparaison de performance
Bibliothèque Pretext vs mesure DOM
La mesure DOM traditionnelle crée des éléments invisibles, rend le texte, lit la hauteur calculée, puis supprime l'élément. La bibliothèque Pretext élimine tout ce cycle. Voici comment la bibliothèque Pretext se compare aux approches standard.
| Aspect | Mesure DOM | Bibliothèque Pretext |
|---|---|---|
| Vitesse par mesure | 0,5–2ms (reflow forcé) | ~0,001ms (arithmétique pure) |
| Accès DOM requis | Oui — crée des éléments cachés | Non — zéro lecture/écriture DOM |
| Layout thrashing | Oui — déclenche un reflow navigateur | Jamais — aucun reflow possible |
| Support SSR / Web Worker | Non — nécessite le DOM navigateur | Oui — fonctionne partout |
| Taille du bundle | Intégré au navigateur (mais lent) | ~15KB gzippé, 0 dépendances |
| Plusieurs largeurs du même texte | Re-rendu pour chaque largeur | Réutiliser le handle — instantané |
| Support Unicode & CJK | Dépend du rendu navigateur | Intl.Segmenter — précis |
Applications
Cas d'utilisation de la bibliothèque Pretext
La bibliothèque Pretext excelle partout où la mesure de texte est un goulot d'étranglement. Du défilement virtuel à la typographie créative, voici les façons les plus courantes dont les développeurs utilisent la bibliothèque Pretext en production.
Défilement virtuel
Pré-calculez les hauteurs de milliers d'éléments de liste à hauteur variable avec la bibliothèque Pretext. Aucun élément DOM nécessaire. Fonctionne avec React Virtuoso, TanStack Virtual et toute bibliothèque de virtualisation pour un défilement à 60fps.
Interfaces Chat & IA
Prédisez les hauteurs des bulles de message avec la bibliothèque Pretext avant que les réponses IA en streaming ne finissent de se rendre. Éliminez les décalages de layout et les sauts. Emballage serré des bulles pour minimiser l'espace perdu sur mobile.
Tableaux de bord & tableaux de données
Dimensionnez les tooltips de graphiques, les cellules de tableau et les layouts de cartes avec la bibliothèque Pretext — pas de reflow synchrone forcé. Maintenez 60fps même avec des centaines d'éléments texte visibles mis à jour en temps réel.
Layouts responsives
Utilisez la bibliothèque Pretext pour calculer les hauteurs de texte à plusieurs breakpoints à partir d'un seul appel prepare(). Mobile, tablette et desktop — trois opérations arithmétiques à partir du même handle, zéro reflow.
Typographie créative
Construisez des layouts éditoriaux où le texte coule autour d'obstacles, des mises en page multi-colonnes style magazine ou de l'art ASCII piloté par particules. La bibliothèque Pretext vous donne un contrôle par ligne que CSS seul ne peut pas offrir.
Contenu multilingue
La bibliothèque Pretext mesure CJK, arabe, hébreu, thaï, coréen et texte multi-scripts avec la même API à deux fonctions. La segmentation Unicode et le texte bidirectionnel sont gérés automatiquement.
API
Référence API de la bibliothèque Pretext
La bibliothèque Pretext expose une API petite et ciblée. Chaque fonction dans la bibliothèque Pretext sert un objectif spécifique — préparation ou mise en page. Voici la référence complète des fonctions.
| Fonction | Phase | Objectif |
|---|---|---|
| prepare(text, font) | Préparation | Segmenter et mesurer le texte. Retourne un handle opaque. |
| prepareWithSegments(text, font) | Préparation | Comme prepare(), mais expose les données de segments pour usage avancé. |
| layout(prepared, width, lineHeight) | Mise en page | Calculer le nombre de lignes et la hauteur totale. Arithmétique pure. |
| layoutWithLines(prepared, width, lineHeight) | Mise en page | Comme layout(), plus le texte et la largeur de chaque ligne. |
| layoutNextLine(prepared, cursor, width) | Mise en page | Mettre en page une ligne à la fois. Largeur variable par ligne. |
| walkLineRanges(prepared, width, cb) | Mise en page | Itérer les limites de lignes sans construire de chaînes. |
Démarrage rapide
Premiers pas avec la bibliothèque Pretext
L'installation de la bibliothèque Pretext ne prend qu'une commande. La bibliothèque Pretext est livrée en un seul package npm sans dépendances. Suivez ces trois étapes pour commencer à utiliser la bibliothèque Pretext dans votre projet.
Installer la bibliothèque Pretext
Ajoutez la bibliothèque Pretext à votre projet avec npm, pnpm ou yarn. Le package est @chenglou/pretext — environ 15KB gzippé, zéro dépendance.
Préparer votre texte
Appelez prepare(text, font) une fois par couple texte+police. La bibliothèque Pretext segmente le texte et mesure les largeurs de glyphes via Canvas. Conservez le handle pour le réutiliser dans plusieurs appels layout.
Mettre en page à n'importe quelle largeur
Appelez layout(handle, width, lineHeight) pour obtenir la hauteur et le nombre de lignes. La bibliothèque Pretext calcule cela avec de l'arithmétique pure en ~0,001ms. Réutilisez le même handle pour différentes largeurs de conteneur.
Commencez avec la bibliothèque Pretext
La bibliothèque Pretext est open source, sous licence MIT et prête pour la production. Essayez-la dans le playground interactif, explorez les démos communautaires ou plongez dans le code source sur GitHub. Rejoignez des milliers de développeurs qui utilisent déjà la bibliothèque Pretext pour une mesure de texte rapide et sans DOM.
La bibliothèque Pretext est créée par Cheng Lou. En savoir plus sur l'écosystème GitHub Pretext.