1770132 - Letter spacing is inconsistent inside of transformed `select` elements (because glyph spacing of Arial is significantly affected by hinting at small font sizes)

Status: NEW

(Core :: Layout: Text and Fonts, defect)

Description

[Calixte Denizet (:calixte)]

Attachment: plop.html

When there is a transform, the spaces between letters look irregular.
Those spaces are not the same in a select and in an input.

Comment 1

[Calixte Denizet (:calixte)]

Attachment: image.png

A screenshot from Firefox nightly.

Comment 2

[Calixte Denizet (:calixte)]

Attachment: image.png

A screenshot from Chrome.

Comment 3

[Jonathan Kew [:jfkthame]]

Which platform are your screenshots from? I don't see irregular spacing on my macOS machine.

I do see a difference from Chrome -- Firefox has much looser spacing in the <input> element -- but that's because we default to using the system font, which has increased spacing at small optical sizes.

In the <select> example, the CSS specifies font-family: Arial, which doesn't have an optical sizing variation, so it doesn't happen there.

The irregular spacing is probably specific to a certain platform back-end, so please confirm which platform you're on - thanks.

Comment 4

[Calixte Denizet (:calixte)]

It's on Windows 11.
And I forgot to move the font-family in input, select.
The rendering is correct with Times New Roman.

Comment 5

[Calixte Denizet (:calixte)]

Attachment: plop.html

Comment 6

[Jonathan Kew [:jfkthame]]

OK, this is a known issue (there's probably a similar bug on file somewhere...)

The root of the problem is that the glyph spacing of Arial is significantly affected by hinting at small font sizes. It looks like Blink doesn't use the hinted widths, it just scales the font (and glyph positioning) linearly, whereas Firefox uses the font's hinted widths for the chosen font size (which ends up giving poor spacing when scaled up to a very different size by the CSS transform).

To fix this, we'd need to abandon the use of hinted widths and go for linear scaling everywhere, which might impact readability for small text with some fonts; but maybe font rendering and display quality have progressed to the point where that would be OK.

Comment 7

[Daniel Holbert [:dholbert]]

Seems like S3, triaging as such.

Also, I'm adjusting the summery to include a snippet from jfkthame's explanation and to be a bit more specific about what's broken (assuming I'm understanding correctly -- in calixte's screenshot in comment 1, I think (?) specifically the select elements (1st and 3rd elements) are where all the brokenness lies?)

Comment 8

[Daniel Holbert [:dholbert]]

I can reproduce this on Windows 10, using 1920x1080 display resolution and 100% pixel scaling in my system settings.

In my case, the mi in "AdMInistration" are essentially superimposed (there's no space between them at all), in the affected lines (1st and 3rd).

This issue goes back quite a while, e.g. I can repro in Nightly 2015-01-01.