From 9f9806751d5f49fb17043aea46f86c1aad075abd Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Thu, 23 May 2019 11:50:33 -0700 Subject: [PATCH] Get around chrome issue with letter spacing and SVGs with RTL languages (#1960) --- CHANGELOG.md | 4 ++++ src/global_styling/reset/_hacks.scss | 5 +++++ src/global_styling/reset/_index.scss | 1 + src/global_styling/reset/_reset.scss | 2 +- 4 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 src/global_styling/reset/_hacks.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b670192fa9..cf4b8ceefd8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ - Updated `EuiIcon` to use Slack's updated branding ([#1954](https://github.com/elastic/eui/pull/1954)) - Updated `compile-icons` script to format icon components with Prettier ([#1955](https://github.com/elastic/eui/pull/1955)) +**Bug fixes** + +- Addressed a chrome issue where negative letter-spacing can reverse RTL text in SVGs ([#1960](https://github.com/elastic/eui/pull/1960)) + ## [`11.1.0`](https://github.com/elastic/eui/tree/v11.1.0) - Converted `pretty_interval` to TS ([#1920](https://github.com/elastic/eui/pull/1920)) diff --git a/src/global_styling/reset/_hacks.scss b/src/global_styling/reset/_hacks.scss new file mode 100644 index 00000000000..3a69b4bcd26 --- /dev/null +++ b/src/global_styling/reset/_hacks.scss @@ -0,0 +1,5 @@ +// Chrome has an issue around RTL languages in SVGs when letter-spacing is negative +// https://bugs.chromium.org/p/chromium/issues/detail?id=966480 +svg text { + letter-spacing: normal !important; // sass-lint:disable-line no-important +} \ No newline at end of file diff --git a/src/global_styling/reset/_index.scss b/src/global_styling/reset/_index.scss index 4a15b73c70c..23aead08d55 100644 --- a/src/global_styling/reset/_index.scss +++ b/src/global_styling/reset/_index.scss @@ -1,2 +1,3 @@ @import 'reset'; +@import 'hacks'; @import 'scrollbar'; diff --git a/src/global_styling/reset/_reset.scss b/src/global_styling/reset/_reset.scss index 6b4539a0fc3..0824f6a834e 100644 --- a/src/global_styling/reset/_reset.scss +++ b/src/global_styling/reset/_reset.scss @@ -136,4 +136,4 @@ hr { fieldset { min-inline-size: auto; -} +} \ No newline at end of file