Page MenuHomePhabricator

Provide a workaround to IE's bug that causes the generic "serif" rendered broken
Closed, ResolvedPublic

Description

A known bug [1] of Internet Explorer 10 and earlier makes the generic "serif" rendered poorly in Japanese, mixing one font (a Mincho font, close to serif) and another (said to be the Korean "Batang" font, close to sans-serif), character by character in one line. (screen shot in [2]) Because Latin-script fonts specified for headings in the current Vector skin are not applicable to Japanese scripts, the generic "serif" has to be applied. This results in IE users in Japanese experiencing a readability issue due to the forementioned rendering bug of the browser.

Note that this is not merely an aesthetic preference, but a problem close to breakage in the interface; when users see this anomaly in the font style, most would go to check and see if something is broken on their computers.

[1] http://answers.microsoft.com/ja-jp/ie/forum/all/css%E3%81%AEfont/76ecfcff-ca10-41c7-9a77-baa823ec89a0
[2] https://sites.google.com/site/jawpspace/jawp_font_ie9s.png

Also discussed in https://www.mediawiki.org/wiki/Talk:Typography_refresh#About_troubles_include_IE.27s_rendering_error_in_Japanese_Wikipedia

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 3:16 AM
bzimport set Reference to bz63817.
bzimport added a subscriber: Unknown Object (MLST).

A workaround would be to prepend to the font-family specification a font such as "HGP明朝B" (a serif-like font specifically designed for headings) or "MS PMincho", that is widely available among the IE users and close to serif. Because "MS PMincho" can be poorly rendered on Mac (bundled with MS Office) and Linux (bundled with Wine), a suggested font set for headings in Japanese would be: "IPAPMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGP明朝B", "MS PMincho", serif. Doing this would require the font stack to be localisable as part of the skin.

A similar set for Wikipedia was suggested in an independent blog post by a Wikipedia reader. http://kozyty.com/blog/2013/12/what-happens-wikipedia-redesign/

(In reply to Yusuke Matsubara from comment #0)

makes the generic "serif" rendered poorly in Japanese

[...]

Also discussed in
https://www.mediawiki.org/wiki/Talk:
Typography_refresh#About_troubles_include_IE.
27s_rendering_error_in_Japanese_Wikipedia

Seeing that this ticket was filed on 2014-04-11 and as the link provided above points to the "Typography refresh" page, I assume that the generic "serif" font rendering problem only 'appeared' after the Typography Refresh changes were deployed on Wikimedia sites.

Quoting bug 63351 comment 7, "As of I595feec9, the MediaWiki 1.23 release branch does not include any fonts changes compared to previous releases – everything, text and headings, is just 'sans-serif'."

Hence this cannot be an issue for 1.23.0. Removing Target Milestone.

On Japanese Wikipedia, users are testing this hack: https://ja.wikipedia.org/wiki/MediaWiki:Gadget-SwitchFont.js https://ja.wikipedia.org/wiki/MediaWiki:Gadget-SwitchFont.css

It blacklists old browsers that cannot render fonts properly. (and also adds per-environment font specifications for MacOS and Windows.)

I realize the script above is ad-hoc, but would a similar solution with browser detection plausible?

Krinkle set Security to None.
Krinkle removed subscribers: Unknown Object (MLST), Krinkle.

The browser detection experiment is over as I see it - however no-one has been bothered to disable the gadget yet. (It's opt-in and there is no harm to keep having it.)

If I follow the issue correctly, this is a problem affecting Japanese wikis only at the moment. What's stopping Japanese wikipedia admins from applying code similar to the gadget's to global CSS/JS?

Nothing, but since it affects all Japanse-language wikis (those outside of Wikimedia too), it would be good to make a centralized fix.

How about using the attribute selector lang="ja" or even better the [[ https://developer.mozilla.org/en-US/docs/Web/CSS/:lang | :lang(ja) pseudo-class ]] additionally?

Is clear if it's a IE10 only (not affecting IE 11) issue?

This task, though troubling, has not been solved in over a year, and I don't think it's reasonable to hold up the release on the basis of this issue. Removing.

Change 216028 had a related patch set uploaded (by Isarra):
Make headers use the same fonts as the rest of the content

https://gerrit.wikimedia.org/r/216028

Jdlrobson changed the task status from Open to Stalled.Nov 2 2015, 9:39 PM
Jdlrobson added a subscriber: violetto.

Have asked @Volker_E and @violetto to explore better Japanese fonts.

Restricted Application added a subscriber: revi. · View Herald TranscriptNov 2 2015, 9:39 PM

Change 216028 abandoned by Isarra:
Make headers use the same fonts as the rest of the content

https://gerrit.wikimedia.org/r/216028

Patch provided at https://gerrit.wikimedia.org/r/#/c/217707/ and released in 1.28.10 https://phabricator.wikimedia.org/diffusion/SVEC/browse/wmf%252F1.28.0-wmf.10/ featuring generic font-family: sans-serif specifically for Korean, Hebrew and Japanese fixed this issue.