Skip to content

Strip system-ui from --bs-font-sans-serif, sysem-ui have many i18n problems #42703

Description

@tats-u

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):

Image

↑In 🇨🇳 (Simplified Chinese), "!︁" must be rendered as the form "!︀". In 🇹🇼 and 🇭🇰 (Traditional Chinese), "。︀" must be rendered as the form "。︁".

Image

Incorrect (system-ui → Yu Gothic UI in Japanese Windows):

Image

Image

↑ 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

Image

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

  1. Set Windows system language to Japanese
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions