Add Arabic Translation and RTL Support (#1854)

Youssef-Harby · web-flow · commit 0235bba4e5a4 · 2024-11-21T11:47:12.000-05:00
* Update HTML template to support dynamic text direction and improve layout styling

* add translation for arabic

* Improve header layout in base HTML template for better alignment and spacing with RTL and LTR

* Add language attribute to HTML tag

* Update Arabic translations to include "STAC" in SpatioTemporal asset terminology

* Add "text_direction" to be "ltr" translation for bs, de, en, es, fr, sr languages
diff --git a/locale/ar/LC_MESSAGES/messages.po b/locale/ar/LC_MESSAGES/messages.po
diff --git a/locale/bs/LC_MESSAGES/messages.po b/locale/bs/LC_MESSAGES/messages.po
@@ -19,6 +19,10 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.14.0\n"
 
+#: pygeoapi/templates/_base.html:2
+msgid "text_direction"
+msgstr "ltr"
+
 #: pygeoapi/templates/_base.html:51
 msgid "Admin"
 msgstr "Admin"
diff --git a/locale/de/LC_MESSAGES/messages.po b/locale/de/LC_MESSAGES/messages.po
@@ -18,6 +18,10 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.9.1\n"
 
+#: pygeoapi/templates/_base.html:2
+msgid "text_direction"
+msgstr "ltr"
+
 #: build/lib/pygeoapi/templates/_base.html:40
 #: build/lib/pygeoapi/templates/landing_page.html:2
 #: pygeoapi/templates/_base.html:40 pygeoapi/templates/landing_page.html:2
diff --git a/locale/en/LC_MESSAGES/messages.po b/locale/en/LC_MESSAGES/messages.po
@@ -18,6 +18,10 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.9.1\n"
 
+#: pygeoapi/templates/_base.html:2
+msgid "text_direction"
+msgstr "ltr"
+
 #: build/lib/pygeoapi/templates/_base.html:40
 #: build/lib/pygeoapi/templates/landing_page.html:2
 #: pygeoapi/templates/_base.html:40 pygeoapi/templates/landing_page.html:2
diff --git a/locale/es/LC_MESSAGES/messages.po b/locale/es/LC_MESSAGES/messages.po
@@ -18,6 +18,10 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.11.0\n"
 
+#: pygeoapi/templates/_base.html:2
+msgid "text_direction"
+msgstr "ltr"
+
 #: pygeoapi/templates/_base.html:51
 msgid "Admin"
 msgstr "Admin"
diff --git a/locale/fr/LC_MESSAGES/messages.po b/locale/fr/LC_MESSAGES/messages.po
@@ -18,6 +18,10 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.9.1\n"
 
+#: pygeoapi/templates/_base.html:2
+msgid "text_direction"
+msgstr "ltr"
+
 #: build/lib/pygeoapi/templates/_base.html:40
 #: build/lib/pygeoapi/templates/landing_page.html:2
 #: pygeoapi/templates/_base.html:40 pygeoapi/templates/landing_page.html:2
diff --git a/locale/sr/LC_MESSAGES/messages.po b/locale/sr/LC_MESSAGES/messages.po
@@ -19,6 +19,10 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.14.0\n"
 
+#: pygeoapi/templates/_base.html:2
+msgid "text_direction"
+msgstr "ltr"
+
 #: pygeoapi/templates/_base.html:51
 msgid "Admin"
 msgstr "Admin"
diff --git a/pygeoapi/templates/_base.html b/pygeoapi/templates/_base.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="{{ (locale|lower)[:2] }}" dir="{% trans %}text_direction{% endtrans %}" >
   <head>
     <meta charset="{{ config['server']['encoding'] }}">
     <title>{% block title %}{% endblock %}{% if not self.title() %}{{ config['metadata']['identification']['title'] }}{% endif %}</title>
@@ -37,9 +37,9 @@
   <body>
   <div class="bg-light sticky-top border-bottom">
     <div class="container">
-      <header class="d-flex flex-wrap justify-content-center py-3">
+      <header class="d-flex flex-wrap align-items-center py-3 justify-content-between">
         <a href="{{ config['server']['url'] }}"
-          class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+          class="d-flex align-items-center mb-3 mb-md-0 text-dark text-decoration-none">
           <img src="{{ config['server']['url'] }}/static/img/logo.png"
             title="{{ config['metadata']['identification']['title'] }}" style="height:40px;vertical-align: middle;" /></a>
         <ul class="nav nav-pills">
@@ -66,7 +66,7 @@
         {% block crumbs %}
         <a href="{{ config['server']['url'] }}">{% trans %}Home{% endtrans %}</a>
         {% endblock %}
-        <span style="float:right">
+        <span style="float: inline-end">
           {% set links_found = namespace(json=0, jsonld=0) %}
 
           {% for link in data['links'] %}
