Get around chrome issue with letter spacing and SVGs with RTL languag…

…es (#1960)
elastic · May 23, 2019 · 9f98067 · 9f98067
1 parent 5c3ed7e
commit 9f98067
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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
+}
diff --git 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
@@ -136,4 +136,4 @@ hr {
 
 fieldset {
   min-inline-size: auto;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -136,4 +136,4 @@ hr { @@
     fieldset {
       min-inline-size: auto;
-    }
+    }