RocketChat
The font in the web UI is not suitable for Chinese (both Traditional and Simplified)
Description:
The web UI has CSS rules that sets the font-family with the following value or some variants of it:
font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Meiryo UI,Arial,sans-serif;
The list of fonts contains "Meiryo UI", which is a Japanese font. I guess it was first added by #1584 in 2015.
Because many Japanese kanji share the same Unicode code points as Chinese hanzi, when the UI language is set to Chinese some of the UI text is rendered in Meiryo UI, at least on Windows. Since Meiryo is a Japanese font, this has a couple of issues:
- The hanzi that do get rendered in Meiryo will be shown in Japanese writing style, which is often not the same as either Traditional Chinese or Simplified Chinese writing style.
- The hanzi not included in Meiryo will be rendered in the default Chinese font the browser choose. (Since the web UI does set the
langattribute on the root<html>element, modern browsers can correctly decide whether to use a Traditional Chinese font or Simplified Chinese font.)
Steps to reproduce:
- Go to Account Preferences https://open.rocket.chat/account/preferences
- Change language to "Chinese (Taiwan)"
- Save changes
Expected behavior:
The web UI shows in the default Traditional Chinese font configured in the browser, or an appropriate Traditional Chinese font.
Actual behavior:
The web UI shows in a mixture of Meiryo UI and default Traditional Chinese font.
Server Setup Information:
- Version of Rocket.Chat Server: unknown
- License Type: n/a
- Number of Users: n/a
- Operating System: n/a
- Deployment Method: n/a
- Number of Running Instances: n/a
- DB Replicaset Oplog: n/a
- NodeJS Version: n/a
- MongoDB Version: n/a
Client Setup Information
- Desktop App or Browser Version: Firefox 130b6
- Operating System: Windows 10
Additional context
This is only regarding the language preference for the UI, not the actual language of messages sent and received in the chat. (I don't think there is any point in trying to detect that.)
I am not sure whether it is a good idea to change the font depending on the language, or just simply remove Meiryo UI from the font list. FYI the default fonts on Windows is "Microsoft JhengHei UI" for Traditional Chinese and "Microsoft YaHei UI" for Simplified Chinese. (I personally dislike seeing Microsoft JhengHei on webpages though.)
Relevant logs:
n/a
Mine is showing this only is it right??
Depends. Windows installs that are not one of the East Asian languages may not have some Japanese fonts installed, which can be installed by enabling some optional features: https://learn.microsoft.com/en-us/windows/deployment/windows-missing-fonts
Thanks for reporting.
Related https://github.com/RocketChat/Rocket.Chat/issues/33088
If you have a PR for fix this then Rocket.Chat would be pleased to see it.
@alvinhochun @reetp can I pick this issue? Is the Chinese font mentioned added or do we need to add it?
You don't need to @ anyone thanks.
By all means you can try anything.
Add a well documented PR and we'll see if the team will take a look.
Is the Chinese font mentioned added or do we need to add it?
Adding the Chinese fonts to font-family, if done unconditionally, does not fix the issue because you will always have one of the three Chinese and Japanese fonts at a higher precedence than the other two, which means you are still going to piss off two out of the three groups of users.
You can have it apply different sets of fonts per language, but that will probably be quite a complex change.
I am leaning towards that the proper thing to do is to simply remove "Meiryo UI" from font-family everywhere. Nowadays most browsers (including Firefox and Chrome) already use Meiryo for sans-serif and Yu Mincho for serif by default for Japanese, so there is no need to override the browser default. As long as there is no CJK fonts in the font-family list, Traditional Chinese and Simplified Chinese will have their own browser defaults applied as normal.