FF116 Relnote/docs fontBoundingBoxAscent/Descent (#27937)

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

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
+<p id="log"></p>
+```
+
+```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")}}

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
+<p id="log"></p>
+```
+
+```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")}}

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