Set explicit ltr direction for pages untranslated in rtl languages (#434

)

* Set explicit ltr direction for pages untranslated in rtl languages

* Only override locales that would otherwise use Eastern Arabic numerals

src/pages/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section">
+  <div class="section" dir="ltr">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div>
         <h1 class="text-5xl mb-10">

src/pages/extension.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div dir="ltr">
     <div class="hero-section border-b">
       <div class="container pt-16" :class="[isEmbedded ? '' : 'is-fluid']">
         <div class="intro text-center mx-auto">

src/pages/feedback.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section">
+  <div class="section" dir="ltr">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="pb-6">
         <h1 id="feedback" class="text-5xl mb-10">

src/pages/meta-search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section mb-10">
+  <div class="section mb-10" dir="ltr">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="mb-10">
         <h1 class="text-5xl">

src/pages/search-help.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section">
+  <div class="section" dir="ltr">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="mb-10">
         <h1 class="text-5xl mb-10">

src/pages/sources.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="section">
+  <div class="section" dir="ltr">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="mb-10">
         <h1 class="text-5xl mb-10">
@@ -138,6 +138,8 @@ import sortBy from 'lodash.sortby'
 import { mapState } from 'vuex'
 import { NAV, PROVIDER } from '~/constants/store-modules'
 
+const ARABIC_NUMERAL_LOCALES = ['ar', 'fa', 'ur', 'ckb', 'ps']
+
 const SourcePage = {
   name: 'source-page',
   layout({ store }) {
@@ -162,8 +164,18 @@ const SourcePage = {
     },
   },
   methods: {
+    /**
+     * @param {number} imageCount
+     */
     getProviderImageCount(imageCount) {
-      return imageCount.toLocaleString(this.$i18n.locale)
+      let locale = this.$i18n.locale
+      if (ARABIC_NUMERAL_LOCALES.some((l) => locale.startsWith(l))) {
+        // most sites with RTL language with numbers continue to use Western Arabic Numerals whereas `toLocaleString` will use Eastern Arabic Numerals for Arabic and Hebrew by default
+        // Prevent formatting using Eastern Arabic Numerals and use `en-GB` to match the most common decimal and thousands delimiters for those regions
+        // https://en.wikipedia.org/wiki/Decimal_separator#Countries_using_decimal_point
+        locale = 'en-GB'
+      }
+      return imageCount.toLocaleString(locale)
     },
     sortTable(field) {
       let direction = 'asc'