# Mesurez la largeur exacte en pixels de n'importe quel texte
Votre texte déborde-t-il de son conteneur ? Besoin de connaître l'espace occupé par un titre avant de le rendre ? L'API Canvas du navigateur permet de mesurer la largeur exacte de n'importe quelle chaîne de texte avec une précision au pixel près, sans avoir à la rendre dans le DOM. # Pourquoi compter les caractères ne suffit pas
Les polices modernes sont proportionnelles : chaque glyphe a une largeur différente. Un "W" peut occuper trois fois plus de place qu'un "i". Le nombre de caractères ne vous dit rien sur l'espace visuel réel occupé par le texte. -
Design web : Évitez les débordements dans les boutons, étiquettes et cellules de tableau.
-
SEO : Les moteurs de recherche tronquent les titres en pixels, pas en caractères.
-
Canvas et PDF : Calculez la position exacte avant de dessiner du texte par programmation.
-
Infobulles et bulles : Dimensionnez dynamiquement les conteneurs selon le texte intérieur.
# Comment fonctionne la mesure avec Canvas
La méthode ctx.measureText() de l'API Canvas retourne un objet TextMetrics avec une propriété width reflétant la largeur en pixels CSS avec la police active. Cet outil configure le contexte avec votre police, taille, graisse et style avant de mesurer.
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '700 16px Inter, system-ui, sans-serif';
const width = ctx.measureText('Bonjour Monde').width; // ex. 74.5
# Confidentialité et traitement local
Tout le calcul s'effectue dans votre navigateur. Aucun texte, extrait de code ni donnée privée ne quitte votre appareil.
Polices Google Fonts
Pour mesurer une police Google Fonts avec précision, assurez-vous qu'elle est chargée sur la page ou installée sur votre système. Sinon le navigateur utilisera une police de substitution et le résultat variera.