Fix RTL arrow direction and horizontal overflow

scottmakestech · scottmakestech · commit fa4100da4827 · 2026-04-24T10:10:23.000-05:00
- Flip navigational arrows (→) in RTL using rtl:-scale-x-100 - Flip SVG chevron in hero grid items for RTL - Add overflow-x-hidden to body to prevent horizontal scroll in RTL Ref: #2195
diff --git a/i18n/he.toml b/i18n/he.toml
@@ -359,7 +359,7 @@ other = "דרגת זהב"
 other = "דרגת כסף"
 
 [common_read_more_arrow]
-other = " →"
+other = " ←"
 
 [newsletter_iframe_title]
 other = "טופס הרשמה לרשימת הדיוור"
diff --git a/themes/le-2025/layouts/_default/baseof.html b/themes/le-2025/layouts/_default/baseof.html
@@ -3,7 +3,7 @@
 <head>
   {{ partial "head.html" . }}
 </head>
-<body>
+<body class="overflow-x-hidden">
   {{ partial "header.html" . }}
   <main>
     {{ block "main" . }}{{ end }}
diff --git a/themes/le-2025/layouts/partials/components/accordion-item.html b/themes/le-2025/layouts/partials/components/accordion-item.html
@@ -17,7 +17,7 @@
       {{ end }}
       {{ if and .link_url .link_text }}
         <a href="{{ .link_url }}" class="text-link hover:text-link-hover active:text-link-active underline">
-          {{ .link_text }} →
+          {{ .link_text }} {{ if eq (or site.Language.LanguageDirection "ltr") "rtl" }}←{{ else }}→{{ end }}
         </a>
       {{ end }}
     </div>
diff --git a/themes/le-2025/layouts/partials/components/blog-grid-item.html b/themes/le-2025/layouts/partials/components/blog-grid-item.html
@@ -1,8 +1,8 @@
 {{ $currentLang := .currentLang }}
 {{ if ne $currentLang "en" }}
-  <a href="{{ .page.RelPermalink }}" class="blog-grid-item group" hreflang="en" target="_blank">
+  <a href="{{ .page.RelPermalink }}" class="blog-grid-item group" hreflang="en" target="_blank" dir="auto">
 {{ else }}
-  <a href="{{ .page.RelPermalink }}" class="blog-grid-item group" hreflang="en">
+  <a href="{{ .page.RelPermalink }}" class="blog-grid-item group" hreflang="en" dir="auto">
 {{ end }}
   <time class="text-gray-500 text-sm">{{ .page.Date | time.Format ":date_long" }}</time>
   <h3 class="text-xl font-bold mt-2 mb-3 text-gray-900">{{ .page.Title }}</h3>
diff --git a/themes/le-2025/layouts/partials/components/hero-grid-item.html b/themes/le-2025/layouts/partials/components/hero-grid-item.html
@@ -13,7 +13,7 @@ <h3 class="text-xl font-semibold mb-4">{{ $title }}</h3>
     <a href="{{ $link_url }}" class="font-medium inline-flex items-center">
       {{ $link_text }}
       <svg class="w-4 h-4 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ if eq (or site.Language.LanguageDirection "ltr") "rtl" }}M15 5l-7 7 7 7{{ else }}M9 5l7 7-7 7{{ end }}"></path>
       </svg>
     </a>
   {{ end }}
diff --git a/themes/le-2025/layouts/partials/sections/home-hero.html b/themes/le-2025/layouts/partials/sections/home-hero.html
@@ -39,7 +39,7 @@ <h2 class="text-base font-bold mb-2">{{ T "home_hero_annual_report_title" }}</h2
         </div>
         <div class="md:col-span-4 md:text-end">
           <a href="https://www.abetterinternet.org/annual-reports" class="text-sm btn btn-primary">
-            {{ T "home_hero_annual_report_button" }} →
+            {{ T "home_hero_annual_report_button" }} {{ if eq (or site.Language.LanguageDirection "ltr") "rtl" }}←{{ else }}→{{ end }}
           </a>
         </div>
         </div>
