Description
Note this was previously submitted for interop 2023 (#159), 2024 (#427) 2025 (#817) and 2026 (#1091).
A long-standing problem that has been painful for us for some years 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.
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.
Rationale
This is important for any kind of precise text alignment when drawing text to a canvas. It is important for the web-based game development tool Construct and likely other cases where text layout on canvas is important (e.g. canvas-based word processors or design tools).
Sample complaints from developers (just a selection of many such reports):
Scirra/Construct-bugs#6137
Scirra/Construct-bugs#6255
Scirra/Construct-bugs#7164
In the survey in #246 "Canvas text rendering" was selected by ~15% of survey takers.
Investigation Roadmap
The main canvas specification is here: https://html.spec.whatwg.org/multipage/canvas.html
The following browser issues have been filed:
https://issues.chromium.org/issues/40769053
https://issues.chromium.org/issues/40752202
https://bugs.webkit.org/show_bug.cgi?id=226334
Discussion of these led to filing the following specification issue: whatwg/html#6731
This references the following other specification issues/PRs:
whatwg/html#2470
whatwg/html#5826
whatwg/html#5830
It appears the open specification issues need to be resolved, and it looks like tests also need to be written once the specification issues have been cleared up.
Description
Note this was previously submitted for interop 2023 (#159), 2024 (#427) 2025 (#817) and 2026 (#1091).
A long-standing problem that has been painful for us for some years 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.
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.
Rationale
This is important for any kind of precise text alignment when drawing text to a canvas. It is important for the web-based game development tool Construct and likely other cases where text layout on canvas is important (e.g. canvas-based word processors or design tools).
Sample complaints from developers (just a selection of many such reports):
Scirra/Construct-bugs#6137
Scirra/Construct-bugs#6255
Scirra/Construct-bugs#7164
In the survey in #246 "Canvas text rendering" was selected by ~15% of survey takers.
Investigation Roadmap
The main canvas specification is here: https://html.spec.whatwg.org/multipage/canvas.html
The following browser issues have been filed:
https://issues.chromium.org/issues/40769053
https://issues.chromium.org/issues/40752202
https://bugs.webkit.org/show_bug.cgi?id=226334
Discussion of these led to filing the following specification issue: whatwg/html#6731
This references the following other specification issues/PRs:
whatwg/html#2470
whatwg/html#5826
whatwg/html#5830
It appears the open specification issues need to be resolved, and it looks like tests also need to be written once the specification issues have been cleared up.