Repository navigation
Chinese text display font changed��#1589
Description
Describe the bug
When visiting repository with Chinese text, the font has changed from system default to Meiryo, a Japanese font that do not cover some Chinese characters leading to uneven reading experience. This seem to be related with #1573
To Reproduce
Please visit https://github.com/NightFurySL2001/TangYuan-font or any other repository with Chinese text.
Expected behavior
The font used should be fitting the locale of markdown text or default system locale font.
Screenshots
Side note: this will be more prominent in Simplified Chinese than in Traditional Chinese text.
Activity
NightFurySL2001 commentedon Sep 13, 2021
According to https://infinnie.github.io/blog/2017/systemui.html (which is mentioned in here:
css/src/support/variables/typography.scss
Line 42 in 5eb8113
),
system-uishould have already been resolved by Windows to fit the language of OS, which if set to Japanese should be resolved to Meiryo anyway. Segoe UI should be written beforesystem-uiis due to the fact that Latin characters provided by CJK fonts are bad (i.e. Microsoft YaHei UI for Chinese (Simplified), Microsoft JhengHei UI for Chinese (Traditional) and Meiryo for Japanese) and thus Segoe UI will supersede CJK fonts for the Latin part, but lettingsystem-uito determine which locale font to use by the OS. Writing Meiryo into the fallback list breaks this fallback mechanism and break text display for Chinese. Quoting from the site:simurai commentedon Sep 14, 2021
@NightFurySL2001 Thanks for reporting. The changes in #1573 got reverted in #1592. It should soon be updated on github.com too.
imandrakola commentedon Sep 14, 2021
good thank you ... .
NightFurySL2001 commentedon Sep 14, 2021
@imandrakola did the changes affected you in any way?
NightFurySL2001 commentedon Sep 14, 2021
@simurai I had a little discussion with some Simplified Chinese users and one has provided an insight as follow:
If Primer aims to replicate system display font in the browser, they should use
system-uias the first font in the first place; the problem described by @infinnie in https://infinnie.github.io/blog/2017/systemui.html is actually a non-issue. According to the reply in #1209 (comment):Assuming you agree that "if a user had set their system font to a serif font, GitHub should use the serif font too", the following will stand true:
Besides, even considering Windows 8/10 of Microsoft YaHei UI, it is not suitable to pair Microsoft YaHei UI with Segoe UI as Segoe UI is a tad bit thinner than Microsoft YaHei UI even though Segoe UI has more weights than Microsoft YaHei UI. It should also be noted that in Simplified Chinese Windows 8/10, all characters including Latin characters are displayed with Microsoft YaHei UI, not Segoe UI; overriding Segoe UI in GitHub is a different behaviour compared to Windows 8/10.
So what are the suitable suggestion? Quoting from https://fontsarena.com/blog/operating-systems-default-sans-serif-fonts/, the best font stack is:
BlinkMacSystemFont can be removed in this case (see #838), resulting in
where browser/system provided font supersede specified font.
If a user doesn't like what the display font is given, then it should be their own responsibility to fix it since the font will be chosen based on their OS, as
system-uihad completed its own intended action which is the correct response. Reasons such as "users cannot change their system font" should not be accepted as a reason to not usesystem-uias it is the responsibility for the OS to provide methods to change the system font, not the burden of website developers.P/S:
Broken vertical font alignment on Fedora #1209 might be fixed by placing
system-uiin first place as the line height in CSS is based on the first font in the fallback list that return a font., whichsystem-uiwill match in most platform now.https://medium.com/towards-more-beautiful-web-typography/survey-system-font-stack-5f73a3b39776 by
Masa Kudamatsu linked here has written one thing wrong:
It should be:
laterearlier (when choosing Classic theme on Windows 7/Vista; choosing Aero theme on Windows 7 do not reproduce the same result, which will use Microsoft YaHei UI where its Latin parts is based on Segoe UI) render the font....an old bitmap fontSimSun, where at particular font size will display its bitmap version....simurai commentedon Sep 15, 2021
@NightFurySL2001 Thanks for all the extra infos.
I hope that one day (might could still take a few years), we would only need:
And all browsers would reliably use the default system/OS font. Something I'm not sure is if it would adapt to the user changing the settings. For example if a user changes from English to Chinese as the system language, would that have an impact on the system font. It would be a huge help if the OS would pick the "best" font based on user's settings and preferences and
system-uiwould automatically adapt to it.Until then, I think we still need to manually try to find the right mix to have the best compromise for everyone.
NightFurySL2001 commentedon Sep 15, 2021
@simurai Actually,
system-uishould already be reliable and usable on all browser and system. The case demonstrated by @infinnie in https://infinnie.github.io/blog/2017/systemui.html is a result of the user manually changing the theme to Classic style in Simplified Chinese version of Windows 7, which is the correct response as the system OS font in Windows 7 Simplified Chinese Classic style is the font used by the browser, i.e. SimSun.The only thing that I am worried is the font fallback of system OS as it is hard or near impossible to configure (mainly on Windows). For example, a user might want to use English version of Windows 10 but they might be fluent in Chinese and visit Chinese website frequently (which is a realistic scenario for people outside China and Taiwan), in which
system-uiwill return Segoe UI, however what font will the Chinese text be chosen to display in is hard to predict. In the case of unconfigured external language, the font chosen should be Meiryo, the Japanese font chosen for Windows UI, however it will affect Chinese users (as demonstrated in this issue).infinnie commentedon Sep 15, 2021
@NightFurySL2001 On Windows the
system-uifont uses the font for the script of the local language throughout the character set it supports, even for Latin scripts.The SimSun screenshot just better demonstrates the problem.
NightFurySL2001 commentedon Sep 15, 2021
@infinnie That is correct, however it is the intended response of
system-uion Windows. As Primer aims to replicate the system font usingsystem-ui, this should not be seen as a bug. Writing Segoe UI into the CSS will make the webpage different from the system font. Here are demos taken from my Windows 7 Simplified Chinese machine which should demonstrate my point more clearly than the screenshot you gave:Windows 7 Aero theme, using Microsoft YaHei:
Windows 7 Classic theme, using SimSun:
index.htmlcode:infinnie commentedon Sep 16, 2021
For readers however, this might be an awful experience.
NightFurySL2001 commentedon Sep 16, 2021
Then this will be the responsibility of the users to change their system font: if a site using
system-uiis awful to look at, then isn't their desktop awful to look at anyway? This problem should not be beared by Primer as the aim is to replicate the system look, not to look good, and usingsystem-uiin CSS will do this job perfectly. Quoting from this comment:Thus, this shouldn't be use as an argument against Primer as it is the objective of Primer.
P/S: Fonts in Windows 7 at least is customizable in Personalization menu... Windows 10 do not have a central location to change system-wide font (mainly due to UWP apps) apart from swapping Microsoft YaHei UI with self-made font. E.g. the desktop font could be swapped in HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics or with WinAeroTweaker, however UWP apps like Settings and Calculator will not be affected by those changes.
infinnie commentedon Sep 16, 2021
Problem is that the you can’t expect that a user changes his or her UI font—it is sometimes too hard for an unskilled user to change.
Few of legacy PC users know how to correctly use regedit, for example, and they are exactly those who suffer from my aforementioned problem, especially when they have to read long texts. UIs per se, however, suffer less from this problem on the one hand due to less text displayed, and on the other need to ensure that legacy programs correctly display as much text as possible.
Browsers’ rendering engines are equipped with much better capability to both render content set in multiple scripts and easily switch between fonts.
Serifs can be good as UI fonts, by the way.
NightFurySL2001 commentedon Sep 16, 2021
I acknowledge that the UI font is hard to change, however it is not the responsibility of Primer to provide a good-looking font for GitHub: the aim is to replicate the system font, not to improve on it.
system-uiwill do that correctly just fine. The burden of inability to change the system font lies on the system vendor (i.e. Microsoft) who nowadays hard-code most of the UI font on a per-app basis.Unless GitHub provide ways for users to tag the language of a comment or text in Markdown without resorting to manually writing all the HTML
<span lang="jp"></span>, rendering engine of web browsers will not render scripts correctly using the settings. For example, the header on this page giveslang="en"and the font in which Chinese text display is up to system settings.Or, GitHub should abandon "replicate system font" and choose to use the best font available on the system. This will require extensive effort for the GitHub/Primer team to determine UI fonts for each system for each scripts, which will still run into the Chinese/Japanese issues.
A test here: please determine the font used in your browser for the following two lines:
The first one is pure Markdown, the second is a
<span>withlang="jp". They will have no difference unless a CSS is written for:lang(jp), but even if that is done on GitHub right now, the first one is still up to the normal CSS font stack as it will not be affected by the styling. You could not expect all user-generated contents to be language tagged.CC @simurai to take note of this issue and determine what should Primer do for GitHub: to replicate system font, or to make a new style on their own.
infinnie commentedon Sep 16, 2021
And it is exactly on GitHub that one could have to read long text copies that may or may not be set in a foreign language (e.g. https://github.com/microsoft/vscode/labels/%2Aenglish-please)
NightFurySL2001 commentedon Sep 16, 2021
My point is,
system-uiis currently the best way to achieve what Primer wants, which is to replicate system font. E.g. on my system in this page (microsoft/vscode#132448), the Japanese text is shown with Microsoft YaHei when it should have been Meiryo. Usingsystem-uimight not fix this issue (this will require user language-tagging their comments), but it will most certainly choose the display font that fits the user's need. You do not want a Simplified Chinese user to use Meiryo for Simplified Chinese text as some glyphs are different in Simplified Chinese and Japanese.The benefit of using
system-uiis that users of Simplified Chinese will use Microsoft YaHei correctly, while Japanese users will use Meiryo correctly. If you show a Simplified Chinese users (who did not learn Japanese) text with Japanese font, they will know that the display is incorrect and this is a larger issue than trying to read long text of copies correctly.Also, users of legacy system chose to use Classic theme on their own and thus it is their responsibility to fix the browser font as they see fit. Modern system should not be able to reproduce the "problem" anymore unless the user chose to change the font/theme themselves, and thus there is no need to cater for such a specific problem for only a minimal user base while forcing others to lose the benefit of using
system-uiin their CSS.P/S: it should be easier for Windows 7 users on Classic theme to change the font without using regedit: see https://mcmw.abilitynet.org.uk/windows-7-changing-fonts
NightFurySL2001 commentedon Oct 1, 2021
@simurai May I ask what is the stance of Primer team on this issue? I think reintroducing
system-uiinto the CSS font fallback as the first option is the optimal way forward if Primer wants to "replicate user system font" as per #1209 (comment). However, if Primer wants to give the "best" font experience, then sadlysystem-uiwill break that dream as most of the time OS (yes i'm pointing at you Microsoft) will not fix or upgrade the font easily for non-Latin/LCG scripts (or neither provide options for user to change OS font easily).simurai commentedon Oct 6, 2021
If possible, it would be nice to have both. 😬
Might be wishful thinking and pretty hard to achieve with lots of OS versions and languages. We haven't planned anything, but we might can give it another try at some point.
NightFurySL2001 commentedon Oct 6, 2021
I would say without language tagging on GitHub, trying to use a better font for different OS will be a hell for developers as GitHub is a global community and there are multiple overlapping requirements for different scripts. Unless Primer could accept 50+ font declaration for only basic scripts per OS (and that's an underestimation, look how many fonts are there in Noto fonts), it would be better to either: 1. use
system-uiand let the OS decide, or 2. write only Latin (or LCG) section for GitHub and left the rest to the users/OS (Google Chrome has Advance Font Settings plugin that could do part of the heavy-lifting).