search

RocketChat / Rocket.Chat

The communications platform that puts data protection first.
https://rocket.chat/
Other
40.04k stars 10.33k forks source link

The font in the web UI is not suitable for Chinese (both Traditional and Simplified) #33113

Open alvinhochun opened 3 weeks ago

alvinhochun commented 3 weeks ago

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:

Steps to reproduce:

  1. Go to Account Preferences https://open.rocket.chat/account/preferences
  2. Change language to "Chinese (Taiwan)"
  3. 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:

Client Setup Information

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

sahalbelam commented 3 weeks ago

Mine is showing this only is it right??

Screenshot 2024-08-21 122829

alvinhochun commented 3 weeks ago

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

reetp commented 3 weeks ago

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.

Lakshyezz commented 3 weeks ago

@alvinhochun @reetp can I pick this issue? Is the Chinese font mentioned added or do we need to add it?

reetp commented 3 weeks ago

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.

alvinhochun commented 3 weeks ago

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.