From ef699464403fb7b42f268dd36a09a2f1ddd49ff8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 25 May 2022 04:37:08 +0100 Subject: [PATCH] Improve combining diacritics in Chrome (#8687) This makes all but 9 of U+20D0 to U+20F0 combine correctly on Chrome. See also https://bugs.chromium.org/p/chromium/issues/detail?id=1328898 --- res/themes/legacy-light/css/_legacy-light.scss | 12 +++++++----- res/themes/light/css/_light.scss | 12 ++++++++---- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 4121ca8f6a..024147cb80 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -1,16 +1,18 @@ -// XXX: check this? /* Nunito lacks combining diacritics, so these will fall through - to the next font. Helevetica's diacritics however 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. - 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 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', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji'; +$font-family: 'Nunito', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'STIXGeneral', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji'; -$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji'; +$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'STIXGeneral', 'Courier', monospace, 'Noto Color Emoji'; // unified palette // try to use these colors when possible diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 6354087265..e5b1382893 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -1,8 +1,10 @@ -// XXX: check this? -/* Nunito lacks combining diacritics, so these will fall through - to the next font. Helevetica's diacritics however do not combine +/* Nunito and Inter lacks combining diacritics, so these will fall through + to the next font. Helevetica's diacritics sometimes do not combine 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 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 @@ -12,6 +14,7 @@ $font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', +'STIXGeneral', 'Arial', 'Helvetica', sans-serif, @@ -21,6 +24,7 @@ $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', +'STIXGeneral', 'Courier', monospace, 'Noto Color Emoji';