From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/textmetrics/index.html | 182 ++++++++++++++++++++++++++ files/fr/web/api/textmetrics/width/index.html | 111 ++++++++++++++++ 2 files changed, 293 insertions(+) create mode 100644 files/fr/web/api/textmetrics/index.html create mode 100644 files/fr/web/api/textmetrics/width/index.html (limited to 'files/fr/web/api/textmetrics') diff --git a/files/fr/web/api/textmetrics/index.html b/files/fr/web/api/textmetrics/index.html new file mode 100644 index 0000000000..f73fc61343 --- /dev/null +++ b/files/fr/web/api/textmetrics/index.html @@ -0,0 +1,182 @@ +--- +title: TextMetrics +slug: Web/API/TextMetrics +tags: + - API + - Canevas + - Reference + - TextMetrics +translation_of: Web/API/TextMetrics +--- +
{{APIRef("Canvas API")}}
+ +

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

+ +

Propriétés

+ +
+
{{domxref("TextMetrics.width")}} {{readonlyInline}}
+
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.
+
{{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}
+
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é {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné.
+
{{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}
+
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é {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné.
+
{{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.
+
{{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.
+
{{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte.
+
{{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et  le bas du rectangle de délimitation utilisé pour restituer le texte.
+
{{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré em dans la boîte de ligne.
+
{{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré em dans la boîte de ligne.
+
{{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne.
+
{{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne.
+
{{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-canvas-element.html#textmetrics", "TextMetrics")}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}9.09.03.1
width4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}9.09.03.1
actualBoundingBoxLeft,
+ actualBoundingBoxRight,
+ fontBoundingBoxAscent,
+ fontBoundingBoxDescent,
+ actualBoundingBoxAscent,
+ actualBoundingBoxDescent,
+ emHeightAscent,
+ emHeightDescent,
+ hangingBaseline,
+ alphabeticBaseline,
+ ideographicBaseline		{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}10.03.2
width2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}10.03.2
actualBoundingBoxLeft,
+ actualBoundingBoxRight,
+ fontBoundingBoxAscent,
+ fontBoundingBoxDescent,
+ actualBoundingBoxAscent,
+ actualBoundingBoxDescent,
+ emHeightAscent,
+ emHeightDescent,
+ hangingBaseline,
+ alphabeticBaseline,
+ ideographicBaseline		{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[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

+ + diff --git a/files/fr/web/api/textmetrics/width/index.html b/files/fr/web/api/textmetrics/width/index.html new file mode 100644 index 0000000000..b8eca27364 --- /dev/null +++ b/files/fr/web/api/textmetrics/width/index.html @@ -0,0 +1,111 @@ +--- +title: TextMetrics.width +slug: Web/API/TextMetrics/width +tags: + - API + - Canevas + - Propriété + - Référence(2) + - TextMetrics +translation_of: Web/API/TextMetrics/width +--- +
{{APIRef("Canvas API")}}
+ +

La propriété en lecture seule TextMetrics.width contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).

+ +

Syntaxe

+ +
readonly metrics.width;
+ +

Exemples

+ +

Étant donné cet élément {{HTMLElement("canvas")}} :

+ +
<canvas id="canevas"></canvas>
+
+ +

vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

+ +
var canvas = document.getElementById("canevas");
+var ctx = canvas.getContext("2d");
+
+var texte = ctx.measureText("foo"); // objet TextMetrics
+texte.width; // 16;
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}10.03.2
+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf