From 8628aae4107b0b64354d88121670d64b9b1e6d55 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 5 Jan 2023 23:11:41 -0500 Subject: [PATCH] Don't prefer STIXGeneral over the default font (#9711) * Don't prefer STIXGeneral over the default font STIXGeneral contains some glyphs for non-LGC scripts, but often doesn't implement these scripts fully. We should always try the browser's default fonts, which are likely to look nicer and have broader script support, before falling back to STIXGeneral. * Explain why STIXGeneral shouldn't have precedence * Add a regression test --- .github/workflows/cypress.yaml | 6 ++++++ cypress/e2e/polls/polls.spec.ts | 5 ++++- res/themes/legacy-light/css/_legacy-light.pcss | 13 ++++++++----- res/themes/light/css/_light.pcss | 11 +++++++---- 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml index 59e904ee0e..5f71523fa1 100644 --- a/.github/workflows/cypress.yaml +++ b/.github/workflows/cypress.yaml @@ -92,6 +92,12 @@ jobs: # # Run 4 instances in Parallel # runner: [1, 2, 3, 4] steps: + - uses: tecolicom/actions-use-apt-tools@v1 + with: + # Our test suite includes some screenshot tests with unusual diacritics, which are + # supposed to be covered by STIXGeneral. + tools: fonts-stix + - uses: actions/checkout@v3 with: # XXX: We're checking out untrusted code in a secure context diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index ce0962410c..c092d4f647 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -115,7 +115,10 @@ describe("Polls", () => { const pollParams = { title: "Does the polls feature work?", - options: ["Yes", "No", "Maybe"], + // Since we're going to take a screenshot anyways, we include some + // non-ASCII characters here to stress test the app's font config + // while we're at it. + options: ["Yes", "Noo⃐o⃑o⃩o⃪o⃫o⃬o⃭o⃮o⃯", "のらねこ Maybe?"], }; createPoll(pollParams); diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 41a4118576..ae52b078a7 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -4,17 +4,20 @@ 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) */ + 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 to native Emoji fonts (if any) to ensure cross-browser consistency */ /* Noto Color Emoji contains digits, in fixed-width, therefore causing digits in flowed text to stand out. TODO: Consider putting all emoji fonts to the end rather than the front. */ -$font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Arial", "Helvetica", - sans-serif, "Noto Color Emoji"; +$font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, + "STIXGeneral", "Noto Color Emoji"; -$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Courier", - monospace, "Noto Color Emoji"; +$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, + "STIXGeneral", "Noto Color Emoji"; /* unified palette */ /* try to use these colors when possible */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 0b016e9c8d..4a1ae7e53a 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -4,17 +4,20 @@ 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) */ + 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 to native Emoji fonts (if any) to ensure cross-browser consistency */ /* Noto Color Emoji contains digits, in fixed-width, therefore causing digits in flowed text to stand out. TODO: Consider putting all emoji fonts to the end rather than the front. */ -$font-family: "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Arial", "Helvetica", sans-serif, +$font-family: "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "STIXGeneral", "Noto Color Emoji"; -$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Courier", - monospace, "Noto Color Emoji"; +$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, + "STIXGeneral", "Noto Color Emoji"; /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */ /* ******************** */