563758 - canvas measureText() widths are different between measuring whole string and individual chars

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[Dan Forys]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_3; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.29 Safari/533.4
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

When using canvas measureText().width, the width reported for a string is bigger than the sum of widths of its component characters.

Reproducible: Always

Steps to Reproduce:
1. Create a Javascript string and canvas element
2. Measure the width of the string using measureText( string ).width
3. Measure the widths of each character in a loop and add them together
Actual Results:  
For the string 'The quick brown fox jumps over the lazy dog' in 20px Georgia font, the entire width is 393px and the sum of widths is 367px.

Expected Results:  
Both widths should be 393px.

Test case at: http://danforys/twitter-viewer/compare.html

Comment 1

[Dan Forys]

Sorry, testcase is http://danforys.com/twitter-viewer/compare.html

Comment 2

[Boris Zbarsky [:bzbarsky]]

Why is this surprising?  For a full string you end up with various kerning, shaping, etc, operations that aren't performed on individual characters (because they depend on what characters are next to each other); these affect the width of the string.

Similarly, I'd expect the length of the string "Av" to be less than the sum of the widths of "A" and "v" in most reasonable fonts, etc.

Comment 3

[Dan Forys]

Good points, but it's surprising me because Opera and Webkit both have the same length reported.

I tested 'A' and 'v' using my testcase, Firefox reports combined as 23px, separate is 22px; which is the opposite of what you suggest. Webkit reports 23px/23px.

Is there known standard documented behaviour for this that I can read?

Comment 4

[Boris Zbarsky [:bzbarsky]]

> Is there known standard documented behaviour for this that I can read?

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-measuretext

Comment 5

[David G. Hong]

(In reply to Boris Zbarsky (:bz) from comment #2)
> Why is this surprising?  For a full string you end up with various kerning,
> shaping, etc, operations that aren't performed on individual characters
> (because they depend on what characters are next to each other); these
> affect the width of the string.
> 
> Similarly, I'd expect the length of the string "Av" to be less than the sum
> of the widths of "A" and "v" in most reasonable fonts, etc.

I don't understand why this was marked as INVALID when the expected is not the current outcome. What is the actual expected outcome?

Comment 6

[Boris Zbarsky [:bzbarsky]]

The expected outcome depends on the precise subpixel position on the screen, the exact font metrics, and the font hinting information.