search

whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
7.89k stars 2.58k forks source link

Canvas textBaseline "em square" not defined #6731

Open AshleyScirra opened 3 years ago

AshleyScirra commented 3 years ago

Chrome and Safari draw text with the "top" baseline at different positions in canvas2d. See the following issues:

https://bugs.webkit.org/show_bug.cgi?id=226334 https://bugs.chromium.org/p/chromium/issues/detail?id=1213949

Image demonstrating comparison: https://downloads.scirra.com/labs/bugs/text-top-baseline/comparison.png

This causes web compat issues. For example our web game engine cannot display text consistently across platforms because each browser positions text slightly differently. This makes it difficult to do things like perfectly align text relative to other canvas drawings, such as in a border or button graphic.

Apparently this was previously discussed to some extent in #2470 but is not adequately resolved as it is still actively causing web compat issues and the spec does not appear to cover a definition of "the em square".

The spec should clearly define this so browser makers can identify if their browser complies with the spec in this regard, and if necessary make changes to their implementation to ensure compatibility. As it is I don't think it's clear which browser is doing it right (if any).

annevk commented 3 years ago

See #5826.

AshleyScirra commented 1 year ago

Any updates on this? We still get users complaining about inconsistencies in text positioning between Chrome and Safari, and it doesn't seem there's anything we can do about it until this gets sorted.

annevk commented 1 year ago

cc @whatwg/canvas

AshleyScirra commented 1 year ago

Still getting complaints about production apps affected by this, e.g.: https://www.construct.net/en/forum/construct-3/how-do-i-8/fix-fonts-displaying-ios-176898

Any news?

annevk commented 1 year ago

No, I didn't manage to get review on #5826. I'll agenda+ it to see if I can get some attention on it that way.

Meanwhile, you could read up on the CSS definition of this concept and determine which browser is in the wrong here. Coupled with some WPT tests, the affected browser might be willing to change and that could suffice as an interim solution.

AshleyScirra commented 1 year ago

Still getting reports about this: https://github.com/Scirra/Construct-bugs/issues/7164

schenney-chromium commented 5 days ago

I think this depends on resolving https://github.com/whatwg/html/issues/5830, which in turn depends on resolving a CSS WG issue (https://github.com/w3c/csswg-drafts/issues/5380)