Comment la largeur du texte est-elle mesurée ?

La largeur du texte fait référence à l'espace horizontal en pixels qu'une chaîne de caractères occupe lorsqu'elle est rendue avec une police, une taille et un poids spécifiques. Contrairement au nombre de caractères, la largeur en pixels dépend de l'espacement proportionnel de chaque glyphe — la lettre « W » est beaucoup plus large que « i » dans la plupart des polices. La mesure précise de la largeur du texte est importante pour la mise en page de l'interface utilisateur, la troncature des étiquettes, le rendu dynamique du canevas et l'ajustement des chaînes dans des conteneurs de largeur fixe.

Les navigateurs exposent la méthode measureText() de l'API HTML5 Canvas, qui calcule la largeur du texte rendu sans l'afficher à l'écran. En dessinant sur un contexte de canevas hors écran, une mesure précise au sous-pixel peut être obtenue pour toute combinaison de famille de police, de taille et de poids.

Description de l'outil

Cet outil calcule la largeur en pixels d'une ou deux chaînes de texte en utilisant l'API Canvas. Sélectionnez une famille de polices, définissez la taille et le poids de la police, et voyez instantanément la largeur en pixels rendue. Lorsque deux chaînes sont saisies, une vue de comparaison affiche la différence absolue et le rapport de largeur entre elles.

Fonctionnalités

  • Supporte toutes les polices système sans risque pour le web et les fichiers de polices personnalisées téléchargés (TTF, OTF, WOFF, WOFF2)
  • Comparez deux chaînes à la fois avec des statistiques de différence et de rapport
  • Taille de police ajustable de 1 à 256 px et les neuf valeurs de poids de police standard

Comment ça marche

La largeur est mesurée en utilisant l'API CanvasRenderingContext2D.measureText() du navigateur. Un élément <canvas> hors écran est créé, sa propriété de contexte 2D de police est définie pour correspondre à la famille, la taille et le poids sélectionnés, et measureText() retourne la largeur de la boîte englobante en pixels. Les polices personnalisées sont chargées dans le registre FontFace du navigateur avant la mesure afin que les résultats reflètent la police de caractères réelle.