From 73d44503fdcb2210796ed43e45748798ac443596 Mon Sep 17 00:00:00 2001
From: Tim Crawford <crawfxrd@gmail.com>
Date: Mon, 15 Mar 2021 17:42:44 -0600
Subject: [PATCH 01/14] Use logical CSS properties

Replace phyiscal properties (top/bottom/left/right) with logical
properties (start/end) that can be used in non-LTR contexts (e.g.,
content in Arabic or Hebrew).

Based on the CSS Logical Properties and Values Level 1 specification,
currently an Editor's Draft [1].

Referencing MDN, all major browsers except Internet Explorer support the
margin, padding, and border properties.

[1]: https://drafts.csswg.org/css-logical/

Signed-off-by: Tim Crawford <crawfxrd@gmail.com>
---
 src/theme/css/chrome.css  | 65 ++++++++++++++++++++++++---------------
 src/theme/css/general.css | 21 +++++++------
 src/theme/css/print.css   |  2 +-
 3 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 0a7c530a..14f85070 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -37,9 +37,9 @@ a > .hljs {
     display: flex;
     flex-wrap: wrap;
     background-color: var(--bg);
-    border-bottom-color: var(--bg);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
+    border-block-end-color: var(--bg);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
 }
 #menu-bar.sticky,
 .js #menu-bar-hover-placeholder:hover + #menu-bar,
@@ -56,7 +56,7 @@ a > .hljs {
     height: var(--menu-bar-height);
 }
 #menu-bar.bordered {
-    border-bottom-color: var(--table-border-color);
+    border-block-end-color: var(--table-border-color);
 }
 #menu-bar i, #menu-bar .icon-button {
     position: relative;
@@ -160,7 +160,7 @@ a > .hljs {
 }
 
 .nav-wrapper {
-    margin-top: 50px;
+    margin-block-start: 50px;
     display: none;
 }
 
@@ -174,10 +174,12 @@ a > .hljs {
 }
 
 .previous {
+    /* Only Firefox supports flow-relative values */
     float: left;
 }
 
 .next {
+    /* Only Firefox supports flow-relative values */
     float: right;
     right: var(--page-padding);
 }
