Open Bug 1770132 Opened 3 years ago Updated 3 years ago

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)

defect

Tracking

()

People

(Reporter: calixte, Unassigned)

References

Details

Attachments

(3 files, 1 obsolete file)

Attached file plop.html (obsolete) (deleted) —

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

Attached image image.png (deleted) —

A screenshot from Firefox nightly.

Attached image image.png (deleted) —

A screenshot from Chrome.

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.

Flags: needinfo?(cdenizet)

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

Flags: needinfo?(cdenizet)
Attached file plop.html (deleted) —
Attachment #9277267 - Attachment is obsolete: true

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.

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?)

Severity: -- → S3
Summary: Letter spacing is not correct when the text is in a transformed div → Letter spacing is inconsistent inside of transformed `select` elements (because glyph spacing of Arial is significantly affected by hinting at small font sizes)

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.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: