Remove STIXGeneral from the font stack (#10980)

* Remove STIXGeneral from the font stack

STIXGeneral was originally added to our font stack to work around a bug in Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=591346) which caused some obscure combining marks to render as tofu. However, because STIXGeneral unexpectedly has glyphs for a handful of common Japanese characters, it's ended up making Japanese text in Element look patchy. I previously attempted to fix this by prioritizing sans-serif over STIXGeneral, but as is evident from our screenshot tests and user reports, this is still not enough on some systems to get Chrome to pick a consistent font for Japanese. On the basis that i18n is more important than supporting a few mathematical diacritics, I propose we remove the font. STIXGeneral is deprecated anyways, so if we want to get these diacritics back there's always the option of looking at its successor, STIXTwo.

* Remove STIXGeneral installation from Cypress workflow
This commit is contained in:
Robin 2023-05-31 22:13:55 -04:00 committed by GitHub
parent 143ffccb0a
commit 6be09eec09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 24 deletions

View file

@ -120,12 +120,6 @@ jobs:
- uses: browser-actions/setup-chrome@c485fa3bab6be59dce18dbc18ef6ab7cbc8ff5f1 - uses: browser-actions/setup-chrome@c485fa3bab6be59dce18dbc18ef6ab7cbc8ff5f1
- run: echo "BROWSER_PATH=$(which chrome)" >> $GITHUB_ENV - run: echo "BROWSER_PATH=$(which chrome)" >> $GITHUB_ENV
- uses: tecolicom/actions-use-apt-tools@ceaf289fdbc6169fd2406a0f0365a584ffba003b # v1
with:
# Our test suite includes some screenshot tests with unusual diacritics, which are
# supposed to be covered by STIXGeneral.
tools: fonts-stix
# There's a 'download artifact' action, but it hasn't been updated for the workflow_run action # There's a 'download artifact' action, but it hasn't been updated for the workflow_run action
# (https://github.com/actions/download-artifact/issues/60) so instead we get this mess: # (https://github.com/actions/download-artifact/issues/60) so instead we get this mess:
- name: 📥 Download artifact - name: 📥 Download artifact

View file

@ -1,23 +1,17 @@
/* Nunito lacks combining diacritics, so these will fall through /* Nunito lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics sometimes do not combine to the next font. Helevetica's diacritics sometimes do not combine
nicely (on OSX, at least) and result in a huge horizontal mess. nicely (on OSX, at least) and result in a huge horizontal mess.
Arial empirically gets it right, hence prioritising Arial here. Arial empirically gets it right, hence prioritising Arial here. */
We also include STIXGeneral explicitly to support a wider range
of combining diacritics (Chrome fails without it, as per
https://bugs.chromium.org/p/chromium/issues/detail?id=1328898).
We should never actively *prefer* STIXGeneral over the default font though,
since it looks pretty rough and implements some non-LGC scripts only
partially, making, for example, Japanese text look patchy and sad. */
/* We fall through to Twemoji for emoji rather than falling through /* We fall through to Twemoji for emoji rather than falling through
to native Emoji fonts (if any) to ensure cross-browser consistency */ to native Emoji fonts (if any) to ensure cross-browser consistency */
/* Noto Color Emoji contains digits, in fixed-width, therefore causing /* Noto Color Emoji contains digits, in fixed-width, therefore causing
digits in flowed text to stand out. digits in flowed text to stand out.
TODO: Consider putting all emoji fonts to the end rather than the front. */ TODO: Consider putting all emoji fonts to the end rather than the front. */
$font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, $font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
"STIXGeneral", "Noto Color Emoji"; "Noto Color Emoji";
$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"STIXGeneral", "Noto Color Emoji"; "Noto Color Emoji";
/* unified palette */ /* unified palette */
/* try to use these colors when possible */ /* try to use these colors when possible */

View file

@ -1,23 +1,17 @@
/* Nunito and Inter lacks combining diacritics, so these will fall through /* Nunito and Inter lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics sometimes do not combine to the next font. Helevetica's diacritics sometimes do not combine
nicely (on OSX, at least) and result in a huge horizontal mess. nicely (on OSX, at least) and result in a huge horizontal mess.
Arial empirically gets it right, hence prioritising Arial here. Arial empirically gets it right, hence prioritising Arial here. */
We also include STIXGeneral explicitly to support a wider range
of combining diacritics (Chrome fails without it, as per
https://bugs.chromium.org/p/chromium/issues/detail?id=1328898).
We should never actively *prefer* STIXGeneral over the default font though,
since it looks pretty rough and implements some non-LGC scripts only
partially, making, for example, Japanese text look patchy and sad. */
/* We fall through to Twemoji for emoji rather than falling through /* We fall through to Twemoji for emoji rather than falling through
to native Emoji fonts (if any) to ensure cross-browser consistency */ to native Emoji fonts (if any) to ensure cross-browser consistency */
/* Noto Color Emoji contains digits, in fixed-width, therefore causing /* Noto Color Emoji contains digits, in fixed-width, therefore causing
digits in flowed text to stand out. digits in flowed text to stand out.
TODO: Consider putting all emoji fonts to the end rather than the front. */ TODO: Consider putting all emoji fonts to the end rather than the front. */
$font-family: "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "STIXGeneral", $font-family: "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
"Noto Color Emoji"; "Noto Color Emoji";
$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"STIXGeneral", "Noto Color Emoji"; "Noto Color Emoji";
/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */
/* ******************** */ /* ******************** */