Add bidirectional support

osmlab · Feb 14, 2024 · 80ff6eb · 80ff6eb
1 parent d0b9a03
commit 80ff6eb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/css/style.css b/css/style.css
@@ -20,6 +20,10 @@ input[type=number] {
   height: 38px;
 }
 
+* {
+  text-align: start;
+}
+
 /* <<<<<<< HEAD
 h3 {
   font-size:20px;

diff --git a/index.html b/index.html
@@ -59,19 +59,19 @@
       <div class="col">
         <img src='img/osm.png' alt="OpenStreetMap logo" class="mx-auto" />
       </div>
-      <div class="col-10 text-break">
+      <div class="col-10 text-break" dir="auto">
         <h1 data-i18n="app.title" class="mx-auto text-primary">On OpenStreetMap</h1>
         <p data-i18n="app.desc" class="p-2"></p>
       </div>
     </div>
 
-    <nav class="nav nav-pills nav-fill border p-1 rounded">
+    <nav class="nav nav-pills nav-fill border p-1 rounded" dir="auto">
       <a class="nav-item nav-link active rounded-0 bg-success" id="step1" href="#location" data-i18n="step1.title">Location</a>
       <a class="nav-item nav-link rounded-0 disabled" id="step2" href="#details" data-i18n="step2.title">Details</a>
       <strong class="nav-item nav-link disabled rounded-0" id="step3" data-i18n="step3.title"></strong>
     </nav>
 
-    <div class='mt-3' id='address-step'>
+    <div class='mt-3' id='address-step' dir="auto">
       <div class='center pad2'>
         <span id='instructions' class="text-info" for="address" style="font-size: x-large;" data-i18n="step1.desc"></span>
       </div>
@@ -93,8 +93,8 @@ <h1 data-i18n="app.title" class="mx-auto text-primary">On OpenStreetMap</h1>
 
     <!-- step 2 -->
     <div class='mt-3 d-none' id='collect-data-step'>
-      <p data-i18n="[html]step2.desc" class="h3 text-info"></p>
-      <form id="form">
+      <p data-i18n="[html]step2.desc" class="h3 text-info" dir="auto"></p>
+      <form id="form" dir="auto">
         <!-- categories -->
         <div class="row">
           <div class="form-group col">
@@ -333,7 +333,7 @@ <h5 class="modal-title" data-i18n="messages.modalTitle"></h5>
 
       <div data-i18n="[html]step3.finalmessage"></div>
     </div>
-    <p class="font-weight-light small text-muted mt-4" data-i18n="[html]messages.credits"></p>
+    <p class="font-weight-light small text-muted mt-4" data-i18n="[html]messages.credits" dir="auto"></p>
   </div>
   <script src="js/i18n.js"></script>
   <script src='js/site.js'></script>