Add support for right-to-left languages (google#1165)

This updates our `mdbook` version to the latest version in Git. I copied the `index.hbs` file from that version and back-ported our changes into it. I checked English and Danish locally and they both look fine. The new version has support for right-to-left languages: rust-lang/mdBook#1641. We have an in-progress Persian translation. Download the `fa.zip` artifact after building the PR to check how it looks. I checked Persian locally and it looks mirrored like I expect (but we will need someone who can read Persian to actually verify this). Fixes google#1164.
yohcop · Sep 12, 2023 · 9c17a06 · 9c17a06
1 parent 8dd886c
commit 9c17a06
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/.github/workflows/install-mdbook/action.yml b/.github/workflows/install-mdbook/action.yml
@@ -8,7 +8,10 @@ runs:
     # The --locked flag is important for reproducible builds. It also
     # avoids breakage due to skews between mdbook and mdbook-svgbob.
     - name: Install mdbook
-      run: cargo install mdbook --locked --version 0.4.34
+      # See https://github.com/google/comprehensive-rust/issues/1164.
+      # We will revert to a released version of mdbook as soon as the
+      # commit referenced here is released.
+      run: cargo install --git https://github.com/rust-lang/mdbook/ --rev 09f222b mdbook
       shell: bash
 
     - name: Install mdbook-svgbob

diff --git a/language-picker.css b/language-picker.css
@@ -3,6 +3,11 @@
   right: 10px;
 }
 
+[dir=rtl] #language-list {
+  left: 10px;
+  right: auto;
+}
+
 #language-list a {
   color: inherit;
 }
diff --git a/theme/index.hbs b/theme/index.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="{{ language }}" class="sidebar-visible no-js {{ default_theme }}">
+<html lang="{{ language }}" class="{{ default_theme }}" dir="{{ text_direction }}">
     <head>
         <!-- Book generated using mdBook -->
         <meta charset="UTF-8">
@@ -63,7 +63,7 @@
         <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
         {{/if}}
     </head>
-    <body>
+    <body class="sidebar-visible no-js">
     <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
@@ -93,24 +93,29 @@
             try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
             if (theme === null || theme === undefined) { theme = default_theme; }
             var html = document.querySelector('html');
-            html.classList.remove('no-js')
             html.classList.remove('{{ default_theme }}')
             html.classList.add(theme);
-            html.classList.add('js');
+            var body = document.querySelector('body');
+            body.classList.remove('no-js')
+            body.classList.add('js');
         </script>
 
+        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
+
         <!-- Hide / unhide sidebar before it is displayed -->
         <script>
-            var html = document.querySelector('html');
+            var body = document.querySelector('body');
             var sidebar = null;
+            var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
             if (document.body.clientWidth >= 1080) {
                 try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                 sidebar = sidebar || 'visible';
             } else {
                 sidebar = 'hidden';
             }
-            html.classList.remove('sidebar-visible');
-            html.classList.add("sidebar-" + sidebar);
+            sidebar_toggle.checked = sidebar === 'visible';
+            body.classList.remove('sidebar-visible');
+            body.classList.add("sidebar-" + sidebar);
         </script>
 
         <nav id="sidebar" class="sidebar" aria-label="Table of contents">
@@ -176,9 +181,9 @@
                 <div id="menu-bar-hover-placeholder"></div>
                 <div id="menu-bar" class="menu-bar sticky">
                     <div class="left-buttons">
-                        <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
+                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                             <i class="fa fa-bars"></i>
-                        </button>
+                        </label>
                         <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                             <i class="fa fa-paint-brush"></i>
                         </button>