Prerequisites
Describe the issue
system-ui introduced by #25604 & #30561 brings various i18n problems in non-Latin environments. Don't use it in web sites other than WebView-based desktop apps or OS widgets.
Correct (Segoe UI + sans-serif):
↑In 🇨🇳 (Simplified Chinese), "!︁" must be rendered as the form "!︀". In 🇹🇼 and 🇭🇰 (Traditional Chinese), "。︀" must be rendered as the form "。︁".
Incorrect (system-ui → Yu Gothic UI in Japanese Windows):
↑
↑ Some characters are excessively crowded together (by design) and difficult to read.
Although now fixed, Yu Gothic UI had another bug until about six months ago where it unintentionally overlapped consecutive ideographic brackets (「」), leading to nonsensical displays on pages using Tailwind (while the latest version has dropped it, it had relied on system-ui for a long time until recently), such as ChatGPT. This forced Chromium to implement a specific fix to mitigate this bug for Yu Gothic.
w3c/csswg-drafts#11074
https://issues.chromium.org/issues/331123676?pli=1
This was very ugly and annoying.
It is a huge mistake to assume that system-ui will resolve to the most neutral, versatile, and readable font within the OS (e.g., San Fransisco, Segoe UI) on every device.
-apple-system + BlinkMacSystemFont don't interfere with non-Apple OSes and the are the most recommended if you just want to use the most beautiful Latin fonts at least in Apple devices.
system-ui interferes with non-Apple OSes. -apple-system and BlinkMacSystemFont don't.
#22328 & #22377 is preferred.
Reduced test cases
- Set Windows system language to Japanese
- https://codepen.io/tats-u/pen/NPdzpYg
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
v5
Prerequisites
Describe the issue
system-ui introduced by #25604 & #30561 brings various i18n problems in non-Latin environments. Don't use it in web sites other than WebView-based desktop apps or OS widgets.
Correct (Segoe UI + sans-serif):
↑In 🇨🇳 (Simplified Chinese), "!︁" must be rendered as the form "!︀". In 🇹🇼 and 🇭🇰 (Traditional Chinese), "。︀" must be rendered as the form "。︁".
Incorrect (system-ui → Yu Gothic UI in Japanese Windows):
↑
↑ Some characters are excessively crowded together (by design) and difficult to read.
Although now fixed, Yu Gothic UI had another bug until about six months ago where it unintentionally overlapped consecutive ideographic brackets (「」), leading to nonsensical displays on pages using Tailwind (while the latest version has dropped it, it had relied on system-ui for a long time until recently), such as ChatGPT. This forced Chromium to implement a specific fix to mitigate this bug for Yu Gothic.
w3c/csswg-drafts#11074
https://issues.chromium.org/issues/331123676?pli=1
This was very ugly and annoying.
It is a huge mistake to assume that system-ui will resolve to the most neutral, versatile, and readable font within the OS (e.g., San Fransisco, Segoe UI) on every device.
-apple-system + BlinkMacSystemFont don't interfere with non-Apple OSes and the are the most recommended if you just want to use the most beautiful Latin fonts at least in Apple devices.
system-uibehavior is undesired for some users w3c/csswg-drafts#3658system-uiwithastro/starlight#3721sans-seriftosystem-uiin default fonts vuejs/vitepress#4946system-ui, strip it from--ifm-font-family-basefacebook/docusaurus#11727system-ui interferes with non-Apple OSes. -apple-system and BlinkMacSystemFont don't.
#22328 & #22377 is preferred.
Reduced test cases
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
v5