@@ -237,7 +239,7 @@ pre > .buttons :hover {
     background-color: var(--theme-hover);
 }
 pre > .buttons i {
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 pre > .buttons button {
     cursor: inherit;
@@ -274,7 +276,7 @@ pre > code {
 }
 
 pre > .result {
-    margin-top: 10px;
+    margin-block-start: 10px;
 }
 
 /* Search */
@@ -285,8 +287,14 @@ pre > .result {
 
 mark {
     border-radius: 2px;
-    padding: 0 3px 1px 3px;
-    margin: 0 -3px -1px -3px;
+    padding-block-start: 0;
+    padding-block-end: 1px;
+    padding-inline-start: 3px;
+    padding-inline-end: 3px;
+    margin-block-start: 0;
+    margin-block-end: -1px;
+    margin-inline-start: -3px;
+    margin-inline-end: -3px;
     background-color: var(--search-mark-bg);
     transition: background-color 300ms linear;
     cursor: pointer;
@@ -298,14 +306,17 @@ mark.fade-out {
 }
 
 .searchbar-outer {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     max-width: var(--content-max-width);
 }
 
 #searchbar {
     width: 100%;
-    margin: 5px auto 0px auto;
+    margin-block-start: 5px;
+    margin-block-end: 0;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     padding: 10px 16px;
     transition: box-shadow 300ms ease-in-out;
     border: 1px solid var(--searchbar-border-color);
@@ -321,20 +332,23 @@ mark.fade-out {
 .searchresults-header {
     font-weight: bold;
     font-size: 1em;
-    padding: 18px 0 0 5px;
+    padding-block-start: 18px;
+    padding-block-end: 0;
+    padding-inline-start: 5px;
+    padding-inline-end: 0;
     color: var(--searchresults-header-fg);
 }
 
 .searchresults-outer {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     max-width: var(--content-max-width);
-    border-bottom: 1px dashed var(--searchresults-border-color);
+    border-block-end: 1px dashed var(--searchresults-border-color);
 }
 
 ul#searchresults {
     list-style: none;
-    padding-left: 20px;
+    padding-inline-start: 20px;
 }
 ul#searchresults li {
     margin: 10px 0px;
@@ -347,7 +361,10 @@ ul#searchresults li.focus {
 ul#searchresults span.teaser {
     display: block;
     clear: both;
-    margin: 5px 0 0 20px;
+    margin-block-start: 5px;
+    margin-block-end: 0;
+    margin-inline-start: 20px;
+    margin-inline-end: 0;
     font-size: 0.8em;
 }
 ul#searchresults span.teaser em {
@@ -423,13 +440,13 @@ ul#searchresults span.teaser em {
 @media only screen and (min-width: 620px) {
     #sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
-        margin-left: var(--sidebar-width);
+        margin-inline-start: var(--sidebar-width);
     }
 }
 
 .chapter {
     list-style: none outside none;
-    padding-left: 0;
+    padding-inline-start: 0;
     line-height: 2.2em;
 }
 
@@ -459,7 +476,7 @@ ul#searchresults span.teaser em {
 .chapter li > a.toggle {
     cursor: pointer;
     display: block;
-    margin-left: auto;
+    margin-inline-start: auto;
     padding: 0 10px;
     user-select: none;
     opacity: 0.68;
@@ -476,7 +493,7 @@ ul#searchresults span.teaser em {
 
 .chapter li.chapter-item {
     line-height: 1.5em;
-    margin-top: 0.6em;
+    margin-block-start: 0.6em;
 }
 
 .chapter li.expanded > a.toggle div {
@@ -499,7 +516,7 @@ ul#searchresults span.teaser em {
 
 .section {
     list-style: none outside none;
-    padding-left: 20px;
+    padding-inline-start: 20px;
     line-height: 1.9em;
 }
 
@@ -532,7 +549,7 @@ ul#searchresults span.teaser em {
     padding: 2px 20px;
     line-height: 25px;
     white-space: nowrap;
-    text-align: left;
+    text-align: start;
     cursor: pointer;
     color: inherit;
     background: inherit;
diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 0956b906..180b0e96 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -48,13 +48,13 @@ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
 .hide-boring .boring { display: none; }
 .hidden { display: none !important; }
 
-h2, h3 { margin-top: 2.5em; }
-h4, h5 { margin-top: 2em; }
+h2, h3 { margin-block-start: 2.5em; }
+h4, h5 { margin-block-start: 2em; }
 
 .header + .header h3,
 .header + .header h4,
 .header + .header h5 {
-    margin-top: 1em;
+    margin-block-start: 1em;
 }
 
 h1:target::before,
@@ -65,7 +65,7 @@ h5:target::before,
 h6:target::before {
     display: inline-block;
     content: "»";
-    margin-left: -30px;
+    margin-inline-start: -30px;
     width: 30px;
 }
 
@@ -74,13 +74,14 @@ h6:target::before {
    https://bugs.webkit.org/show_bug.cgi?id=218076
 */
 :target {
+    /* Safari does not support logical properties */
     scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
 }
 
 .page {
     outline: 0;
     padding: 0 var(--page-padding);
-    margin-top: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
+    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
 }
 .page-wrapper {
     box-sizing: border-box;
@@ -96,8 +97,8 @@ h6:target::before {
     padding: 0 5px 50px 5px;
 }
 .content main {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     max-width: var(--content-max-width);
 }
 .content p { line-height: 1.45em; }
@@ -147,8 +148,8 @@ blockquote {
     padding: 0 20px;
     color: var(--fg);
     background-color: var(--quote-bg);
-    border-top: .1em solid var(--quote-border);
-    border-bottom: .1em solid var(--quote-border);
+    border-block-start: .1em solid var(--quote-border);
+    border-block-end: .1em solid var(--quote-border);
 }
 
 kbd {
@@ -166,7 +167,7 @@ kbd {
 
 :not(.footnote-definition) + .footnote-definition,
 .footnote-definition + :not(.footnote-definition) {
-    margin-top: 2em;
+    margin-block-start: 2em;
 }
 .footnote-definition {
     font-size: 0.9em;
diff --git a/src/theme/css/print.css b/src/theme/css/print.css
index 27d05e92..3272bd01 100644
--- a/src/theme/css/print.css
+++ b/src/theme/css/print.css
@@ -8,7 +8,7 @@
 
 #page-wrapper.page-wrapper {
     transform: none;
-    margin-left: 0px;
+    margin-inline-start: 0px;
     overflow-y: initial;
 }
 

From 1088066c69e9a63ead7a8e798be22752e35d22ae Mon Sep 17 00:00:00 2001
From: Tim Crawford <crawfxrd@gmail.com>
Date: Tue, 16 Mar 2021 23:21:40 -0600
Subject: [PATCH 02/14] Move sidebar, js classes from html to body element

This will be necessary for using CSS selectors on root attributes.

Signed-off-by: Tim Crawford <crawfxrd@gmail.com>
---
 src/theme/book.js   | 20 ++++++++++----------
 src/theme/index.hbs | 15 ++++++++-------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/theme/book.js b/src/theme/book.js
index 351e28c7..fb913165 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -441,7 +441,7 @@ function playground_text(playground, hidden = true) {
 })();
 
 (function sidebar() {
-    var html = document.querySelector("html");
+    var body = document.querySelector("body");
     var sidebar = document.getElementById("sidebar");
     var sidebarLinks = document.querySelectorAll('#sidebar a');
     var sidebarToggleButton = document.getElementById("sidebar-toggle");
@@ -449,8 +449,8 @@ function playground_text(playground, hidden = true) {
     var firstContact = null;
 
     function showSidebar() {
-        html.classList.remove('sidebar-hidden')
-        html.classList.add('sidebar-visible');
+        body.classList.remove('sidebar-hidden')
+        body.classList.add('sidebar-visible');
         Array.from(sidebarLinks).forEach(function (link) {
             link.setAttribute('tabIndex', 0);
         });
@@ -471,8 +471,8 @@ function playground_text(playground, hidden = true) {
     });
 
     function hideSidebar() {
-        html.classList.remove('sidebar-visible')
-        html.classList.add('sidebar-hidden');
+        body.classList.remove('sidebar-visible')
+        body.classList.add('sidebar-hidden');
         Array.from(sidebarLinks).forEach(function (link) {
             link.setAttribute('tabIndex', -1);
         });
@@ -483,14 +483,14 @@ function playground_text(playground, hidden = true) {
 
     // Toggle sidebar
     sidebarToggleButton.addEventListener('click', function sidebarToggle() {
-        if (html.classList.contains("sidebar-hidden")) {
+        if (body.classList.contains("sidebar-hidden")) {
             var current_width = parseInt(
                 document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
             if (current_width < 150) {
                 document.documentElement.style.setProperty('--sidebar-width', '150px');
             }
             showSidebar();
-        } else if (html.classList.contains("sidebar-visible")) {
+        } else if (body.classList.contains("sidebar-visible")) {
             hideSidebar();
         } else {
             if (getComputedStyle(sidebar)['transform'] === 'none') {
@@ -506,14 +506,14 @@ function playground_text(playground, hidden = true) {
     function initResize(e) {
         window.addEventListener('mousemove', resize, false);
         window.addEventListener('mouseup', stopResize, false);
-        html.classList.add('sidebar-resizing');
+        body.classList.add('sidebar-resizing');
     }
     function resize(e) {
         var pos = (e.clientX - sidebar.offsetLeft);
         if (pos < 20) {
             hideSidebar();
         } else {
-            if (html.classList.contains("sidebar-hidden")) {
+            if (body.classList.contains("sidebar-hidden")) {
                 showSidebar();
             }
             pos = Math.min(pos, window.innerWidth - 100);
@@ -522,7 +522,7 @@ function playground_text(playground, hidden = true) {
     }
     //on mouseup remove windows functions mousemove & mouseup
     function stopResize(e) {
-        html.classList.remove('sidebar-resizing');
+        body.classList.remove('sidebar-resizing');
         window.removeEventListener('mousemove', resize, false);
         window.removeEventListener('mouseup', stopResize, false);
     }
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 43607111..a3129f2b 100644
--- a/src/theme/index.hbs
+++ b/src/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 }}">
     <head>
         <!-- Book generated using mdBook -->
         <meta charset="UTF-8">
@@ -53,7 +53,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>
@@ -83,17 +83,18 @@
             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) {
@@ -103,8 +104,8 @@
                 sidebar = 'hidden';
             }
             sidebar_toggle.checked = sidebar === 'visible';
-            html.classList.remove('sidebar-visible');
-            html.classList.add("sidebar-" + sidebar);
+            body.classList.remove('sidebar-visible');
+            body.classList.add("sidebar-" + sidebar);
         </script>
 
         <nav id="sidebar" class="sidebar" aria-label="Table of contents">

From 3a998991141417e4b4d1671c90c8ff9a9398788b Mon Sep 17 00:00:00 2001
From: Tim Crawford <crawfxrd@gmail.com>
Date: Tue, 16 Mar 2021 23:23:13 -0600
Subject: [PATCH 03/14] Use CSS selectors to override properties for RTL

Fix behavior of some elements when displaying page in RTL.

Signed-off-by: Tim Crawford <crawfxrd@gmail.com>
---
 src/theme/css/chrome.css  | 20 +++++++++++++++-----
 src/theme/css/general.css |  3 +++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 14f85070..2960e26c 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -173,16 +173,20 @@ a > .hljs {
     background-color: var(--sidebar-bg);
 }
 
-.previous {
-    /* Only Firefox supports flow-relative values */
-    float: left;
-}
+/* Only Firefox supports flow-relative values */
+.previous { float: left; }
+[dir=rtl] .previous { float: right; }
 
+/* Only Firefox supports flow-relative values */
 .next {
-    /* Only Firefox supports flow-relative values */
     float: right;
     right: var(--page-padding);
 }
+[dir=rtl] .next {
+    float: left;
+    right: unset;
+    left: var(--page-padding);
+}
 
 @media only screen and (max-width: 1080px) {
     .nav-wide-wrapper { display: none; }
@@ -387,6 +391,7 @@ ul#searchresults span.teaser em {
     background-color: var(--sidebar-bg);
     color: var(--sidebar-fg);
 }
+[dir=rtl] .sidebar { left: unset; right: 0; }
 .sidebar-resizing {
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -417,6 +422,7 @@ ul#searchresults span.teaser em {
     top: 0;
     bottom: 0;
 }
+[dir=rtl] .sidebar .sidebar-resize-handle { right:  unset; left: 0; }
 .js .sidebar .sidebar-resize-handle {
     cursor: col-resize;
     width: 5px;
@@ -426,6 +432,9 @@ ul#searchresults span.teaser em {
     transform: translateX(calc(0px - var(--sidebar-width)));
     z-index: -1;
 }
+[dir=rtl] .sidebar-hidden .sidebar {
+    transform: translateX(var(--sidebar-width));
+}
 .sidebar::-webkit-scrollbar {
     background: var(--sidebar-bg);
 }
@@ -539,6 +548,7 @@ ul#searchresults span.teaser em {
     /* Don't let the children's background extend past the rounded corners. */
     overflow: hidden;
 }
+[dir=rtl] .theme-popup { left: unset;  right: 10px; }
 .theme-popup .default {
     color: var(--icons);
 }
diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 180b0e96..74b01f30 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -91,6 +91,9 @@ h6:target::before {
 .js:not(.sidebar-resizing) .page-wrapper {
     transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }
+[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {
+    transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
+}
 
 .content {
     overflow-y: auto;

From 819a108f073c84d835407ea0fe1ff322bd1cf238 Mon Sep 17 00:00:00 2001
From: cN3rd <subs.in.tokyo@gmail.com>
Date: Fri, 3 Sep 2021 18:31:39 +0300
Subject: [PATCH 04/14] Add `text_direction` property in general book metadata

Text direction can selected in the config via the `text_direction` attribute in `book.toml`,
or be derived from the book's language.
---
 guide/src/format/configuration/general.md |   4 +
 src/config.rs                             | 220 ++++++++++++++++++++++
 2 files changed, 224 insertions(+)

diff --git a/guide/src/format/configuration/general.md b/guide/src/format/configuration/general.md
index 1fc00968..b6dd02d6 100644
--- a/guide/src/format/configuration/general.md
+++ b/guide/src/format/configuration/general.md
@@ -46,6 +46,9 @@ This is general information about your book.
   `src` directly under the root folder. But this is configurable with the `src`
   key in the configuration file.
 - **language:** The main language of the book, which is used as a language attribute `<html lang="en">` for example.
+  This is also used to derive the direction of text (RTL, LTR) within the book.
+- **text_direction**: The direction of text in the book: Left-to-right (LTR) or Right-to-left (RTL). Possible values: `ltr`, `rtl`.
+  When not specified, the correct text direction is derived from the book's `language` attribute.
 
 **book.toml**
 ```toml
@@ -55,6 +58,7 @@ authors = ["John Doe", "Jane Doe"]
 description = "The example book covers examples."
 src = "my-src"  # the source files will be found in `root/my-src` instead of `root/src`
 language = "en"
+text-direction = "ltr"
 ```
 
 ### Rust options
diff --git a/src/config.rs b/src/config.rs
index 4641d1a2..8a20e4f3 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -411,6 +411,9 @@ pub struct BookConfig {
     pub multilingual: bool,
     /// The main language of the book.
     pub language: Option<String>,
+    /// The direction of text in the book: Left-to-right (LTR) or Right-to-left (RTL).
+    /// When not specified, the correct text direction is derived from [BookConfig::language].
+    pub text_direction: Option<TextDirection>,
 }
 
 impl Default for BookConfig {
@@ -422,6 +425,44 @@ impl Default for BookConfig {
             src: PathBuf::from("src"),
             multilingual: false,
             language: Some(String::from("en")),
+            text_direction: None,
+        }
+    }
+}
+
+impl BookConfig {
+    /// Gets the realized text direction, either from [BookConfig::text_direction]
+    /// or derived from [BookConfig::language], to be used by templating engines.
+    pub fn realized_text_direction(&self) -> TextDirection {
+        if let Some(direction) = self.text_direction {
+            direction
+        } else {
+            TextDirection::from_lang_code(&self.language.clone().unwrap_or_default())
+        }
+    }
+}
+
+/// Text direction to use for HTML output
+#[derive(Debug, Copy, Clone, PartialEq, Serialize, Deserialize)]
+pub enum TextDirection {
+    /// Left to right.
+    #[serde(rename = "ltr")]
+    LeftToRight,
+    /// Right to left
+    #[serde(rename = "rtl")]
+    RightToLeft,
+}
+
+impl TextDirection {
+    /// Gets the text direction from language code
+    pub fn from_lang_code(code: &str) -> Self {
+        match code {
+            // list sourced from here: https://github.com/abarrak/rtl/blob/master/lib/rtl/core.rb#L16
+            "ar" | "ara" | "arc" | "ae" | "ave" | "egy" | "he" | "heb" | "nqo" | "pal" | "phn"
+            | "sam" | "syc" | "syr" | "fa" | "per" | "fas" | "ku" | "kur" | "ur" | "urd" => {
+                TextDirection::RightToLeft
+            }
+            _ => TextDirection::LeftToRight,
         }
     }
 }
@@ -788,6 +829,7 @@ mod tests {
             multilingual: true,
             src: PathBuf::from("source"),
             language: Some(String::from("ja")),
+            text_direction: None,
         };
         let build_should_be = BuildConfig {
             build_dir: PathBuf::from("outputs"),
@@ -1140,6 +1182,184 @@ mod tests {
         assert_eq!(&get_404_output_file(&html_config.input_404), "missing.html");
     }
 
+    #[test]
+    fn text_direction_ltr() {
+        let src = r#"
+        [book]
+        text-direction = "ltr"
+        "#;
+
+        let got = Config::from_str(src).unwrap();
+        assert_eq!(got.book.text_direction, Some(TextDirection::LeftToRight));
+    }
+
+    #[test]
+    fn text_direction_rtl() {
+        let src = r#"
+        [book]
+        text-direction = "rtl"
+        "#;
+
+        let got = Config::from_str(src).unwrap();
+        assert_eq!(got.book.text_direction, Some(TextDirection::RightToLeft));
+    }
+
+    #[test]
+    fn text_direction_none() {
+        let src = r#"
+        [book]
+        "#;
+
+        let got = Config::from_str(src).unwrap();
+        assert_eq!(got.book.text_direction, None);
+    }
+
+    #[test]
+    fn test_text_direction() {
+        let mut cfg = BookConfig::default();
+
+        // test deriving the text direction from language codes
+        cfg.language = Some("ar".into());
+        assert_eq!(cfg.realized_text_direction(), TextDirection::RightToLeft);
+
+        cfg.language = Some("he".into());
+        assert_eq!(cfg.realized_text_direction(), TextDirection::RightToLeft);
+
+        cfg.language = Some("en".into());
+        assert_eq!(cfg.realized_text_direction(), TextDirection::LeftToRight);
+
+        cfg.language = Some("ja".into());
+        assert_eq!(cfg.realized_text_direction(), TextDirection::LeftToRight);
+
+        // test forced direction
+        cfg.language = Some("ar".into());
+        cfg.text_direction = Some(TextDirection::LeftToRight);
+        assert_eq!(cfg.realized_text_direction(), TextDirection::LeftToRight);
+
+        cfg.language = Some("ar".into());
+        cfg.text_direction = Some(TextDirection::RightToLeft);
+        assert_eq!(cfg.realized_text_direction(), TextDirection::RightToLeft);
+
+        cfg.language = Some("en".into());
+        cfg.text_direction = Some(TextDirection::LeftToRight);
+        assert_eq!(cfg.realized_text_direction(), TextDirection::LeftToRight);
+
+        cfg.language = Some("en".into());
+        cfg.text_direction = Some(TextDirection::RightToLeft);
+        assert_eq!(cfg.realized_text_direction(), TextDirection::RightToLeft);
+    }
+
+    #[test]
+    fn text_drection_from_lang_code() {
+        // test all right-to-left languages
+        assert_eq!(
+            TextDirection::from_lang_code("ar"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("ara"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("arc"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("ae"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("ave"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("egy"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("he"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("heb"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("nqo"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("pal"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("phn"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("sam"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("syc"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("syr"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("fa"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("per"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("fas"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("ku"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("kur"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("ur"),
+            TextDirection::RightToLeft
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("urd"),
+            TextDirection::RightToLeft
+        );
+
+        // test some left-to-right languages
+        assert_eq!(
+            TextDirection::from_lang_code("de"),
+            TextDirection::LeftToRight
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("en"),
+            TextDirection::LeftToRight
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("es"),
+            TextDirection::LeftToRight
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("ja"),
+            TextDirection::LeftToRight
+        );
+        assert_eq!(
+            TextDirection::from_lang_code("sv"),
+            TextDirection::LeftToRight
+        );
+    }
+
     #[test]
     #[should_panic(expected = "Invalid configuration file")]
     fn invalid_language_type_error() {

From 7717b9dcf26a1250f859c17101affc9e00c126c0 Mon Sep 17 00:00:00 2001
From: cN3rd <subs.in.tokyo@gmail.com>
Date: Fri, 3 Sep 2021 18:33:04 +0300
Subject: [PATCH 05/14] Support `text_direction` attribute in HTML output

---
 src/renderer/html_handlebars/hbs_renderer.rs | 12 ++++++++++++
 src/theme/index.hbs                          |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs
index 709aa066..8ea2f49e 100644
--- a/src/renderer/html_handlebars/hbs_renderer.rs
+++ b/src/renderer/html_handlebars/hbs_renderer.rs
@@ -648,6 +648,10 @@ fn make_data(
         "language".to_owned(),
         json!(config.book.language.clone().unwrap_or_default()),
     );
+    data.insert(
+        "text_direction".to_owned(),
+        json!(config.book.realized_text_direction()),
+    );
     data.insert(
         "book_title".to_owned(),
         json!(config.book.title.clone().unwrap_or_default()),
@@ -1088,6 +1092,8 @@ struct RenderItemContext<'a> {
 
 #[cfg(test)]
 mod tests {
+    use crate::config::TextDirection;
+
     use super::*;
     use pretty_assertions::assert_eq;
 
@@ -1299,4 +1305,10 @@ mod tests {
             assert_eq!(&*got, *should_be);
         }
     }
+
+    #[test]
+    fn test_json_direction() {
+        assert_eq!(json!(TextDirection::RightToLeft), json!("rtl"));
+        assert_eq!(json!(TextDirection::LeftToRight), json!("ltr"));
+    }
 }
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index a3129f2b..61b0e273 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="{{ language }}" class="{{ default_theme }}">
+<html lang="{{ language }}" class="{{ default_theme }}" dir="{{ text_direction }}">
     <head>
         <!-- Book generated using mdBook -->
         <meta charset="UTF-8">

From 5e0c68c45e07e3dfa943558539a6d7e2819437bc Mon Sep 17 00:00:00 2001
From: cN3rd <subs.in.tokyo@gmail.com>
Date: Fri, 3 Sep 2021 17:53:49 +0300
Subject: [PATCH 06/14] Fix icons when using RTL

---
 src/theme/css/chrome.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 2960e26c..2acd99c9 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -188,6 +188,10 @@ a > .hljs {
     left: var(--page-padding);
 }
 
+/* Use the correct buttons for RTL layouts*/
+[dir=rtl] .previous i.fa-angle-left:before {content:"\f105";}
+[dir=rtl] .next i.fa-angle-right:before { content:"\f104"; }
+
 @media only screen and (max-width: 1080px) {
     .nav-wide-wrapper { display: none; }
     .nav-wrapper { display: block; }

From 6be98e0bbd2cfd0d8f016823ea026afa704d3119 Mon Sep 17 00:00:00 2001
From: cN3rd <sub.in.tokyo@gmail.com>
Date: Fri, 24 Jun 2022 15:00:02 +0000
Subject: [PATCH 07/14] Ensure code segments always render in LTR

---
 src/theme/css/general.css | 1 +
 src/theme/css/print.css   | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 74b01f30..7e746d27 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -25,6 +25,7 @@ body {
 code {
     font-family: var(--mono-font) !important;
     font-size: var(--code-font-size);
+    direction: ltr !important;
 }
 
 /* make long words/inline code not x overflow */
diff --git a/src/theme/css/print.css b/src/theme/css/print.css
index 3272bd01..dcf0ba64 100644
--- a/src/theme/css/print.css
+++ b/src/theme/css/print.css
@@ -22,6 +22,10 @@
     overflow-y: initial;
 }
 
+code {
+    direction: ltr !important;
+}
+
 pre > .buttons {
     z-index: 2;
 }

From 8564a7fb51f83f39b01618ec14d3e68d98e7ac48 Mon Sep 17 00:00:00 2001
From: cN3rd <sub.in.tokyo@gmail.com>
Date: Fri, 24 Jun 2022 15:00:46 +0000
Subject: [PATCH 08/14] Add proper test to inline code within the book.

---
 test_book/src/individual/code.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test_book/src/individual/code.md b/test_book/src/individual/code.md
index 26f2d564..c1487289 100644
--- a/test_book/src/individual/code.md
+++ b/test_book/src/individual/code.md
@@ -10,7 +10,9 @@ This is a codeblock
 
 ---
 
-This line contains `inline code`
+This line contains `inline code` mixed with some other stuff. (LTR)
+
+ושורה זו מכילה `inline code` אבל עם טקסט בשפה שנכתבת מימין לשמאל. (RTL)
 
 ---
 

From 4749f9d97a7a9bc7b489cfccc342f110544ec458 Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Sat, 2 Sep 2023 16:41:59 -0700
Subject: [PATCH 09/14] Some minor corrections from code review.

---
 guide/src/format/configuration/general.md | 2 +-
 src/config.rs                             | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/guide/src/format/configuration/general.md b/guide/src/format/configuration/general.md
index b6dd02d6..887cf0cd 100644
--- a/guide/src/format/configuration/general.md
+++ b/guide/src/format/configuration/general.md
@@ -48,7 +48,7 @@ This is general information about your book.
 - **language:** The main language of the book, which is used as a language attribute `<html lang="en">` for example.
   This is also used to derive the direction of text (RTL, LTR) within the book.
 - **text_direction**: The direction of text in the book: Left-to-right (LTR) or Right-to-left (RTL). Possible values: `ltr`, `rtl`.
-  When not specified, the correct text direction is derived from the book's `language` attribute.
+  When not specified, the text direction is derived from the book's `language` attribute.
 
 **book.toml**
 ```toml
diff --git a/src/config.rs b/src/config.rs
index 8a20e4f3..bcbb28bc 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -412,7 +412,7 @@ pub struct BookConfig {
     /// The main language of the book.
     pub language: Option<String>,
     /// The direction of text in the book: Left-to-right (LTR) or Right-to-left (RTL).
-    /// When not specified, the correct text direction is derived from [BookConfig::language].
+    /// When not specified, the text direction is derived from [`BookConfig::language`].
     pub text_direction: Option<TextDirection>,
 }
 
@@ -431,13 +431,13 @@ impl Default for BookConfig {
 }
 
 impl BookConfig {
-    /// Gets the realized text direction, either from [BookConfig::text_direction]
-    /// or derived from [BookConfig::language], to be used by templating engines.
+    /// Gets the realized text direction, either from [`BookConfig::text_direction`]
+    /// or derived from [`BookConfig::language`], to be used by templating engines.
     pub fn realized_text_direction(&self) -> TextDirection {
         if let Some(direction) = self.text_direction {
             direction
         } else {
-            TextDirection::from_lang_code(&self.language.clone().unwrap_or_default())
+            TextDirection::from_lang_code(self.language.as_deref().unwrap_or_default())
         }
     }
 }

From db877b1c9bdff545b97b94fa244e9f920ecee3e6 Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Sat, 2 Sep 2023 16:42:14 -0700
Subject: [PATCH 10/14] Update language list to include missing rtl languages.

---
 src/config.rs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/config.rs b/src/config.rs
index bcbb28bc..a740475c 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -459,9 +459,8 @@ impl TextDirection {
         match code {
             // list sourced from here: https://github.com/abarrak/rtl/blob/master/lib/rtl/core.rb#L16
             "ar" | "ara" | "arc" | "ae" | "ave" | "egy" | "he" | "heb" | "nqo" | "pal" | "phn"
-            | "sam" | "syc" | "syr" | "fa" | "per" | "fas" | "ku" | "kur" | "ur" | "urd" => {
-                TextDirection::RightToLeft
-            }
+            | "sam" | "syc" | "syr" | "fa" | "per" | "fas" | "ku" | "kur" | "ur" | "urd"
+            | "pus" | "ps" | "yi" | "yid" => TextDirection::RightToLeft,
             _ => TextDirection::LeftToRight,
         }
     }

From 869fe2f50d372b25f7ef8ccd9a10db22a8bc8de6 Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Sat, 2 Sep 2023 16:42:53 -0700
Subject: [PATCH 11/14] Remove text_drection_from_lang_code

The test above should cover this sufficiently.
---
 src/config.rs | 111 --------------------------------------------------
 1 file changed, 111 deletions(-)

diff --git a/src/config.rs b/src/config.rs
index a740475c..7f56e797 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -1248,117 +1248,6 @@ mod tests {
         assert_eq!(cfg.realized_text_direction(), TextDirection::RightToLeft);
     }
 
-    #[test]
-    fn text_drection_from_lang_code() {
-        // test all right-to-left languages
-        assert_eq!(
-            TextDirection::from_lang_code("ar"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("ara"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("arc"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("ae"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("ave"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("egy"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("he"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("heb"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("nqo"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("pal"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("phn"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("sam"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("syc"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("syr"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("fa"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("per"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("fas"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("ku"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("kur"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("ur"),
-            TextDirection::RightToLeft
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("urd"),
-            TextDirection::RightToLeft
-        );
-
-        // test some left-to-right languages
-        assert_eq!(
-            TextDirection::from_lang_code("de"),
-            TextDirection::LeftToRight
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("en"),
-            TextDirection::LeftToRight
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("es"),
-            TextDirection::LeftToRight
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("ja"),
-            TextDirection::LeftToRight
-        );
-        assert_eq!(
-            TextDirection::from_lang_code("sv"),
-            TextDirection::LeftToRight
-        );
-    }
-
     #[test]
     #[should_panic(expected = "Invalid configuration file")]
     fn invalid_language_type_error() {

From b871676def4bda9be5f280ab6b6e80a59db5628c Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Sat, 2 Sep 2023 16:43:13 -0700
Subject: [PATCH 12/14] Fix sidebar behavior with RTL.

---
 src/theme/css/chrome.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 2acd99c9..b5b7d480 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -436,7 +436,7 @@ ul#searchresults span.teaser em {
     transform: translateX(calc(0px - var(--sidebar-width)));
     z-index: -1;
 }
-[dir=rtl] .sidebar-hidden .sidebar {
+[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
     transform: translateX(var(--sidebar-width));
 }
 .sidebar::-webkit-scrollbar {
@@ -450,11 +450,17 @@ ul#searchresults span.teaser em {
 #sidebar-toggle-anchor:checked ~ .page-wrapper {
     transform: translateX(var(--sidebar-width));
 }
+[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
+    transform: translateX(calc(0px - var(--sidebar-width)));
+}
 @media only screen and (min-width: 620px) {
     #sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
         margin-inline-start: var(--sidebar-width);
     }
+    [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
+        transform: none;
+    }
 }
 
 .chapter {

From fb272d1afa7761a3b9c7da34cb861f030294ac06 Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Sat, 2 Sep 2023 16:43:21 -0700
Subject: [PATCH 13/14] Fix theme selector for RTL.

---
 src/theme/css/chrome.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index b5b7d480..2314f7a1 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -582,6 +582,6 @@ ul#searchresults span.teaser em {
 .theme-selected::before {
     display: inline-block;
     content: "✓";
-    margin-left: -14px;
+    margin-inline-start: -14px;
     width: 14px;
 }

From 802e7bffc3d81b868ede46fa0cb91e68009f6c96 Mon Sep 17 00:00:00 2001
From: Eric Huss <eric@huss.org>
Date: Sat, 2 Sep 2023 16:44:47 -0700
Subject: [PATCH 14/14] Make the arrow keys honor RTL.

At least to my understanding, the pages will flip in the opposite direction.
---
 src/theme/book.js | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/theme/book.js b/src/theme/book.js
index fb913165..aa12e7ec 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -557,20 +557,35 @@ function playground_text(playground, hidden = true) {
     document.addEventListener('keydown', function (e) {
         if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
         if (window.search && window.search.hasFocus()) { return; }
+        var html = document.querySelector('html');
 
+        function next() {
+            var nextButton = document.querySelector('.nav-chapters.next');
+            if (nextButton) {
+                window.location.href = nextButton.href;
+            }
+        }
+        function prev() {
+            var previousButton = document.querySelector('.nav-chapters.previous');
+            if (previousButton) {
+                window.location.href = previousButton.href;
+            }
+        }
         switch (e.key) {
             case 'ArrowRight':
                 e.preventDefault();
-                var nextButton = document.querySelector('.nav-chapters.next');
-                if (nextButton) {
-                    window.location.href = nextButton.href;
+                if (html.dir == 'rtl') {
+                    prev();
+                } else {
+                    next();
                 }
                 break;
             case 'ArrowLeft':
                 e.preventDefault();
-                var previousButton = document.querySelector('.nav-chapters.previous');
-                if (previousButton) {
-                    window.location.href = previousButton.href;
+                if (html.dir == 'rtl') {
+                    next();
+                } else {
+                    prev();
                 }
                 break;
         }