From fcabe3441d6e53e474b9b4ffdd7b1c1971b3acbf Mon Sep 17 00:00:00 2001 From: lironmil Date: Mon, 1 Apr 2024 18:11:04 +0200 Subject: [PATCH 1/5] Fix: Inter italic bug in Safari Text marked with element is not slanted. See issue: https://github.com/mdn/yari/issues/7203 --- client/src/ui/base/_reset.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/src/ui/base/_reset.scss b/client/src/ui/base/_reset.scss index 0d4c30536c6d..a5c630f6f36b 100644 --- a/client/src/ui/base/_reset.scss +++ b/client/src/ui/base/_reset.scss @@ -62,6 +62,11 @@ picture { max-width: 100%; } +/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */ +em { + font-variation-settings: "slnt" -10; +} + /* Inherit fonts for inputs and buttons */ input, button, From c702557de36fd664e9b35c5801a05a402710f700 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Thu, 4 Apr 2024 22:01:44 +0200 Subject: [PATCH 2/5] fix(fonts): apply font-variation-settings to all italic elements --- .../document/ingredients/browser-compatibility-table/index.scss | 1 + client/src/document/mathml-polyfill/mathml.css | 2 ++ client/src/homepage/contributor-spotlight/index.scss | 1 + client/src/minimal-prism.scss | 1 + client/src/plus/collections/collection.scss | 2 ++ client/src/plus/icon-card/index.scss | 1 + .../src/plus/offer-overview/offer-overview-subscribe/index.scss | 1 + client/src/plus/plus-docs/index.scss | 1 + client/src/site-search/index.scss | 1 + client/src/site-search/search-results.scss | 2 ++ client/src/ui/base/_prism.scss | 1 + client/src/ui/molecules/quote/index.scss | 1 + client/src/ui/molecules/search/index.scss | 1 + 13 files changed, 16 insertions(+) diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss index 7fdb5556ca31..88bf9620423a 100644 --- a/client/src/document/ingredients/browser-compatibility-table/index.scss +++ b/client/src/document/ingredients/browser-compatibility-table/index.scss @@ -180,6 +180,7 @@ .bc-legend-tip { font-size: var(--type-smaller-font-size); font-style: italic; + font-variation-settings: "slnt" -10; margin-bottom: 1rem; margin-top: 0; } diff --git a/client/src/document/mathml-polyfill/mathml.css b/client/src/document/mathml-polyfill/mathml.css index 4c2a6ab47dee..5f38ad36c316 100644 --- a/client/src/document/mathml-polyfill/mathml.css +++ b/client/src/document/mathml-polyfill/mathml.css @@ -193,6 +193,7 @@ mspace { } mi { font-style: italic; + font-variation-settings: "slnt" -10; } mo { margin-right: 0.2em; @@ -233,6 +234,7 @@ ms[rquote]:after { [mathvariant="sans-serif-italic"], [mathvariant="sans-serif-bold-italic"] { font-style: italic; + font-variation-settings: "slnt" -10; } [mathvariant="normal"] { font-style: normal; diff --git a/client/src/homepage/contributor-spotlight/index.scss b/client/src/homepage/contributor-spotlight/index.scss index 95f900957e3c..0f94bbcbf30a 100644 --- a/client/src/homepage/contributor-spotlight/index.scss +++ b/client/src/homepage/contributor-spotlight/index.scss @@ -13,6 +13,7 @@ border: 0; display: flex; font-style: italic; + font-variation-settings: "slnt" -10; margin: 0; padding: 0; diff --git a/client/src/minimal-prism.scss b/client/src/minimal-prism.scss index fc8ee24d19f6..0534c1a37b63 100644 --- a/client/src/minimal-prism.scss +++ b/client/src/minimal-prism.scss @@ -72,6 +72,7 @@ don't use any of that, we can safely ignore it. .token.italic { font-style: italic; + font-variation-settings: "slnt" -10; } .token.entity { diff --git a/client/src/plus/collections/collection.scss b/client/src/plus/collections/collection.scss index 2f974ab849d2..c11cddd7fef1 100644 --- a/client/src/plus/collections/collection.scss +++ b/client/src/plus/collections/collection.scss @@ -69,6 +69,7 @@ .breadcrumbs { font-size: 0.6875rem; font-style: italic; + font-variation-settings: "slnt" -10; margin-top: -0.5rem; } @@ -98,6 +99,7 @@ font-size: 0.875rem; font-style: italic; + font-variation-settings: "slnt" -10; gap: 1rem; padding: 1rem; diff --git a/client/src/plus/icon-card/index.scss b/client/src/plus/icon-card/index.scss index 498e7f659baf..d7b93dec74bd 100644 --- a/client/src/plus/icon-card/index.scss +++ b/client/src/plus/icon-card/index.scss @@ -43,6 +43,7 @@ display: flex; font-size: 0.75rem; font-style: italic; + font-variation-settings: "slnt" -10; height: 3rem; justify-content: center; padding: 0.5rem; diff --git a/client/src/plus/offer-overview/offer-overview-subscribe/index.scss b/client/src/plus/offer-overview/offer-overview-subscribe/index.scss index 1f628aa2ea7d..808fa6ade6e1 100644 --- a/client/src/plus/offer-overview/offer-overview-subscribe/index.scss +++ b/client/src/plus/offer-overview/offer-overview-subscribe/index.scss @@ -178,6 +178,7 @@ color: var(--text-invert); font-size: 14px; font-style: italic; + font-variation-settings: "slnt" -10; margin-top: auto; text-decoration: underline; diff --git a/client/src/plus/plus-docs/index.scss b/client/src/plus/plus-docs/index.scss index 25310307d78a..133a0e3f5691 100644 --- a/client/src/plus/plus-docs/index.scss +++ b/client/src/plus/plus-docs/index.scss @@ -40,6 +40,7 @@ p { font-style: italic; + font-variation-settings: "slnt" -10; } } diff --git a/client/src/site-search/index.scss b/client/src/site-search/index.scss index 1b5c851e4d17..c39827600646 100644 --- a/client/src/site-search/index.scss +++ b/client/src/site-search/index.scss @@ -2,6 +2,7 @@ .query-string { font-style: italic; + font-variation-settings: "slnt" -10; } .site-search { diff --git a/client/src/site-search/search-results.scss b/client/src/site-search/search-results.scss index 3bbfaa169d8d..b63bde4b63f5 100644 --- a/client/src/site-search/search-results.scss +++ b/client/src/site-search/search-results.scss @@ -11,6 +11,7 @@ .highlight { font-style: italic; + font-variation-settings: "slnt" -10; } .nerd-data { @@ -83,6 +84,7 @@ border-radius: var(--elem-radius); color: var(--text-primary); font-style: italic; + font-variation-settings: "slnt" -10; } } diff --git a/client/src/ui/base/_prism.scss b/client/src/ui/base/_prism.scss index 4e56629469b7..6adb032ff8f6 100644 --- a/client/src/ui/base/_prism.scss +++ b/client/src/ui/base/_prism.scss @@ -53,6 +53,7 @@ .token.italic { font-style: italic; + font-variation-settings: "slnt" -10; } .token.entity { diff --git a/client/src/ui/molecules/quote/index.scss b/client/src/ui/molecules/quote/index.scss index 1c20b6965807..c6525ad7cc8b 100644 --- a/client/src/ui/molecules/quote/index.scss +++ b/client/src/ui/molecules/quote/index.scss @@ -14,6 +14,7 @@ blockquote.quote { p { display: flex; font-style: italic; + font-variation-settings: "slnt" -10; .icon { margin-right: 1rem; diff --git a/client/src/ui/molecules/search/index.scss b/client/src/ui/molecules/search/index.scss index 5f12f60a0ca1..94ea6080a45d 100644 --- a/client/src/ui/molecules/search/index.scss +++ b/client/src/ui/molecules/search/index.scss @@ -140,6 +140,7 @@ .nothing-found { font-style: italic; + font-variation-settings: "slnt" -10; } .result-item { From 47cb01d47d79ffc975c9036fd52a7197a129c7ec Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Thu, 4 Apr 2024 22:02:27 +0200 Subject: [PATCH 3/5] fix(fonts): unset font-variation-settings where font-style is unset --- client/src/plus/ai-help/landing.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/plus/ai-help/landing.scss b/client/src/plus/ai-help/landing.scss index 107f5636ff86..183f25c9ca71 100644 --- a/client/src/plus/ai-help/landing.scss +++ b/client/src/plus/ai-help/landing.scss @@ -42,6 +42,7 @@ em { color: var(--category-color); font-style: unset; + font-variation-settings: unset; } } @@ -140,6 +141,7 @@ em { font-style: unset; + font-variation-settings: unset; font-weight: 600; } } From d1f29af44cf98645978c6bdcf0b01c79001d1fdf Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Thu, 4 Apr 2024 22:06:45 +0200 Subject: [PATCH 4/5] fix(fonts): set font-variation-settings: normal where font-style: normal --- client/src/about/index.scss | 1 + client/src/curriculum/index.scss | 1 + client/src/document/mathml-polyfill/mathml.css | 4 ++++ client/src/document/organisms/sidebar/index.scss | 1 + client/src/plus/collections/collection.scss | 1 + client/src/plus/common/login-banner.scss | 1 + .../plus/offer-overview/offer-overview-subscribe/index.scss | 3 +++ client/src/plus/plus-docs/index.scss | 1 + 8 files changed, 13 insertions(+) diff --git a/client/src/about/index.scss b/client/src/about/index.scss index 802f46359872..5b262293963c 100644 --- a/client/src/about/index.scss +++ b/client/src/about/index.scss @@ -29,6 +29,7 @@ font-family: var(--font-heading); font-size: 1.313rem; font-style: normal; + font-variation-settings: normal; font-weight: normal; line-height: 175%; margin: 0; diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss index 0c33a57132a8..9350b0c34645 100644 --- a/client/src/curriculum/index.scss +++ b/client/src/curriculum/index.scss @@ -101,6 +101,7 @@ border-left: 2px solid var(--category-color); display: inline-block; font-style: normal; + font-variation-settings: normal; font-weight: 600; padding: 0.25rem 0.25rem 0.25rem 0.5rem; width: 100%; diff --git a/client/src/document/mathml-polyfill/mathml.css b/client/src/document/mathml-polyfill/mathml.css index 5f38ad36c316..fb23fe261b2a 100644 --- a/client/src/document/mathml-polyfill/mathml.css +++ b/client/src/document/mathml-polyfill/mathml.css @@ -217,10 +217,12 @@ ms[rquote]:after { [mathvariant="sans-serif-bold-italic"] { font-weight: var(--font-body-strong-weight); font-style: normal; + font-variation-settings: normal; } [mathvariant="monospace"] { font-family: monospace; font-style: normal; + font-variation-settings: normal; } [mathvariant="sans-serif"], [mathvariant="bold-sans-serif"], @@ -228,6 +230,7 @@ ms[rquote]:after { [mathvariant="sans-serif-bold-italic"] { font-family: sans-serif; font-style: normal; + font-variation-settings: normal; } [mathvariant="italic"], [mathvariant="bold-italic"], @@ -238,6 +241,7 @@ ms[rquote]:after { } [mathvariant="normal"] { font-style: normal; + font-variation-settings: normal; } /* mphantom */ diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss index 57c1716cd891..eba698672a50 100644 --- a/client/src/document/organisms/sidebar/index.scss +++ b/client/src/document/organisms/sidebar/index.scss @@ -19,6 +19,7 @@ border-left: 2px solid var(--category-color); display: inline-block; font-style: normal; + font-variation-settings: normal; font-weight: 600; hyphens: auto; padding: 0.25rem; diff --git a/client/src/plus/collections/collection.scss b/client/src/plus/collections/collection.scss index c11cddd7fef1..a4dcb2f6c660 100644 --- a/client/src/plus/collections/collection.scss +++ b/client/src/plus/collections/collection.scss @@ -120,6 +120,7 @@ &.code { font-family: var(--font-code); font-style: normal; + font-variation-settings: normal; } } } diff --git a/client/src/plus/common/login-banner.scss b/client/src/plus/common/login-banner.scss index cef4df848211..53416b439b77 100644 --- a/client/src/plus/common/login-banner.scss +++ b/client/src/plus/common/login-banner.scss @@ -12,6 +12,7 @@ .plus-link { color: var(--text-primary); font-style: normal; + font-variation-settings: normal; text-decoration: underline; text-decoration-thickness: 0.15rem; text-underline-offset: 0.1em; diff --git a/client/src/plus/offer-overview/offer-overview-subscribe/index.scss b/client/src/plus/offer-overview/offer-overview-subscribe/index.scss index 808fa6ade6e1..3d952803e537 100644 --- a/client/src/plus/offer-overview/offer-overview-subscribe/index.scss +++ b/client/src/plus/offer-overview/offer-overview-subscribe/index.scss @@ -16,6 +16,7 @@ color: var(--text-primary); font-size: 24px; font-style: normal; + font-variation-settings: normal; font-weight: 650; line-height: 120%; margin-bottom: 2rem; @@ -103,6 +104,7 @@ .sub-price { font-size: 36px; font-style: normal; + font-variation-settings: normal; font-weight: 650; grid-column: 1/2; justify-self: right; @@ -117,6 +119,7 @@ .sub-length { font-size: 0.8rem; font-style: normal; + font-variation-settings: normal; grid-column: 2/3; justify-self: left; line-height: 120%; diff --git a/client/src/plus/plus-docs/index.scss b/client/src/plus/plus-docs/index.scss index 133a0e3f5691..f3aabbf73c01 100644 --- a/client/src/plus/plus-docs/index.scss +++ b/client/src/plus/plus-docs/index.scss @@ -8,6 +8,7 @@ .main-page-content { em { font-style: normal; + font-variation-settings: normal; text-decoration: underline; text-decoration-color: var(--text-link); text-decoration-thickness: 0.15rem; From c8c7804685b8f6107abdd704fac376d857fefe0f Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Thu, 4 Apr 2024 22:15:06 +0200 Subject: [PATCH 5/5] revert: do not set font-variation-settings for mathml polyfill --- client/src/document/mathml-polyfill/mathml.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/client/src/document/mathml-polyfill/mathml.css b/client/src/document/mathml-polyfill/mathml.css index fb23fe261b2a..4c2a6ab47dee 100644 --- a/client/src/document/mathml-polyfill/mathml.css +++ b/client/src/document/mathml-polyfill/mathml.css @@ -193,7 +193,6 @@ mspace { } mi { font-style: italic; - font-variation-settings: "slnt" -10; } mo { margin-right: 0.2em; @@ -217,12 +216,10 @@ ms[rquote]:after { [mathvariant="sans-serif-bold-italic"] { font-weight: var(--font-body-strong-weight); font-style: normal; - font-variation-settings: normal; } [mathvariant="monospace"] { font-family: monospace; font-style: normal; - font-variation-settings: normal; } [mathvariant="sans-serif"], [mathvariant="bold-sans-serif"], @@ -230,18 +227,15 @@ ms[rquote]:after { [mathvariant="sans-serif-bold-italic"] { font-family: sans-serif; font-style: normal; - font-variation-settings: normal; } [mathvariant="italic"], [mathvariant="bold-italic"], [mathvariant="sans-serif-italic"], [mathvariant="sans-serif-bold-italic"] { font-style: italic; - font-variation-settings: "slnt" -10; } [mathvariant="normal"] { font-style: normal; - font-variation-settings: normal; } /* mphantom */