Canvas textBaseline needs better tests

[AshleyScirra]

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]

See #5826.

[AshleyScirra]

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]

cc @whatwg/canvas

[AshleyScirra]

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]

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]

Still getting reports about this: Scirra/Construct-bugs#7164

[schenney-chromium]

I think this depends on resolving #5830, which in turn depends on resolving a CSS WG issue (w3c/csswg-drafts#5380)

[AshleyScirra]

Still getting reports about this: https://www.construct.net/en/forum/construct-3/how-do-i-8/avoid-text-shift-ios-184392