Letter spacing is inconsistent inside of transformed `select` elements (because glyph spacing of Arial is significantly affected by hinting at small font sizes)
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: calixte, Unassigned)
References
Details
Attachments
(3 files, 1 obsolete file)
When there is a transform, the spaces between letters look irregular.
Those spaces are not the same in a select
and in an input
.
Reporter | ||
Comment 1•3 years ago
|
||
A screenshot from Firefox nightly.
Reporter | ||
Comment 2•3 years ago
|
||
A screenshot from Chrome.
Comment 3•3 years ago
|
||
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.
Reporter | ||
Comment 4•3 years ago
|
||
It's on Windows 11.
And I forgot to move the font-family
in input, select
.
The rendering is correct with Times New Roman
.
Reporter | ||
Comment 5•3 years ago
|
||
Comment 6•3 years ago
|
||
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•3 years ago
|
||
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?)
Updated•3 years ago
|
Comment 8•3 years ago
|
||
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.
Description
•