| • Whatamidoing-WMF | |
| May 8 2015, 4:37 AM |
| F29629325: Screen Shot 2019-06-24 at 2.32.50 PM.png | |
| Jun 24 2019, 10:46 AM |
| F7599777: mong3.png | |
| Apr 17 2017, 10:40 PM |
| F7599784: mong4.png | |
| Apr 17 2017, 10:40 PM |
| F7599773: mong1.png | |
| Apr 17 2017, 10:40 PM |
| F1320930: Screen Shot 2015-08-11 at 5.39.41 PM.png | |
| Aug 12 2015, 12:42 AM |
| F163595: Screenshot_2015-05-11-13-24-44.png | |
| May 11 2015, 5:26 PM |
| F163597: Screenshot_2015-05-11-13-24-58.png | |
| May 11 2015, 5:26 PM |
| F163591: _20150511_131607.JPG | |
| May 11 2015, 5:23 PM |
@KTo288 says: Any page with Mongolian text at the English Wikipedia produces a large block of whitespace.
This problem is seen in Chrome running on Android 4.4.2. Pages in Firefox render correctly.
Can be replicated in browser stack using Motorola Moto G 2nd Gen Firefox V (5)
Android 6.0, Motorola G4, tested in Chrome and Opera Mini
TImebox: 4hr
Example link to try and reproduce this: https://en.wikipedia.org/wiki/Mongolian_script
Screenshot of Mongolian Language page from a 4.4.4 device running Chrome. This is, however, the only large block of whitespace I saw within the entire article. Since I don't know the language, there might have been other visual errors though.
@jhobs: Which version of Chrome is that? (I'm not sure how it's versioned on Android)
Sounds like a font issue on the device. I was unable to replicate this specific issue on browser stack or my local Android device.
Note on the desktop site it clearly states This article contains Mongolian script. Without proper rendering support, you may see question marks, boxes, or other symbols instead of text in Mongolian script. (mobile is not showing this annoyingly but that's another problem/different bug..)
@KTo288 if you visit the same page in desktop mode on your phone do you see the same issue?
@KTo288, ping - if you visit the same page in desktop mode on your phone do you see the same issue?
Note to future selves: this bug is old. We'd need to reproduce before further triage.
I wonder if the language team can help here. Isn't this dependent on what fonts are installed on the browser? Isn't this what webfonts set out to achieve?
Looking closely these templates supply a font-family of 'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'
If a user doesn't have these installed they are not going to render no matter what we do...
Yes, if the user does not have these installed or part of the operating system, depending on browser you will see square or question marks or blank space. For desktop, the webfonts, part of UniversalLanguageSelector, are delivered for some languages, but I dont see that ULS having a webfont for Mongolian. It can be added though. Noto San Mongolian seems a right choice because of OFL license and well maintained font. For mobile, ULS dont deliver webfonts(there is a config to enable it. by default disabled).
Thanks @santosh this is very useful.
Is there a way for editors to specifically declare they need a web font for casee like this? We wouldn't want to add the webfont for every page but this one would need it. Maybe TemplateStyles could help here?
It is possible to load the font only for a certain part of content as illustrated at https://www.mediawiki.org/wiki/Universal_Language_Selector#ULS_for_editors
@santhosh the article in question seems to be using the correct markup.
https://en.m.wikipedia.org/wiki/Manchu_alphabet#History
It looks like this:
<p>Dahai also added ten graphemes (<i>tulergi hergen</i>: "foreign (outer) letters"), to allow Manchu to be used to write Chinese, Sanskrit, and Tibetan loanwords. Previously, these words contained sounds that did not have corresponding letters in Manchu.<sup id="cite_ref-1" class="reference"><a href="/wiki/Special:MobileCite/760697128#cite_note-1">[1]</a></sup> Sounds that were transliterated included the aspirated sounds k' (Chinese pinyin: k, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᠺ</span>), k (g, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡬ</span>), x (h, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡭ</span>); ts' (c, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡮ</span>); ts (ci, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡮ᠊ᡟ</span>); sy (si, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᠰ᠊ᡟ</span>); dz (z, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡯ</span>); c'y (chi, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡱᡟ</span>); j'y (zhi, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡷᡟ</span>); and ž (r, <span lang="mnc-Mong" style="display:inline-block; font-weight:normal; font-family:'Abkai Xanyan', 'Abkai Xanyan LA', 'Abkai Xanyan VT', 'Abkai Xanyan XX', 'Abkai Xanyan SC', 'Abkai Buleku', 'Daicing White', 'Oyun Gurban Ulus Tig', 'Oyun Qagan Tig', 'Oyun Garqag Tig', 'Oyun Har_a Tig', 'Oyun Scnin Tig', 'Mongolian BT', 'Mongolian Baiti', 'Noto Sans Mongolian'; font-size: 1.5em; line-height: 1em; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr; vertical-align:middle;" xml:lang="mnc-Mong">ᡰ</span>).<sup id="cite_ref-2" class="reference"><a href="/wiki/Special:MobileCite/760697128#cite_note-2">[2]</a></sup></p>
Given your comment here https://phabricator.wikimedia.org/T98565#3188909 and seeing this is a problem with the desktop skin as well on the same device, it sounds like this would be a change to ULS to add Mongolian support?
Will ULS load the web fonts on mobile and desktop if available?
If not can it? What does this mean in terms of additional JS loaded?
Yes, the markup looks correct. What is missing is a font in ULS mapped to Mongolian. Once that is done, the problem should get resolved for desktop.
For mobile, by default ULS modules are disabled. It can be enabled using a configuration (ULSMobileWebfontsEnabled).
What does this mean in terms of additional JS loaded?
Webfonts has non trivial performance impact. There were lot of optimization done to reduce the JS payload, but about 100KB font download is required. We dont map webfonts by default to most of languages because of this issue and the whole feature is by default turned off by default. Note that personal font preferences of users vary a lot and lack of consensus, sometimes debates makes us difficult to pick a font and deliver. (for a detailed documentation on the feature, preformance, https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts ). If we blindly add a CSS rule to embed font, no js is required(This is how most websites embed fonts). But the preference mechanism, complex logic to pick one that respect users choices demands JS code and the performance become very curical since the fonts must be ready in very early rendering of content.
I know @Pginer-WMF, @Volker_E, @JGirault and @Krinkle about loading webfonts with JavaScript. On mobile - especially in this use case, - I think it would be perfectly reasonable to load the font via JavaScript when the editor has specified the font.
Looks like this is something in the realm of UniversalLanguageSelector - but let me know if you need any help with code review.
I see two steps here to fix this problem:
Re-checked both mentioned articles (and Mongolian script on Android 6 - the issue(s) with display of Mongolian fonts seem to be fixed:;
