diff --git a/guide/src/format/configuration/general.md b/guide/src/format/configuration/general.md index 1fc00968..887cf0cd 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 `` 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 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..7f56e797 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, + /// The direction of text in the book: Left-to-right (LTR) or Right-to-left (RTL). + /// When not specified, the text direction is derived from [`BookConfig::language`]. + pub text_direction: Option, } impl Default for BookConfig { @@ -422,6 +425,43 @@ 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.as_deref().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" + | "pus" | "ps" | "yi" | "yid" => TextDirection::RightToLeft, + _ => TextDirection::LeftToRight, } } } @@ -788,6 +828,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 +1181,73 @@ 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] #[should_panic(expected = "Invalid configuration file")] fn invalid_language_type_error() { 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/book.js b/src/theme/book.js index 351e28c7..aa12e7ec 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); } @@ -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; } diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css index 0a7c530a..2314f7a1 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; } @@ -173,14 +173,24 @@ a > .hljs { background-color: var(--sidebar-bg); } -.previous { - float: left; -} +/* Only Firefox supports flow-relative values */ +.previous { float: left; } +[dir=rtl] .previous { float: right; } +/* Only Firefox supports flow-relative values */ .next { float: right; right: var(--page-padding); } +[dir=rtl] .next { + float: left; + right: unset; + 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; } @@ -237,7 +247,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 +284,7 @@ pre > code { } pre > .result { - margin-top: 10px; + margin-block-start: 10px; } /* Search */ @@ -285,8 +295,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 +314,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 +340,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 +369,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 { @@ -370,6 +395,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; @@ -400,6 +426,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; @@ -409,6 +436,9 @@ ul#searchresults span.teaser em { transform: translateX(calc(0px - var(--sidebar-width))); z-index: -1; } +[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar { + transform: translateX(var(--sidebar-width)); +} .sidebar::-webkit-scrollbar { background: var(--sidebar-bg); } @@ -420,16 +450,22 @@ 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-left: var(--sidebar-width); + margin-inline-start: var(--sidebar-width); + } + [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; } } .chapter { list-style: none outside none; - padding-left: 0; + padding-inline-start: 0; line-height: 2.2em; } @@ -459,7 +495,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 +512,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 +535,7 @@ ul#searchresults span.teaser em { .section { list-style: none outside none; - padding-left: 20px; + padding-inline-start: 20px; line-height: 1.9em; } @@ -522,6 +558,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); } @@ -532,7 +569,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; @@ -545,6 +582,6 @@ ul#searchresults span.teaser em { .theme-selected::before { display: inline-block; content: "✓"; - margin-left: -14px; + margin-inline-start: -14px; width: 14px; } diff --git a/src/theme/css/general.css b/src/theme/css/general.css index 0956b906..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 */ @@ -48,13 +49,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 +66,7 @@ h5:target::before, h6:target::before { display: inline-block; content: "»"; - margin-left: -30px; + margin-inline-start: -30px; width: 30px; } @@ -74,13 +75,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; @@ -90,14 +92,17 @@ 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; 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 +152,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 +171,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..dcf0ba64 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; } @@ -22,6 +22,10 @@ overflow-y: initial; } +code { + direction: ltr !important; +} + pre > .buttons { z-index: 2; } diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 43607111..61b0e273 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -1,5 +1,5 @@ - + @@ -53,7 +53,7 @@ {{/if}} - +