2024179 - OpenType font features do not render in Canvas whereas they do render in DOM

Status: RESOLVED WONTFIX

(Core :: Graphics: Canvas2D, defect, P3)

Description

[Abdul Zahid]

Attachment: Firefox bug - depiction of actual vs. expected results

Steps to reproduce:

The issue is also reproducible in Firefox Nightly 150.0a1 (202603-17).

Checked on MacOS (arm) Firefox and Firefox Nightly.

On my application (elastic-charts), I've enabled OpenType font features for Intel font. elastic-charts render charts both using DOM as well as Canvas elements.

There's an online accessible Storybook story:
https://ech-e2e-ci--pr-2798-ronjson9.web.app/storybook/?path=/story/test-cases--font-measurement-test&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light

which can be used to compare the result in Chrome vs. Firefox, and can easily be seen that OpenType font features are applied to the DOM rendered chart (the above chart) whereas not on the Canvas rendered chart (the bar chart below). Notice that the digit 0 is rendered differently for both charts despite having the same computed font attributes and settings.

This comment and this comment on public PRs can also be consulted for what happened.

On this story in Firefox, if I inspect Canvas and see computed styles (filtered with "font" keyword), I see

font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
font-feature-settings: "ss01", "ss07", "tnum", "zero";
font-kerning: normal;
font-size: 14px;
font-variant-numeric: tabular-nums slashed-zero;
font-weight: 400

But clearly these are not being applied. slashed-zero is very easy to spot, as described above.

This not only affects elastic-charts for visual discreprencies

Actual results:

On Firefox, the OpenType font features e.g.

font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
font-feature-settings: "ss01", "ss07", "tnum", "zero";
font-variant-numeric: tabular-nums slashed-zero;

are only applied to DOM rendered text but not to Canvas rendered text, resulting in an output which is visually and mathematically incorrect.

See the attached Firefox-bug-actual-vs-expected-results.png for a visual representation and comparison.

Expected results:

On Firefox, the OpenType font features e.g.

font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
font-feature-settings: "ss01", "ss07", "tnum", "zero";
font-variant-numeric: tabular-nums slashed-zero;

should equally apply to DOM as well as Canvas rendered text so that both show same text and font features.

See the attached Firefox-bug-actual-vs-expected-results.png for a visual representation and comparison.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: Canvas2D' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Brad Werth [:bradwerth]]

Jonathan, would you please investigate and develop a theory for how we're failing to propegate font CSS properties through to Canvas?

Comment 3

[Brad Werth [:bradwerth]]

Hmmm, can't needinfo Jonathan right now due to a Bugzilla problem.

Comment 4

[Jonathan Kew [:jfkthame]]

Step 8 of the canvas2d text preparation algorithm specifies what CSS properties are to be explicitly set for the hypothetical inline box that generates glyphs for canvas text. These do not include font-feature-settings, so this is to be set to its initial value.

It is therefore expected, per HTML5 spec, that canvas2d text will always have the default OpenType features.

There has been some discussion of extending the spec to support stuff like this, but the issue is currently unresolved.

Comment 5

[Brad Werth [:bradwerth]]

(In reply to Jonathan Kew [:jfkthame] from comment #4)

It is therefore expected, per HTML5 spec, that canvas2d text will always have the default OpenType features.

Okay, thank you. Marking this as a webcompat issue with Chrome, and resolving as WONTFIX.