We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

TextMetrics

Aller à :
  1. Propriétés
  2. Spécifications
  3. Compatibilité des navigateurs
  4. Voir aussi

L'interface TextMetrics représente la dimension d'un texte dans le canevas, tel que créée par la méthode CanvasRenderingContext2D.measureText().

Propriétés

TextMetrics.width Lecture seule
est un double donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte.
TextMetrics.actualBoundingBoxLeft Lecture seule
est un double donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété CanvasRenderingContext2D.textAlign, et le côté gauche du rectangle délimitant du texte donné.
TextMetrics.actualBoundingBoxRight Lecture seule
est un double donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété CanvasRenderingContext2D.textAlign, et le côté droit du rectangle délimitant du texte donné.
TextMetrics.fontBoundingBoxAscent Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut CanvasRenderingContext2D.textBaseline, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.
TextMetrics.fontBoundingBoxDescent Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut CanvasRenderingContext2D.textBaseline, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.
TextMetrics.actualBoundingBoxAscent Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut CanvasRenderingContext2D.textBaseline, et le haut du rectangle de délimitation utilisé pour restituer le texte.
TextMetrics.actualBoundingBoxDescent Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut CanvasRenderingContext2D.textBaseline, et  le bas du rectangle de délimitation utilisé pour restituer le texte.
TextMetrics.emHeightAscent Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété CanvasRenderingContext2D.textBaseline, et le haut du carré em dans la boîte de ligne.
TextMetrics.emHeightDescent Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété CanvasRenderingContext2D.textBaseline, et le bas du carré em dans la boîte de ligne.
TextMetrics.hangingBaseline Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété CanvasRenderingContext2D.textBaseline, et la ligne de base supérieure de la boîte de ligne.
TextMetrics.alphabeticBaseline Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété CanvasRenderingContext2D.textBaseline, et la ligne de base alphabétique de la boîte de ligne.
TextMetrics.ideographicBaseline Lecture seule
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété CanvasRenderingContext2D.textBaseline, et la ligne de base idéographique de la boîte de ligne.

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'TextMetrics' dans cette spécification.		 Standard évolutif Initial definition

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support de base 4.0 (Oui) 1.5 (1.8) 9.0 9.0 3.1
width 4.0 (Oui) 1.5 (1.8) 9.0 9.0 3.1
actualBoundingBoxLeft,
actualBoundingBoxRight,
fontBoundingBoxAscent,
fontBoundingBoxDescent,
actualBoundingBoxAscent,
actualBoundingBoxDescent,
emHeightAscent,
emHeightDescent,
hangingBaseline,
alphabeticBaseline,
ideographicBaseline		 (Oui)[1] ? Pas de support[2] ? ? ?
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 (Oui) 1.0 (1.8) ? 10.0 3.2
width 2.1 (Oui) 1.0 (1.8) ? 10.0 3.2
actualBoundingBoxLeft,
actualBoundingBoxRight,
fontBoundingBoxAscent,
fontBoundingBoxDescent,
actualBoundingBoxAscent,
actualBoundingBoxDescent,
emHeightAscent,
emHeightDescent,
hangingBaseline,
alphabeticBaseline,
ideographicBaseline		 ? ? Pas de support[2] ? ? ?

[1] Pour activer les métriques de texte avancées, positionner l'indiquateur ExperimentalCanvasFeatures à true.

[2] Gecko n'implémente pas encore cette fonctionnalité. Voir le bug 1102584 apparenté.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : NemoNobobyPersonne
Dernière mise à jour par : NemoNobobyPersonne,