Why is there a difference between "width" and "actualBoundingBoxLeft + actualBoundingBoxRight" in a "TextMetrics" object of a HTML5 canvas? - text

Question

When I call measureText as shown in the snippet, I get the following result:
{
"width": 45.43333435058594,
"actualBoundingBoxLeft": 0,
"actualBoundingBoxRight": 45.35,
"actualBoundingBoxAscent": 18,
"actualBoundingBoxDescent": 0
}
Why is there a difference between width and actualBoundingBoxRight, if actualBoundingBoxLeft is zero?
c2d = document.getElementById('canvas').getContext('2d');
c2d.direction = 'ltr';
c2d.font = '24px serif';
console.log (c2d.measureText('TeX'));
<canvas id="canvas"></canvas>

Answer 1

Hope I get what you are asking, I'll give it a go.
The width property gives the text's advance width. Space taken excluding left and right-side bearing.
– width attribute
The width of that inline box, in CSS pixels. (The text's advance width.)
– actualBoundingBoxLeft attribute
The distance parallel to the baseline from the alignment point given by the textAlign attribute 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.
Where it also gives the note:
The sum of this value and the next (actualBoundingBoxRight) can be wider than the width of the inline box (width), in particular with slanted fonts where characters overhang their advance width.
– actualBoundingBoxRight attribute
The distance parallel to the baseline from the alignment point given by the textAlign attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.
Some examples
Take this times f with data from canvas's measuereText (normal left, italic right):
ERR: Switched places for middle and bottom width line (blue ones), but did not update the labels. "middle" is "bottom" and "bottom" is "middle" as for the labels in the picture. I'll try to get time to upload a new later.
Especially the slanted version shows this well. The blue line following the textBaseline (gray horizontal line), and starting at textAlign (gray vertical line) show the width value for the glyph. That is how much the font advances the "typehead".
Bounding box left / right are the extremes in horizontal expansion. If one look on it as an rectangle. Same goes for Ascend and Descend. They are the extremes up / down. But, as font's "overlap" (kerning etc.) it is not a factor for width which represents advanced width.
The sum of the box width is 111 + 39 = 150 but the width is only 72.28.
As for your sample, it is harder to catch with such small fonts. (Relatively speaking). Increasing the for to 1024px or what ever gives a clearer result. There is so small fractions and path calculations that one will miss subtle pixel fractions. With 1024px:
actualBoundingBoxAscent : 747
​actualBoundingBoxDescent : 14
​actualBoundingBoxLeft : -10
​actualBoundingBoxRight : 1933.5
​width : 1938.5
The difference (1933.5 + -10 = 1923.5) is still small, considering the total width, but at least present in the served object.
Another sample with +:
As one observe the glyph advances the text a lot more then what it occupies in painted pixels. One can even have cases where a glyph does not advance the text at all. They can still stand alone in a text, but it's definition applies to the previous glyph in a way ... For example dấu hỏi or hook above has zero width.
But some are still defined as advancing characters for example:
Also interesting with that sample is to see how Descent is negative, (not going down below textBaseline), and Ascent is also present. Logically when one look at it, but can be a gotcha.
Could scale up the test on the canvas, but would have to look at it closer. Way too long since I worked on cavases. This is a close view, but have not validated or checked how precise (down to pixel) the lines are.
If it is correct, it show a subtle diff where the width advances at the end of TeX using 24px font.