1731995 - CanvasRenderingContext2D does not apply the font-kerning set to the canvas via CSS

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect)

Description

[Markus Wagner]

Attachment: kerning-bug.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

Steps to reproduce:

1. Apply the CSS-property "font-kerning: none" to a canvas
2. Render the word "Text" with fillText

There is a sample file attached showing different permutations of this. View the same file in Chrome for comparison.

Actual results:

The font is still rendered with kerning. You can notice this by looking at the letter "e" which is rendered partially below the "T".

Expected results:

The kerning should have been disabled.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Canvas: 2D' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

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

The severity field is not set for this bug.
:lsalzman, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Lee Salzman [:lsalzman]]

Jonathan, ideas?

Comment 4

[Jonathan Kew [:jfkthame]]

It's not just font-kerning, the same issue applies to other CSS font properties that may be applied to the canvas element. E.g. using a typical serif font that includes ligatures like <f, i> -> fi, you can modify the testcase to show that font-variant: no-common-ligatures doesn't take effect in the canvas text.

The reason is that the gfxFontGroup used by the canvas gets set up in CanvasRenderingContext2D::GetCurrentFontStyle based solely on the canvas2d.font attribute; it doesn't look at other CSS properties from the context that might be relevant.

Not sure offhand if the HTML canvas spec actually addresses this.....

Comment 5

[Jonathan Kew [:jfkthame]]

As far as I can tell from a brief look at https://html.spec.whatwg.org/#2dcontext, I don't think canvas text is actually supposed to "inherit" properties like this from the context.

However, it should be possible to control its kerning using the fontKerning attribute of the canvas2d context, and that also doesn't seem to work in Firefox.