Web/API/TextMetrics

From Get docs


The TextMetrics interface represents the dimensions of a piece of text in the canvas; a textMetrics() instance can be retrieved using the CanvasRenderingContext2D.measureText() method.

Properties

TextMetrics.width Read only
Is 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.
TextMetrics.actualBoundingBoxLeft Read only
Is a double giving the distance from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline.
TextMetrics.actualBoundingBoxRight Read only
Is a double giving the distance from the alignment point given by the 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.
TextMetrics.fontBoundingBoxAscent Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.
TextMetrics.fontBoundingBoxDescent Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.
TextMetrics.actualBoundingBoxAscent Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels.
TextMetrics.actualBoundingBoxDescent Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.
TextMetrics.emHeightAscent Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the top of the em square in the line box, in CSS pixels.
TextMetrics.emHeightDescent Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the bottom of the em square in the line box, in CSS pixels.
TextMetrics.hangingBaseline Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels.
TextMetrics.alphabeticBaseline Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the alphabetic baseline of the line box, in CSS pixels.
TextMetrics.ideographicBaseline Read only
Is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels.

Examples

Baselines illustrated

This example demonstrates the baselines the TextMetrics object holds. The default baseline is the alphabeticBaseline. See also the CanvasRenderingContext2D.textBaseline property.

HTML

<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const baselinesAboveAlphabetic = ['fontBoundingBoxAscent', 'actualBoundingBoxAscent', 
                   'emHeightAscent', 'hangingBaseline'];
const baselinesBelowAlphabetic = ['ideographicBaseline', 'emHeightDescent', 
                   'actualBoundingBoxDescent', 'fontBoundingBoxDescent'];
const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
ctx.font = '25px serif';
ctx.strokeStyle = 'red';

baselines.forEach(function (baseline, index) {
  let text = 'Abcdefghijklmnop (' + baseline + ')';
  let textMetrics = ctx.measureText(text);
  let y = 50 + index * 50;
  ctx.beginPath();
  ctx.fillText(text, 0, y);
  let lineY = y - Math.abs(textMetrics[baseline]);
  if (baselinesBelowAlphabetic.includes(baseline)) {
    lineY = y + Math.abs(textMetrics[baseline]);
  }
  ctx.moveTo(0, lineY);
  ctx.lineTo(550, lineY);
  ctx.stroke();
  
});

Result

Measuring text width

When measuring the x-direction of a piece of text, the sum of actualBoundingBoxLeft and actualBoundingBoxRight can be wider than the width of the inline box (width), due to slanted/italic fonts where characters overhang their advance width.

It can therefore be useful to use the sum of actualBoundingBoxLeft and actualBoundingBoxRight as a more accurate way to get the absolute text width:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const text = 'Abcdefghijklmnop';
ctx.font = 'italic 50px serif';
const textMetrics = ctx.measureText(text);

console.log(textMetrics.width);
// 459.8833312988281

console.log(Math.abs(textMetrics.actualBoundingBoxLeft) +
            Math.abs(textMetrics.actualBoundingBoxRight));
// 462.8833333333333

Specifications

Specification
HTML Living StandardThe definition of 'TextMetrics' in that specification.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
TextMetrics Chrome

Full support 4

Edge

Full support 12

Firefox

Full support 1.5

IE

Full support 9

Opera

Full support 9

Safari

Full support 3.1

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support 31

Opera Android

Full support Yes

Safari iOS

Full support Yes

Samsung Internet Android

Full support Yes

actualBoundingBoxAscent

Experimental'

Chrome Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge

Full support 79

Firefox

Full support 74

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

Full support 77

Chrome Android Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

Full support 12.0

actualBoundingBoxDescent

Experimental'

Chrome Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge

Full support 79

Firefox

Full support 74

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

Full support 77

Chrome Android Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

Full support 12.0

actualBoundingBoxLeft

Experimental'

Chrome Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge

Full support 79

Firefox

Full support 74

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

Full support 77

Chrome Android Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

Full support 12.0

actualBoundingBoxRight

Experimental'

Chrome Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge

Full support 79

Firefox

Full support 74

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

Full support 77

Chrome Android Full support 77


Full support 77


No support ? — 77

Disabled'

Disabled' Until version 77 (exclusive): this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

Full support 12.0

alphabeticBaseline

Experimental'

Chrome Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the Experimental Web Platform Features preference.

Firefox Full support 74

Disabled'

Full support 74

Disabled'

Disabled' From version 74: this feature is behind the dom.textMetrics.baselines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

No support No

Chrome Android Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

No support No

emHeightAscent

Experimental'

Chrome Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the Experimental Web Platform Features preference.

Firefox Full support 74

Disabled'

Full support 74

Disabled'

Disabled' From version 74: this feature is behind the dom.textMetrics.emHeight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

No support No

Chrome Android Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

No support No

emHeightDescent

Experimental'

Chrome Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the Experimental Web Platform Features preference.

Firefox Full support 74

Disabled'

Full support 74

Disabled'

Disabled' From version 74: this feature is behind the dom.textMetrics.emHeight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

No support No

Chrome Android Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

No support No

fontBoundingBoxAscent

Experimental'

Chrome Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the Experimental Web Platform Features preference.

Firefox Full support 74

Disabled'

Full support 74

Disabled'

Disabled' From version 74: this feature is behind the dom.textMetrics.fontBoundingBox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

No support No

Chrome Android Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

No support No

fontBoundingBoxDescent

Experimental'

Chrome Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the Experimental Web Platform Features preference.

Firefox Full support 74

Disabled'

Full support 74

Disabled'

Disabled' From version 74: this feature is behind the dom.textMetrics.fontBoundingBox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

No support No

Chrome Android Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

No support No

Samsung Internet Android

No support No

hangingBaseline

Experimental'

Chrome Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the Experimental Web Platform Features preference.

Firefox Full support 74

Disabled'

Full support 74

Disabled'

Disabled' From version 74: this feature is behind the dom.textMetrics.baselines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

No support No

Chrome Android Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

No support No

ideographicBaseline

Experimental'

Chrome Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the Experimental Web Platform Features preference.

Firefox Full support 74

Disabled'

Full support 74

Disabled'

Disabled' From version 74: this feature is behind the dom.textMetrics.baselines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

?

Safari

Full support Yes

WebView Android

No support No

Chrome Android Full support Yes

Disabled'

Full support Yes

Disabled'

Disabled' This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android

?

Safari iOS

Full support Yes

Samsung Internet Android

No support No

width

Experimental'

Chrome

Full support 4

Edge

Full support 12

Firefox

Full support 1.5

IE

Full support 9

Opera

Full support 9

Safari

Full support 3.1

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support 31

Opera Android

Full support Yes

Safari iOS

Full support 3.2

Samsung Internet Android

Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.'
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.'
User must explicitly enable this feature.


See also