Why is there a difference when measuring words in an HTML page, vs. measuring their individual letters?
asked 9 hours ago by @qa-n2jt5nc3kjw2jk1fwito 0 rep · 30 views
I'm trying something with similar goals as the Knuth-Plass linebreaking algorithm. (However, no offering on the market will work for my use case - and I don't want the overhead of a library anyhow.)
When I measure the entire word rendered into a div, I'm getting a different width than when I measure the individual letters and add those values up.
Same font. Same fontsize.
The discrepancy is not uniform, per character, per word.
It's ranged from 0.00001, all the way up to 0.59 pixels, in the samples I've compared so far.
I could deal with as much as +/- 0.01.
A discrepancy as large as I'm seeing is going to stack - and it /will/ affect the ultimate outcome, as half a pixel across even 10-15 words could mean the difference of an unnecessary line break. Average discrepancy is about 0.25 pixels.
As best I can tell there's nothing wrong with my code.
I suspect some hidden quirk of HTML or how browsers handle text.
(I don't see how posting the several hundred lines used to derive thus far will help.)
I've been mainly using getBoundingClientRects() in JS, though I did try HTML5 canvas, also. Same result, with very minor discrepancy between the two methods - more in the range of deviation I'm looking for - 5-6 zeroes after the decimal.
Does anybody know what I'm missing?