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

Details

Reference
bz63817

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).
whym created this task.Apr 11 2014, 1:24 PM
whym added a comment.Apr 11 2014, 1:29 PM

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.

whym added a comment.Jul 24 2014, 12:13 PM

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 updated the task description. (Show Details)Jan 5 2015, 2:05 AM
Krinkle set Security to None.
Krinkle removed subscribers: Unknown Object (MLST), Krinkle.
whym added a comment.EditedJan 11 2015, 3:35 AM

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

Gilles added a subscriber: Gilles.May 19 2015, 2:48 PM

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 :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
Catrope removed a subscriber: Catrope.Nov 13 2015, 7:43 PM
Isarra moved this task from Backlog to Bugs on the Vector board.Apr 7 2016, 1:08 AM
Isarra moved this task from Bugs to Typography on the Vector board.

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.

Volker_E closed this task as Resolved.Oct 27 2016, 8:24 PM
Volker_E removed a project: Patch-For-Review.