New text metrics for canvas available in Google Chrome

Share RGraph:   
Posted on 23rd March 2014

Summary
Information about the new text metrics in Google Chrome (as of March 2014 it was just Google Chrome Canary)

The canvas v5 specification gave a lot more text metrics to the measureText() function. What this means is that when you use the measureText() function you will get a lot more information back about the dimensions of the text than you did previously - ie more than just the width. So when you do this:

var metrics = context.measureText('The quick brown fox jumped over the lazy dog');

You will now get an object that looks like this:

{
  ideographicBaseline: 3,
  alphabeticBaseline: 0,
  hangingBaseline: -8,
  emHeightDescent: 0,
  emHeightAscent: 0,
  actualBoundingBoxDescent: 2,
  actualBoundingBoxAscent: 7,
  fontBoundingBoxDescent: 3,
  fontBoundingBoxAscent: 10,
  actualBoundingBoxRight: 217,
  actualBoundingBoxLeft: 0,
  width: 217
}

Browser support

Currently (March 2014) only Google Chrome Canary has support for the new metrics. Other browsers just support the width property.

Chrome:
Yes1
Firefox:
No
Internet Explorer:
No
Safari:
No
Opera:
No


1Currently (March 2014) only the Chrome dev channel has support

What does it all mean?

Descriptions of the various properties are:

http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#textmetrics

ideographicBaseline
This gives you the distance (in pixels) of how far below (or above) the coordinates that you give for the text the glyphs of the text will extend. It takes into account the textBaseline property and it can be negative.

hangingBaseline
This is the distance (in pixels) how far below the given X/Y coordinates that the top of the text is. It can be negative - stipulating that the top of the text is above th X/Y coordinates.

emHeightDescent
This appears to be always zero. Here is the quote from the HTML5 specification:

The distance from the horizontal line indicated by the textBaseline attribute to the bottom of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the bottom of the em square (so this value will usually be negative). (Zero if the given baseline is the top of the em square.)

emHeightAscent
This appears to be always zero. Here is the quote from the HTML5 specification:

The distance from the horizontal line indicated by the textBaseline attribute to the top of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the top of the em square (so this value will usually be positive). Zero if the given baseline is the top of the em square; half the font size if the given baseline is the middle of the em square.

actualBoundingBoxDescent
This is the distance (in pixels) of the distance from the given Y coordinate to the bottom of the text. If you're drawing a bounding box for your text you can use this property in conjunction with the next to get the height that the bounding box should be. You may need to use Math.abs() on this value.

actualBoundingBoxAscent
This is the distance (in pixels) of the distance from the given Y coordinate to the top of the text. If you're drawing a bounding box for your text you can use this property in conjunction with the previous to get the height that the bounding box should be. You may need to use Math.abs() on this value.

fontBoundingBoxDescent
The distance from the baseline of the text to the bottom of the text.

fontBoundingBoxAscent
The distance from the baseline of the text to the top of the text.

actualBoundingBoxRight
The distance to the right hand side of the text. This is supposed to (according to the spec) take into account the alignment given by the textAlign attribute - but as of March 2014, it isn't - but this is easily corrected for.

actualBoundingBoxLeft
The distance to the left hand side of the text. This is supposed to (according to the spec) take into account the alignment given by the textAlign attribute - but as of March 2014, it isn't working at all - but this is easily corrected for.


Getting the bounding box measurements for text

Here's an interactive example that shows off the new text metrics. Browser support is limited at the time of writing (March 2014). The text is centered vertically and horizontally and guide lines are shown too.


[No canvas support]

Remember that it's an evolving specifiction!

Keep in mind that the new metrics are just that - new. And they may note fully work or even be completed yet. Not to mention limited browser support. As a result you may need to use work-arounds if you choose to use the new properties and those work-arounds may need updating in the future.

Measuring text height with the DOM

By adding text to the DOM (real text) you can query the DOM to get the text height if that's what you want. There's more about that here.

Comments

Add a new comment...