Canvas text rendering and metrics (2024 edition)

[AshleyScirra]

Description

Please note this is a re-submission of an Interop 2023 proposal that was not accepted last time around. There is an existing discussion on the original issue #159.

A problem that has been painful for us for some time now is browsers don't agree on how to align text when drawing to a canvas. Further, TextMetrics gives three different answers in different browsers for values like fontBoundingBoxAscent/Descent depending on the text baseline - in one case we get three different sets of values across Chrome, Firefox and Safari. In some situations that makes the API pretty much useless, since you can't achieve things like consistent alignment across browsers.

Note in the past year Firefox added support for TextMetrics, but as noted it can give different answers to both Chrome and Safari, so it hasn't helped much.

Rationale

Positioning text precisely on canvases is important for things like buttons and text layout. For example a canvas game may have a text label drawn on top of a button graphic with a border. Carefully placing the text so it's aligned correctly in one browser will still show it misaligned in another browser. There doesn't seem to be any good workaround to this.

TextMetrics is important for things like canvas text layout. If you want to draw some text on a canvas vertically aligned inside a box, you may need to take in to account the fontBoundingBoxAscent/Descent. However those values return inconsistent values across browsers, which basically makes the API useless for precisely aligning text. You have to pick one browser to display it right and the others will be wrong.

Precision

We don't need browsers to return exactly the same floating point values for measurements. Different browsers/OSs have different font engines, and so a say ~1px variance is to be expected and won't necessarily affect visual appearance much. However we are getting values varying by ~21px in one case between Chrome and Safari, which is unexpectedly large and causes visible alignment problems. We are after just a reasonable level of consistency, not exactly identical measurements.

Specification

https://html.spec.whatwg.org/multipage/canvas.html

Open Issues

I've been told this comes down to the following unresolved spec issue: whatwg/html#6731

Tests

WPT tests: https://wpt.fyi/results/html/canvas/element/text

We have a minimal test case for text alignment here: https://downloads.scirra.com/labs/bugs/text-top-baseline/index.html
Sample comparison image showing difference between Chrome and Safari: https://downloads.scirra.com/labs/bugs/text-top-baseline/comparison.png

We have a minimal test case for TextMetrics here: https://downloads.scirra.com/labs/bugs/font-measurements.html
Look in the console. This returns substantially different values in all three major browsers.

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Feature is already implemented in all major browsers.

Browser bug reports

Chrome issue reports:
https://bugs.chromium.org/p/chromium/issues/detail?id=1213949
https://bugs.chromium.org/p/chromium/issues/detail?id=1183752

Safari issue report:
https://bugs.webkit.org/show_bug.cgi?id=226334

Developer discussions

Sample complaints from developers:

Scirra/Construct-bugs#6137
Scirra/Construct-bugs#6255
Scirra/Construct-bugs#7164

We get a steady trickle of such reports as developers keep running in to the same problem.

Polls & Surveys

In this MDN short survey on APIs & JavaScript "Canvas text rendering" was selected by ~15% of survey takers.

Existing Usage

No response

Workarounds

No known workarounds.

Accessibility Impact

Inconsistent alignment of text, which can make buttons and other text harder to read.

Privacy Impact

No response

Other

No response

[drott]

WPT tests: https://wpt.fyi/results/html/canvas/element/drawing-text-to-the-canvas

Is this directory supposed to exist or do you mean this as a suggestion for a future location of such tests? I don't find any tests under this URL.

I think @annevk has a good suggestion in whatwg/html#6731 (comment) - I think it'd make sense to create a WPT test or other test to see what goes wrong with the top baseline in HTML / CSS layout first. If there are differences between browsers in that, get those addressed, then that result can be transferred to canvas.

[AshleyScirra]

I think I copy/pasted that from the 2023 proposal, but I guess the URL has changed since then. Perhaps it's now here where there seem to be tests for drawing and measuring text: https://wpt.fyi/results/html/canvas/element/text

Also to illustrate how much of an interop problem this is for us, since posting this we already got another report about the inconsistency of text between browsers: Scirra/Construct-bugs#7418

[annevk]

@himorin and @macnmm have indicated they are looking into the HTML issue. Without anyone working on that though including this in Interop won't work, as the specification is not adequate. Although it could perhaps be considered for an investigative area.

[TackerTacker]

Here is a real world example of this problem.
https://twitter.com/dandycanada/status/1522216082999701504
This is such an annoying issue, it forces me to use static images instead of text because it is too unreliable.

[wpt-interop]

Thank you for proposing Canvas text rendering and metrics (2024 edition) for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

As of the deadline, the specifications for Canvas text rendering and metrics (2024 edition) were not yet complete enough to allow interoperable implementations. To make progress on this area in the future, it will first be necessary to ensure that the feature has a clear specification in a standards track document.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.