Closed Bug 1798297 Opened 2 years ago Closed 2 years ago

Japanese font kerning problems in www.pixiv.net after Bug 1797431

Categories

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

Product:
Core
Component:
Layout: Text and Fonts
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
108 Branch
Tracking Flags:
Tracking Status
firefox-esr102 --- unaffected
firefox106 --- unaffected
firefox107 --- unaffected
firefox108 --- fixed

People

(Reporter: yamadat501, Assigned: jfkthame)

References

(Regression,
URL
)

Details

(Keywords: regression)

Attachments

(4 files)

bug.png
1.25 MB, image/png
Details
normal.png
1.44 MB, image/png
Details
Bug 1798297 - For the Yu Gothic UI font, disable the automatic application of 'palt' when kerning is enabled, because the font's 'palt' feature is bad. r=#layout-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1798297 - Add reftest for the Yu Gothic UI kerning special-case. r=#layout-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Attached image bug.png —

After Bug 1797431 landed, I noticed font kerning problems in www.pixiv.net.

See the screenshot, some glyph are apparently too close, and ,in some cases, glyph are partially overlapped...

From Inspector:
Font : Yu Gothic UI Bold
Font kerning: normal

Regression range(mozilla-central)
Last OK:18c629b7b3b551361eb9da735294359a318b293c
First NG:842963188422047e6071661053cb77f543ba501f

So, regression from Bug 1797431.

Attached image normal.png —

As a reference, I show a screenshot of same page with a build works normally.

Regressed by: 1797431

:jfkthame, since you are the author of the regressor, bug 1797431, could you take a look? Also, could you set the severity field?

For more information, please visit auto_nag documentation.

Flags: needinfo?(jfkthame)

From some researches, apply the kerning to Yu Gothic UI causes rendering problem.

As first, change "font-kerning" parameter to auto fixes the problem because ,with this setting, font kerning is disabled for CJK fonts.
Next, UI fonts has tricky metrics compared with normal font. UI fonts are created for UI menus. For this purpose, Hiragana and Katakana has small width. This causes tight rendering with kerning.

And 「 font seems is not rendering in your bug.png.

Status: UNCONFIRMED → NEW
Ever confirmed: true

Set release status flags based on info from the regressing bug 1797431

status-firefox106: --- → unaffected
status-firefox107: --- → unaffected
status-firefox108: --- → affected
status-firefox-esr102: --- → unaffected

This is a bug (or design flaw) in the Yu Gothic UI font. Its "proportional alternates" (OpenType palt) feature crowds some glyphs together too much -- the Kana characters in particular seem to be affected. Similar poor rendering results in MS Edge if the palt feature is explicitly enabled, e.g.:

data:text/html;charset=utf-8,<div style="font:bold 50px yu gothic ui; font-feature-settings:'palt' 1">%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AFELMO10%E6%9C%88%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E7%99%BA%E5%A3%B2%E6%83%85%E5%A0%B1

I realize the "UI" font is trying to make the text compact, but (in my opinion) this feature has been poorly implemented. Possibly no common software has been actually applying the palt feature, and so the problem has gone unnoticed?

The OpenType spec is explicit about the expected behavior:

If 'kern' is activated, 'palt' must also be activated if it exists.

so what Firefox is doing here (when font-kerning: normal is applied) is exactly what the spec requires.

Note that this only occurs because the site explicitly asked for font-kerning: normal. With the initial value of font-kerning: auto, no kerning would be applied to the Japanese text, and the problem wouldn't arise.

(Interestingly, I don't see the problem when I load the pixiv.net site locally, because I'm seeing Microsoft YaHei used for the Japanese content there, not Yu Gothic UI. But I can reproduce by explicitly selecting the Yu Gothic UI font.)

Flags: needinfo?(jfkthame)

Although this isn't really a Firefox bug (it's just how that font is designed), I think -- given that it's a standard font on Windows -- we should consider adding a workaround to avoid applying palt in this case. It's sad, but probably the best solution for our users.

It feels really ugly to do this, as the problem is a badly-designed font,
not a bug in Gecko's behavior. But given that it's a standard Windows font,
I think it's probably worth having the workaround.

Assignee: nobody → jfkthame
Status: NEW → ASSIGNED

I tried to check other UI fonts on Windows. As a result, "MS UI" Gothic and "Meiryo UI" don't have any problem about kerning. So, the bug is the problem only of "Yu Gothic UI"

Thanks for the testing. Good to know that "UI" versions of other fonts don't have the same problem.

Pushed by jkew@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/99e2e426103b
For the Yu Gothic UI font, disable the automatic application of 'palt' when kerning is enabled, because the font's 'palt' feature is bad. r=dholbert
Pushed by jkew@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1911a7d6dcbb
Add reftest for the Yu Gothic UI kerning special-case. r=dholbert

This is ultimately a problem on the part of the web page author.

The Yu Gothic UI font is a condensed font to describe more information in the limited width of the UI.
Therefore, the font creator intends for the character width to be packed.

If the web author does not like the character width to be packed, they should choose another font (ie. Yu Gothic).

(In reply to Takanori MATSUURA from comment #14)

This is ultimately a problem on the part of the web page author.

The Yu Gothic UI font is a condensed font to describe more information in the limited width of the UI.
Therefore, the font creator intends for the character width to be packed.

If the web author does not like the character width to be packed, they should choose another font (ie. Yu Gothic).

This means I don't agree the attachment 9301180 [details] because this is the expected result of font creator.

https://hg.mozilla.org/mozilla-central/rev/99e2e426103b

Status: ASSIGNED → RESOLVED
Closed: 2 years ago
status-firefox108: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → 108 Branch

I believe that if bug 1797431 is fixed as bug 1797431 comment 17, this regression will be resolved without applying the work-around changeset in comment 16.

So the changeset should be backed out when bug 1797431 is fixed again.

The affected site shown here doesn't use font-feature-settings: "kern", it uses font-kerning: normal. So even if we modified the behavior as suggested in bug 1797431 comment 17, this problem would still exist.

Oh I have misunderstood the issue in this bug.

By fixing bug 1797431, "kern" and "palt" is set for CJK fonts including Yu Gothic UI font if font-feature-settings: auto.
This follows the spec of OpenType.

This bug has been reported as the regression of bug 1797431.
However it is NOT the regression because the Yu Gothic UI font is one of the CJK fonts.
If the web page author want to apply only "kern" for Yu Gothic UI font, they should set font-feature-settings: "palt" off.

I personally believe that fixing this bug has resulted in a more expected display of the web page author's and font creator's intentions.
The web page author use not Yu Gothic font but Yu Gothic UI font which is the condensed variant of Yu Gothic font.
This means they want to show as many characters as possible with the limited width.

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

Attachment

General

Creator:
Created:
Updated:
Size: