RocketChat / RocketChat/Rocket.Chat
The font in the web UI is not suitable for Chinese (both Traditional and Simplified)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no source file or test; start by reproducing the font mismatch at Account Preferences with Chinese (Taiwan) on Windows, then locate the web UI CSS rules containing the listed font-family. Done means the Chinese UI uses an appropriate Traditional or Simplified Chinese font without the Japanese Meiryo UI fallback.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend, internationalization, localization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100