Open octref opened 4 years ago
Unfortunately there's basically zero agreement between different browsers on how the same glyphs should be measured. For instance, Safari's output to your sample script is:
actualBoundingBoxAscent: 10
actualBoundingBoxDescent: 1
actualBoundingBoxLeft: 0
actualBoundingBoxRight: 9.6015625
alphabeticBaseline: -0
emHeightAscent: 14
emHeightDescent: 4
fontBoundingBoxAscent: 14
fontBoundingBoxDescent: 4
hangingBaseline: 14
ideographicBaseline: -4
width: 9.6015625
Which is not to say that ‘correct’ and ‘incorrect’ have no meaning; just that it's kind of the Wild West out there.
Here's the how the metrics are currently calculated. If anyone has a better handle on how to make some of these judgment calls in terms of accuracy, conformance to the CSS spec, etc. I'd love to look over a pull request...
As with all questions involving font metrics, the answer is surely somewhere in here: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
@samizdatco I'm getting this in Firefox:
actualBoundingBoxAscent: 9.265625
actualBoundingBoxDescent: 0
actualBoundingBoxLeft: 0.90625
actualBoundingBoxRight: 10.5078125
width: 9.600000381469727
Unfortuantely I'm not familiar with font measurement so I can't help much there.
+1 to this issue, the metrics are incorrect and trying to calculate an accurate height for text appears to be impossible using skia-canvas. Are there any possible workarounds?
@PikaDude Perhaps you can use RenderingContext2D.outlineText('Your text here').bounds.top
, it is more accurate and work for me.
@samizdatco Do you think use skia_safe::font::Font::get_bounds
to calculate actualBoundingBoxAscent
would be a better idea? If so I would try spare some time work for this.
@samizdatco Do you think use
skia_safe::font::Font::get_bounds
to calculateactualBoundingBoxAscent
would be a better idea? If so I would try spare some time work for this.
That's what actually chromium did.
Hello! I'm trying to use
skia-canvas
to do font measurement. I'd like to replace puppeteer with it in my SVG renderer for shiki:Running with node:
What I get:
Running this script in Chrome:
What I get:
I'm wondering why would
skia-canvas
generate a differentactualBoundingBoxDescent
than Chrome?M
should have 0 descent as far as I can tell.