From 32a032232bc26bcab287f88539361c5dbc75c7cd Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 18 Jul 2023 01:13:50 +1000 Subject: [PATCH] FF116 Relnote/docs fontBoundingBoxAscent/Descent (#27937) --- .../mozilla/firefox/releases/116/index.md | 3 ++ .../fontboundingboxascent/index.md | 29 +++++++++++++++++-- .../fontboundingboxdescent/index.md | 29 +++++++++++++++++-- files/en-us/web/api/textmetrics/index.md | 24 +++++++-------- 4 files changed, 67 insertions(+), 18 deletions(-) diff --git a/files/en-us/mozilla/firefox/releases/116/index.md b/files/en-us/mozilla/firefox/releases/116/index.md index c9c1da94ab98a1a..74531991459de92 100644 --- a/files/en-us/mozilla/firefox/releases/116/index.md +++ b/files/en-us/mozilla/firefox/releases/116/index.md @@ -45,6 +45,9 @@ This article provides information about the changes in Firefox 116 that affect d ### APIs +- The {{domxref("TextMetrics.fontBoundingBoxAscent")}} and {{domxref("TextMetrics.fontBoundingBoxDescent")}} properties are now supported. + These metrics return, respectively, the distance above and below the {{domxref("CanvasRenderingContext2D.textBaseline")}} to the bounding rectangle of all the fonts used to render the text ([Firefox bug 1801198](https://bugzil.la/1801198)). + #### DOM #### Media, WebRTC, and Web Audio diff --git a/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md b/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md index 10b71c4e285d8d1..487298e928312ef 100644 --- a/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md +++ b/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md @@ -8,18 +8,40 @@ browser-compat: api.TextMetrics.fontBoundingBoxAscent {{APIRef("Canvas API")}} -The read-only `fontBoundingBoxAscent` property of the {{domxref("TextMetrics")}} interface is a `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. +The read-only `fontBoundingBoxAscent` property of the {{domxref("TextMetrics")}} interface returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute, to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. + +## Value + +A number, in CSS pixels. ## Examples +The code below shows how you can get the `fontBoundingBoxAscent` for some text in a particular font. + ```js const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); -const text = ctx.measureText("foo"); // returns TextMetrics object -text.fontBoundingBoxAscent; // 10; +ctx.font = "25px serif"; +const text = "Foo"; + +const textMetrics = ctx.measureText("foo"); // returns TextMetrics object +const ascentCssPixels = textMetrics.fontBoundingBoxAscent; +``` + +```html hidden +

+``` + +```js hidden +const log = document.getElementById("log"); +log.innerText = `fontBoundingBoxAscent: ${ascentCssPixels}`; ``` +The ascent in CSS pixels for the text "Foo" in a 25px serif font is shown below. + +{{EmbedLiveSample('Examples', 100, 50)}} + ## Specifications {{Specifications}} @@ -30,4 +52,5 @@ text.fontBoundingBoxAscent; // 10; ## See also +- {{domxref("TextMetrics.fontBoundingBoxDescent")}} - {{domxref("TextMetrics")}} diff --git a/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md b/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md index 4487ebda00d4a30..74809e3123f1bee 100644 --- a/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md +++ b/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md @@ -8,18 +8,40 @@ browser-compat: api.TextMetrics.fontBoundingBoxDescent {{APIRef("Canvas API")}} -The read-only `fontBoundingBoxDescent` property of the {{domxref("TextMetrics")}} interface is a `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. +The read-only `fontBoundingBoxDescent` property of the {{domxref("TextMetrics")}} interface returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. + +## Value + +A number, in CSS pixels. ## Examples +The code below shows how you can get the `fontBoundingBoxDescent` for text in a particular font. + ```js const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); -const text = ctx.measureText("foo"); // returns TextMetrics object -text.fontBoundingBoxDescent; // 3; +ctx.font = "25px serif"; +const text = "Foo"; + +const textMetrics = ctx.measureText("foo"); // returns TextMetrics object +const descentCssPixels = textMetrics.fontBoundingBoxDescent; +``` + +```html hidden +

+``` + +```js hidden +const log = document.getElementById("log"); +log.innerText = `fontBoundingBoxDescent: ${descentCssPixels}`; ``` +The descent in CSS pixels for the text "Foo" in a 25px serif font is shown below. + +{{EmbedLiveSample('Examples', 100, 50)}} + ## Specifications {{Specifications}} @@ -30,4 +52,5 @@ text.fontBoundingBoxDescent; // 3; ## See also +- {{domxref("TextMetrics.fontBoundingBoxAscent")}} - {{domxref("TextMetrics")}} diff --git a/files/en-us/web/api/textmetrics/index.md b/files/en-us/web/api/textmetrics/index.md index 6a130e42d4ba6ed..6b36d6eafa9479f 100644 --- a/files/en-us/web/api/textmetrics/index.md +++ b/files/en-us/web/api/textmetrics/index.md @@ -12,29 +12,29 @@ The **`TextMetrics`** interface represents the dimensions of a piece of text in ## Instance properties - {{domxref("TextMetrics.width")}} {{ReadOnlyInline}} - - : A `double` giving the calculated width of a segment of inline text in CSS pixels. It takes into account the current font of the context. + - : Returns the width of a segment of inline text in CSS pixels. It takes into account the current font of the context. - {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{ReadOnlyInline}} - - : A `double` giving the distance parallel to the baseline from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point. + - : Distance parallel to the baseline from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point. - {{domxref("TextMetrics.actualBoundingBoxRight")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline. + - : Returns the distance from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline. - {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. - {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. - {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the bounding rectangle used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the bounding rectangle used to render the text, in CSS pixels. - {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels. - {{domxref("TextMetrics.emHeightAscent")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the top of the _em_ square in the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the top of the _em_ square in the line box, in CSS pixels. - {{domxref("TextMetrics.emHeightDescent")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the bottom of the _em_ square in the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the bottom of the _em_ square in the line box, in CSS pixels. - {{domxref("TextMetrics.hangingBaseline")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the hanging baseline of the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the hanging baseline of the line box, in CSS pixels. - {{domxref("TextMetrics.alphabeticBaseline")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the alphabetic baseline of the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the alphabetic baseline of the line box, in CSS pixels. - {{domxref("TextMetrics.ideographicBaseline")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the ideographic baseline of the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the ideographic baseline of the line box, in CSS pixels. ## Examples