Merge pull request #442 from BeAPI/fix-rtl-functions

fix rtl functions with all language codes

Author: cedric07

src/js/utils/isRTL.js

@@ -1,7 +1,17 @@
 export default function isRTL() {
-  return (
-    document.documentElement.dir === 'rtl' ||
-    document.documentElement.lang === 'ar' ||
-    document.documentElement.lang === 'iw'
-  )
+  const rtlLanguages = [
+    'ar', // Arabic
+    'fa', // Persian (Farsi)
+    'he', // Hebrew (modern code)
+    'iw', // Hebrew (legacy code)
+    'ur', // Urdu
+    'ps', // Pashto
+    'sd', // Sindhi
+    'ug', // Uyghur
+    'dv', // Divehi (Maldivian)
+    'ku', // Kurdish (Sorani)
+    'yi', // Yiddish
+  ]
+
+  return document.documentElement.dir === 'rtl' || rtlLanguages.includes(document.documentElement.lang)
 }

src/scss/02-tools/_m-rtl.scss

@@ -1,5 +1,5 @@
 /**
- * Support for rtl text, explicit support for Arabic and Hebrew
+ * Support for rtl text, explicit support for all RTL languages
  *
  * @author Cédric Andrietti
  *
@@ -13,17 +13,33 @@
  *
  */
 
+$rtl-languages: (
+    "ar",  // Arabic
+    "fa",  // Persian (Farsi)
+    "he",  // Hebrew (modern code)
+    "iw",  // Hebrew (legacy code)
+    "ur",  // Urdu
+    "ps",  // Pashto
+    "sd",  // Sindhi
+    "ug",  // Uyghur
+    "dv",  // Divehi (Maldivian)
+    "ku",  // Kurdish (Sorani)
+    "yi"   // Yiddish
+);
+
 @mixin rtl {
-    *[dir="rtl"] &,
-    :root:lang(ar) &,
-    :root:lang(iw) & {
-        @content;
+    @each $lang in $rtl-languages {
+        *[dir="rtl"] &,
+        :root:lang(#{$lang}) & {
+            @content;
+        }
     }
 }
 
 @mixin set-rtl-direction {
-    &:lang(ar),
-    &:lang(iw) {
-        direction: rtl;
+    @each $lang in $rtl-languages {
+        &:lang(#{$lang}) {
+            direction: rtl;
+        }
     }
 }

src/scss/08-template-parts/_header.scss

@@ -260,11 +260,7 @@
             width: column(9);
 
             > div {
-                text-align: right;
-
-                @include rtl {
-                    text-align: left;
-                }
+                text-align: end;
             }
         }
 
@@ -277,11 +273,7 @@
 
             > li {
                 display: inline;
-                text-align: left;
-
-                @include rtl {
-                    text-align: right;
-                }
+                text-align: start;
 
                 + li {
                     margin-inline-start: 28px;