From d62e2f7e0ed83b22e81b256269c713ad48e33073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Fri, 10 Feb 2023 00:34:47 +0100
Subject: [PATCH] i18n: full support for RTL #470

---
 README.md                                     |   2 +-
 exampleSite/content/_index.en.md              |   2 +-
 .../content/basics/migration/_index.en.md     |   2 +-
 exampleSite/content/cont/i18n/_index.en.md    |   2 +-
 exampleSite/layouts/partials/toc.html         |   2 +-
 layouts/partials/logo.html                    |  10 +-
 layouts/partials/menu.html                    |   2 +-
 layouts/partials/stylesheet.html              |  12 +-
 layouts/partials/toc.html                     |   2 +-
 static/css/auto-complete.css                  |   2 +-
 static/css/format-print.css                   |   9 +-
 static/css/ie.css                             | 226 ++++++++++++++----
 static/css/nucleus.css                        |   2 +-
 static/css/theme.css                          | 143 +++++------
 static/js/theme.js                            |  31 ++-
 15 files changed, 276 insertions(+), 173 deletions(-)

diff --git a/README.md b/README.md
index 4c7938d7ab..d9ea573bbb 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ The theme is a fork of the great [Learn theme](https://github.com/matcornic/hugo
 - Support for GFM (GitHub Flavored Markdown)
 - Print whole chapters or even the complete site
 - Multilingual mode for English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese
-- Support for languages written right to left
+- Full support for languages written right to left
 - Unrestricted menu configuration relating to amount of items and level of nesting
 - Font Awesome icons
 - Tagging support
diff --git a/exampleSite/content/_index.en.md b/exampleSite/content/_index.en.md
index 8d40211c22..df367649f5 100644
--- a/exampleSite/content/_index.en.md
+++ b/exampleSite/content/_index.en.md
@@ -26,7 +26,7 @@ See [What's New]({{% relref "basics/migration" %}}) within the latest update.
 - [Support for GFM]({{% relref "cont/markdown" %}}) (GitHub Flavored Markdown)
 - [Print]({{%relref "basics/configuration#activate-print-support" %}}) whole chapters or even the complete site
 - [Multilingual mode]({{%relref "cont/i18n" %}}) for English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese
-- Support for languages written right to left
+- Full support for languages written right to left
 - [Unrestricted menu configuration]({{%relref "cont/menushortcuts" %}}) relating to amount of items and level of nesting
 - [Font Awesome icons]({{%relref "shortcodes/icon" %}})
 - [Tagging support]({{%relref "cont/tags" %}})
diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 26b8b6ed91..337b5bdb50 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -20,7 +20,7 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 5.12.0 (not yet released)
 
-- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for languages that are written right to left (like Arabic) is expanded to the top navigation bar. This feature is not available in Internet Explorer 11.
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for languages that are written right to left (like Arabic) is now complete and extended to the menu, the top navigation bar and print. This feature is not available in Internet Explorer 11.
 
 ---
 
diff --git a/exampleSite/content/cont/i18n/_index.en.md b/exampleSite/content/cont/i18n/_index.en.md
index 2d51a528b3..71a65608e1 100644
--- a/exampleSite/content/cont/i18n/_index.en.md
+++ b/exampleSite/content/cont/i18n/_index.en.md
@@ -8,7 +8,7 @@ The Relearn theme is fully compatible with Hugo multilingual mode.
 It provides:
 
 - Translation strings for default values (English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese). Feel free to contribute!
-- Support for languages written right to left
+- Full support for languages written right to left
 - Automatic menu generation from multilingual content
 - In-browser language switching
 
diff --git a/exampleSite/layouts/partials/toc.html b/exampleSite/layouts/partials/toc.html
index f94c0569d5..ced4b58a63 100644
--- a/exampleSite/layouts/partials/toc.html
+++ b/exampleSite/layouts/partials/toc.html
@@ -1,5 +1,5 @@
           <div class="default-animation progress">
-            <div class="toc-wrapper" dir="{{ T "Reading-direction" | default "ltr" }}">
+            <div class="toc-wrapper">
 {{- partial "shortcodes/piratify.html" (dict
   "context" .
   "pagefield" "TableOfContents"
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
index 266b4250d8..5a7c7b8260 100644
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@@ -25,7 +25,7 @@
             }
             #logo svg {
               margin-bottom: -20px;
-              margin-left: -23.5px;
+              margin-inline-start: -23.5px;
               width: 40.5%;
             }
             @media only all and (max-width: 59.938em) {
@@ -35,7 +35,7 @@
               }
               #logo svg {
                 margin-bottom: -12px;
-                margin-left: -23px;
+                margin-inline-start: -23px;
               }
             }
             @media all and (-ms-high-contrast:none) {
@@ -45,6 +45,12 @@
               }
               #logo svg {
                 margin-bottom: -62px;
+                margin-left: -23.5px;
+              }
+            }
+            @media only all and (-ms-high-contrast:none) and (max-width: 59.938em) {
+              #logo svg {
+                margin-left: -23px;
               }
             }
           </style>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index c2129fa3a9..73fddd0bdf 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -6,7 +6,7 @@
     {{- if ne $outputFormat "html" }}
       {{- $basename = partial "BaseName.hugo" $format.RelPermalink }}
     {{- end }}
-    <aside id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}" dir="ltr">
+    <aside id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}">
       {{- $currentNode := . }}
       <div id="header-wrapper" class="default-animation">
         <div id="header" class="default-animation">
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index 178988d64b..b75d217054 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -8,26 +8,26 @@
     {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
     {{ "<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->" | safeHTML }}
     <link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
+    <link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
     <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
     <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{- $autotemplate := resources.Get "css/theme-auto.css" }}
+    {{- $autocss := $autotemplate | resources.ExecuteAsTemplate "css/theme-auto.css" .Site.Home }}
+    {{- $c := "" }}<!-- cause Hugo to generate our theme-auto.css -->
+    {{- $c = "" }}<!-- link href="{{ $autocss.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"-->
     {{- $themevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }}
     {{- with index $themevariants 0 }}
     <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style">
     {{- end }}
-    <link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
     {{- $f := printf "/static/css/format-%s.css" $outputFormat }}
     {{- if partialCached "fileExists.hugo" $f $f }}
     <link href="{{(printf "css/format-%s.css" $outputFormat) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     {{- end }}
-    {{- $autotemplate := resources.Get "css/theme-auto.css" }}
-    {{- $autocss := $autotemplate | resources.ExecuteAsTemplate "css/theme-auto.css" .Site.Home }}
-    {{- $c := "" }}<!-- cause Hugo to generate our theme-auto.css -->
-    {{- $c = "" }}<!-- link href="{{ $autocss.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"-->
+    <link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <script src="{{"js/url.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/variant.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script>
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 0c3716bfe0..c20fa0a5b4 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,5 +1,5 @@
           <div class="default-animation progress">
-            <div class="toc-wrapper" dir="{{ T "Reading-direction" | default "ltr" }}">
+            <div class="toc-wrapper">
 {{- .TableOfContents }}
             </div>
           </div>
\ No newline at end of file
diff --git a/static/css/auto-complete.css b/static/css/auto-complete.css
index 83e8009322..7b99273717 100644
--- a/static/css/auto-complete.css
+++ b/static/css/auto-complete.css
@@ -1,5 +1,5 @@
 .autocomplete-suggestions {
-    text-align: left;
+    text-align: start;
     cursor: default;
     border: 1px solid #ccc;
     border-top: 0;
diff --git a/static/css/format-print.css b/static/css/format-print.css
index 1148ad2604..16d390425f 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -20,13 +20,8 @@ body {
     background-color: white;
 }
 code.copy-to-clipboard-code {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    border-right-width: 1px;
-}
-span > code.copy-to-clipboard-code {
-    border-end-end-radius: 2px;
     border-start-end-radius: 2px;
+    border-end-end-radius: 2px;
     border-inline-end-width: 1px;
 }
 pre {
@@ -36,9 +31,9 @@ pre {
     background-color: #fff; /* avoid background bleeding*/
     border-bottom: 1px solid #ddd;
     border-radius: 0;
+    color: #777;
     padding-left: 0; /* for print, we want to align with the footer to ease the layout */
     padding-right: 0;
-    color: #777;
 }
 .navigation,
 #top-print-link,
diff --git a/static/css/ie.css b/static/css/ie.css
index dbcc072030..a42e0f77c1 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -1,94 +1,219 @@
 @media all and (-ms-high-contrast:none) {
+	/* ----------------------------------------------- */
 	/* turn off LTR support as it is dependend on CSS properties that aren't supported by IE11 */
-	html[dir="rtl"] #body #breadcrumbs {
-		float: left;
+	html {
+		direction: ltr !important;
 	}
-	html[dir="rtl"] .navigation,
-	html[dir="rtl"] #top-print-link,
-	html[dir="rtl"] #top-github-link {
+	/* nucleus */
+	th {
+		text-align: left;
+	}
+	input[type="checkbox"], input[type="radio"] {
+		margin-right: 0.425rem;
+	}
+	blockquote {
+		padding-left: 0.85rem;
+	}
+	/* theme */
+	#sidebar {
+		left: 0;
+	}
+	.searchbox > :first-child {
+		left: .5rem;
+	}
+	.searchbox span {
+		right: .5rem;
+	}
+	.searchbox input {
+		padding-left: 1.8rem;
+		padding-right: 1.6rem;
+	}
+	#sidebar ul li.visited + span {
+		margin-right: 16px;
+	}
+	#sidebar ul li li {
+		padding-left: 1rem;
+	}
+	#sidebar ul li .read-icon {
+		text-align: right;
+	}
+	html[dir="rtl"] #sidebar ul li .read-icon {
 		float: right;
 	}
-	html[dir="rtl"] .nav i{
-		transform: scaleX(1);
+	#sidebar .nav-title {
+		padding-left: 1rem;
 	}
-	html[dir="rtl"] .progress {
-        left: 4.25rem;
-    }
-	html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
-		transform: scaleX(1);
-	}
-	article,
-	.toc-wrapper,
-	.tags {
-		direction: ltr;
+	#body {
+		margin-left: 300px;
 	}
 	h2, h3, h4, h5, h6 {
 		padding-right: 2rem;
 	}
 	blockquote {
 		border-left: 10px solid rgba( 134, 134, 134, .4 );
-		padding-left: 0.85rem;
 	}
 	blockquote cite {
 		text-align: right;
 	}
-	th {
-		text-align: left;
-	}
-	.disableInlineCopyToClipboard span > code.copy-to-clipboard-code {
-		border-bottom-right-radius: 2px;
-		border-top-right-radius: 2px;
-		border-right-width: 1px;
-	}
-	.anchor {
-		margin-left: .66em;
-	}
 	div.attachments .box-content {
 		padding-left: 1.75rem;
 	}
+	#body-inner ul.children-h2,
+	#body-inner ul.children-h3,
+	#body-inner ul.children-h4,
+	#body-inner ul.children-h5,
+	#body-inner ul.children-h6 {
+		/* if we display children with style=h2 but without a containerstyle
+		a ul will be used for structuring; we remove default indention for uls
+		in this case */
+		padding-left: 0;
+	}
+	code.copy-to-clipboard-code {
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+		border-right-width: 0;
+	}
+	html[dir="rtl"] .navigation,
+	html[dir="rtl"] #top-print-link,
+	html[dir="rtl"] #top-github-link {
+		float: right;
+	}
+	.nav,
+	.print-link,
+	.github-link {
+		border-left: thin solid rgba( 134, 134, 134, .333 );
+	}
+	html[dir="rtl"] .nav i {
+		transform: scaleX(1);
+	}
+	#toc-menu,
+	#sidebar-toggle-span {
+		border-right: thin solid rgba( 134, 134, 134, .333 );
+	}
+	html[dir="rtl"] #body #breadcrumbs {
+		float: left;
+	}
+	.progress {
+		left: 1rem;
+	}
+	@media screen and (max-width: 47.938em) {
+		.progress {
+			left: 4.25rem;
+		}
+	}
+	@media screen and (max-width: 59.938em) {
+		#body {
+			margin-left: 230px;
+		}
+	}
+	@media screen and (max-width: 47.938em) {
+		.mobile-support #sidebar {
+			left: -230px;
+		}
+		.mobile-support #body {
+			margin-left: 0;
+		}
+		.mobile-support.sidebar-flyout #sidebar {
+			left: 0;
+		}
+		.mobile-support.sidebar-flyout #body {
+			margin-left: 230px;
+		}
+	}
+	.copy-to-clipboard-button {
+		border-top-left-radius: 0;
+		border-top-right-radius: 2px;
+		border-bottom-right-radius: 2px;
+		border-bottom-left-radius: 0;
+		padding-left: 22px;
+	}
+	span > .copy-to-clipboard-button {
+		border-top-left-radius: 0;
+		border-top-right-radius: 2px;
+		border-bottom-right-radius: 2px;
+		border-bottom-left-radius: 0;
+	}
+	.copy-to-clipboard-button > i {
+		margin-left: -22px;
+	}
+	pre > .copy-to-clipboard-button {
+		padding-left: 25px;
+		padding-right: 3px;
+		right: 4px;
+	}
+	.disableInlineCopyToClipboard span > code.copy-to-clipboard-code {
+		border-top-right-radius: 2px;
+		border-bottom-right-radius: 2px;
+		border-right-width: 1px;
+	}
 	.expand > label {
 		left: 0;
 	}
-	.expand > input + label > .fa-chevron-left {
-		display: none !important;
+	html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
+		transform: scaleX(1);
 	}
-	.expand > input + label > .fa-chevron-right {
-		display: inline-block !important;
+	.footline i{
+		margin-left: .5rem;
 	}
-	.expand > input:checked + label > .fa-chevron-right {
-		display: none !important;
+	.footline i:first-child{
+		margin-left: 0;
 	}
-	#body .tab-nav-button {
-		margin-left: 4px;
+	.anchor {
+		margin-left: .66em;
 	}
-	html[dir="rtl"] #body .tab-nav-button {
+	/* rapi-doc
+	seems not be capable of RTL
+	*/
+	html[dir="rtl"] .select-container i,
+	html[dir="rtl"] .select-container span {
 		float: left;
 	}
-	#body .tab-nav-button:first-child {
-		margin-left: 9px;
+	.footerVisitedLinks > * {
+		text-align: left;
+	}
+	#sidebar ul.collapsible-menu input.toggle {
+		left: 1rem;
+	}
+	#sidebar .collapsible-menu input.toggle:before {
+		margin-left: -1rem;
+	}
+	html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
+		content: "\f054";
 	}
 	.searchform input {
 		margin-right: .5rem;
 	}
-	.autocomplete-suggestion > .context {
-		margin-left: 1em;
-	}
-
 	.badge > .badge-title {
 		border-right: 0;
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}
-
 	.badge.badge-with-title > .badge-content {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
-
 	article ul li:has(input[type="checkbox"]) {
 		margin-left: -1rem;
 	}
+	/* tabs */
+	#body .tab-nav-button {
+		margin-left: 4px;
+	}
+	html[dir="rtl"] #body .tab-nav-button{
+		float: left;
+	}
+	#body .tab-nav-button:first-child {
+		margin-left: 9px;
+	}
+	/* auto-complete */
+	.autocomplete-suggestions {
+		text-align: left;
+	}
+	.autocomplete-suggestion > .context {
+		margin-left: 1em;
+	}
 
+	/* ----------------------------------------------- */
 	/* set default colors as in variant.css for IE11 */
 	body {
 		background-color: #ffffff; /* var(--MAIN-BG-color) */
@@ -639,6 +764,7 @@
 		box-shadow: inset 1em 1em #7dc903; /* var(--INTERNAL-PRIMARY-color) */
 	}
 
+	/* ----------------------------------------------- */
 	/* set further styles to fix broken stuff in IE11 */
 
 	/* turn off animiation in IE because this causes the menu
@@ -674,3 +800,11 @@
 		display: none;
 	}
 }
+
+@media print and (-ms-high-contrast:none) {
+	code.copy-to-clipboard-code {
+		border-top-right-radius: 2px;
+		border-bottom-right-radius: 2px;
+		border-right-width: 1px;
+	}
+}
diff --git a/static/css/nucleus.css b/static/css/nucleus.css
index 05970ee96e..67b8e65d49 100644
--- a/static/css/nucleus.css
+++ b/static/css/nucleus.css
@@ -242,7 +242,7 @@ textarea {
 
 input[type="checkbox"], input[type="radio"] {
   display: inline;
-  margin-right: 0.425rem; }
+  margin-inline-end: 0.425rem; }
 
 input[type="file"] {
   width: 100%; }
diff --git a/static/css/theme.css b/static/css/theme.css
index 18ac3dcaac..f6fe0cd085 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -52,6 +52,7 @@ dd {
     flex-shrink: 0;
     font-size: .953125rem;
     height: 100%;
+    inset-inline-start: 0;
     line-height: 1.574;
     min-height: 100%;
     min-width: 300px;
@@ -59,12 +60,6 @@ dd {
     position: fixed;
     width: 300px;
 }
-html[dir="ltr"] #sidebar {
-    left: 0;
-}
-html[dir="rtl"] #sidebar {
-    right: 0;
-}
 
 #header-wrapper {
     border-bottom-style: solid;
@@ -86,8 +81,8 @@ html[dir="rtl"] #sidebar {
 }
 
 .searchbox > :first-child {
+    inset-inline-start: .5rem;
     position: absolute;
-    left: .5rem;
 }
 
 .searchbox > button {
@@ -106,8 +101,8 @@ html[dir="rtl"] #sidebar {
 
 .searchbox span {
     cursor: pointer;
+    inset-inline-end: .5rem;
     position: absolute;
-    right: .5rem;
     top: .25rem;
 }
 
@@ -128,7 +123,10 @@ html[dir="rtl"] #sidebar {
     height: 1.875rem;
     background: transparent;
     border: 0;
-    padding: 0 1.6rem 0 1.8rem;
+    padding-bottom: 0;
+    padding-inline-end: 1.6rem;
+    padding-inline-start: 1.8rem;
+    padding-top: 0;
     margin: 0;
     font-weight: 300;
 }
@@ -215,7 +213,7 @@ html[dir="rtl"] #sidebar {
 }
 
 #sidebar ul li.visited + span {
-    margin-right: 16px;
+    margin-inline-end: 16px;
 }
 
 #sidebar ul li a,
@@ -237,7 +235,7 @@ html[dir="rtl"] #sidebar {
 }
 
 #sidebar ul li li {
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
 }
 
 #sidebar ul.topics > li > a .read-icon {
@@ -255,7 +253,10 @@ html[dir="rtl"] #sidebar {
     font-size: 13px;
     margin: 4px 0 0 0;
     min-width: 16px;
-    text-align: right;
+    text-align: start;
+}
+html[dir="rtl"] #sidebar ul li .read-icon {
+    float: left;
 }
 
 #sidebar ul li.visited > a .read-icon {
@@ -268,7 +269,7 @@ html[dir="rtl"] #sidebar {
     letter-spacing: -1px;
     line-height: 110% !important;
     margin: 1rem 0 1rem 0;
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
     text-rendering: optimizeLegibility;
     text-transform: uppercase;
 }
@@ -290,6 +291,7 @@ html[dir="rtl"] #sidebar {
     flex-grow: 1;
     flex-shrink: 0;
     height: 100%;
+    margin-inline-start: 300px;
     min-height: 100%;
     min-width: calc( 100% - 300px);
     max-width: calc( 100% - 300px);
@@ -298,12 +300,6 @@ html[dir="rtl"] #sidebar {
     width: calc( 100% - 300px);
     z-index: 70;
 }
-html[dir="ltr"] #body {
-    margin-left: 300px;
-}
-html[dir="rtl"] #body {
-    margin-right: 300px;
-}
 
 #body img:not(.lightbox-image),
 #body img.center,
@@ -614,18 +610,10 @@ code {
 
 span.copy-to-clipboard {
     display: inline-block;
+    white-space: nowrap;
 }
 
 code.copy-to-clipboard-code {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    border-right-width: 0;
-}
-
-span > code.copy-to-clipboard-code {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    border-right-width: 1px;
     border-end-end-radius: 0;
     border-start-end-radius: 0;
     border-inline-end-width: 0;
@@ -862,11 +850,11 @@ html[dir="rtl"] #top-github-link {
 .nav,
 .print-link,
 .github-link {
-    border-left: thin solid rgba( 134, 134, 134, .333 );
+    border-inline-start: thin solid rgba( 134, 134, 134, .333 );
     padding-left: 1rem;
     padding-right: 1rem;
 }
-html[dir="rtl"] .nav i{
+html[dir="rtl"] .nav i {
     transform: scaleX(-1);
 }
 span.nav i{
@@ -886,13 +874,12 @@ span.nav i{
 }
 #toc-menu,
 #sidebar-toggle-span {
-    border-right: thin solid rgba( 134, 134, 134, .333 );
+    border-inline-end: thin solid rgba( 134, 134, 134, .333 );
     padding-left: 1rem;
     padding-right: 1rem;
 }
 
 #body #breadcrumbs {
-    display: inline-block;
     float: left;
     height: auto;
     line-height: 1.4;
@@ -918,23 +905,15 @@ html[dir="rtl"] #body #breadcrumbs {
     display: none;
 }
 .progress {
+    inset-inline-start: 1rem;
     top: 1rem;
 }
-html[dir="ltr"] .progress {
-    left: 1rem;
-}
-html[dir="rtl"] .progress {
-    right: 1rem;
-}
 @media screen and (max-width: 47.938em) {
     .mobile-support #sidebar-toggle-span {
         display: inline;
     }
-    html[dir="ltr"] .progress {
-        left: 4.25rem;
-    }
-    html[dir="rtl"] .progress {
-        right: 4.25rem;
+    .progress {
+        inset-inline-start: 4.25rem;
     }
 }
 
@@ -976,24 +955,16 @@ html[dir="rtl"] .progress {
         width: 230px;
     }
     #body {
+        margin-inline-start: 230px;
         min-width: calc( 100% - 230px);
         max-width: calc( 100% - 230px);
         width: calc( 100% - 230px);
     }
-    html[dir="ltr"] #body {
-        margin-left: 230px;
-    }
-    html[dir="rtl"] #body {
-        margin-right: 230px;
-    }
 }
 @media screen and (max-width: 47.938em) {
     /* we don't support sidebar flyout in mobile */
-    html[dir="ltr"] .mobile-support #sidebar {
-        left: -230px;
-    }
-    html[dir="rtl"] .mobile-support #sidebar {
-        right: -230px;
+    .mobile-support #sidebar {
+        inset-inline-start: -230px;
     }
     .mobile-support #navshow{
         display: inline;
@@ -1003,33 +974,20 @@ html[dir="rtl"] .progress {
         max-width: 100%;
         width: 100%;
     }
-    html[dir="ltr"] .mobile-support #body {
-        margin-left: 0;
-    }
-    html[dir="rtl"] .mobile-support #body {
-        margin-right: 0;
+    .mobile-support #body {
+        margin-inline-start: 0;
     }
     .mobile-support.sidebar-flyout {
         overflow: hidden;
     }
     .mobile-support.sidebar-flyout #sidebar {
+        inset-inline-start: 0;
         z-index: 90;
     }
-    html[dir="ltr"] .mobile-support.sidebar-flyout #sidebar {
-        left: 0;
-    }
-    html[dir="rtl"] .mobile-support.sidebar-flyout #sidebar {
-        right: 0;
-    }
     .mobile-support.sidebar-flyout #body {
+        margin-inline-start: 230px;
         overflow: hidden;
     }
-    html[dir="ltr"] .mobile-support.sidebar-flyout #body {
-        margin-left: 230px;
-    }
-    html[dir="rtl"] .mobile-support.sidebar-flyout #body {
-        margin-right: 230px;
-    }
     .mobile-support.sidebar-flyout #sidebar-overlay{
         background-color: rgba(134, 134, 134, 0.5);
         bottom: 0;
@@ -1043,12 +1001,15 @@ html[dir="rtl"] .progress {
 }
 
 .copy-to-clipboard-button {
-    border-radius: 0 2px 2px 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 2px;
+    border-end-end-radius: 2px;
+    border-end-start-radius: 0;
     border-style: solid;
     border-width: 1px;
     cursor: pointer;
-    font-size: .859625rem;
-    padding-left: 22px;
+    font-size: .934375rem;
+    padding-inline-start: 22px;
 }
 
 span > .copy-to-clipboard-button {
@@ -1059,9 +1020,9 @@ span > .copy-to-clipboard-button {
 }
 
 .copy-to-clipboard-button > i {
-    font-size: .790855rem;
+    font-size: .859625rem;
     font-weight: 500;
-    margin-left: -22px;
+    margin-inline-start: -22px;
 }
 
 .copy-to-clipboard-code + .copy-to-clipboard-button > i {
@@ -1074,9 +1035,12 @@ pre > .copy-to-clipboard-button {
     border-radius: 2px;
     border-style: solid;
     border-width: 1px;
-    padding: 5px 3px 5px 25px;
+    inset-inline-end: 4px;
+    padding-bottom: 5px;
+    padding-inline-start: 25px;
+    padding-inline-end: 3px;
+    padding-top: 5px;
     position: absolute;
-    right: 4px;
     top: 4px;
 }
 
@@ -1085,8 +1049,8 @@ pre > .copy-to-clipboard-button {
 }
 
 .disableInlineCopyToClipboard span > code.copy-to-clipboard-code {
-    border-end-end-radius: 2px;
     border-start-end-radius: 2px;
+    border-end-end-radius: 2px;
     border-inline-end-width: 1px;
 }
 
@@ -1151,7 +1115,6 @@ option {
 .expand > input + label > .fa-chevron-down {
     display: none;
 }
-.expand > input + label > .fa-chevron-left,
 .expand > input + label > .fa-chevron-right {
     display: inline-block;
 }
@@ -1164,7 +1127,6 @@ option {
 .expand > input:checked + label > .fa-chevron-down {
     display: inline-block;
 }
-.expand > input:checked + label > .fa-chevron-left,
 .expand > input:checked + label > .fa-chevron-right {
     display: none;
 }
@@ -1179,10 +1141,10 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 }
 
 .footline i{
-    margin-left: .5rem;
+    margin-inline-start: .5rem;
 }
 .footline i:first-child{
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 .mermaid-container {
@@ -1463,6 +1425,10 @@ rapi-doc::part(section-endpoint-head-method) {
     display: block;
     float: left;
 }
+html[dir="rtl"] .select-container i,
+html[dir="rtl"] .select-container span {
+    float: right;
+}
 
 .select-style {
     border: 0;
@@ -1518,7 +1484,7 @@ rapi-doc::part(section-endpoint-head-method) {
     appearance: none;
     background: transparent;
 	cursor: pointer;
-    text-align: left;
+    text-align: start;
     text-decoration: none;
     width: 100%;
 }
@@ -1540,7 +1506,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
     appearance: none;
     cursor: pointer;
     height: 2rem;
-    left: 1rem;
+    inset-inline-start: 1rem;
     padding-top: .35rem;
     position: absolute;
     width: 1px;
@@ -1555,14 +1521,17 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
     font-family: "Font Awesome 5 Free";
     font-size: .8rem;
     font-weight: 900;
-    margin-left: -1rem;
+    margin-inline-start: -1rem;
     padding-bottom: .65rem;
     padding-left: .2rem;
     padding-right: .2rem;
     padding-top: .6rem;
 }
+html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
+    content: "\f053";
+}
 
-#sidebar .collapsible-menu input.toggle:checked:before {
+html[dir] #sidebar .collapsible-menu input.toggle:checked:before {
     content: "\f078";
     padding-left: .1rem;
     padding-right: .1rem;
diff --git a/static/js/theme.js b/static/js/theme.js
index 460890565a..dcc15deadf 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -326,9 +326,8 @@ function initAnchorClipboard(){
     var clip = new ClipboardJS( '.anchor' );
     clip.on( 'success', function( e ){
         e.clearSelection();
-        var rtl = e.trigger.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
         e.trigger.setAttribute( 'aria-label', window.T_Link_copied_to_clipboard );
-        e.trigger.classList.add( 'tooltipped', 'tooltipped-s'+(rtl?'e':'w') );
+        e.trigger.classList.add( 'tooltipped', 'tooltipped-s'+(isRtl?'e':'w') );
     });
 }
 
@@ -370,19 +369,17 @@ function initCodeClipboard(){
             clip.on( 'success', function( e ){
                 e.clearSelection();
                 var inPre = e.trigger.parentNode.tagName.toLowerCase() == 'pre';
-                var rtl = e.trigger.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
                 e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard );
-                e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(rtl?'e':'w')) );
+                e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(isRtl?'e':'w')) );
             });
 
             clip.on( 'error', function( e ){
                 var inPre = e.trigger.parentNode.tagName.toLowerCase() == 'pre';
-                var rtl = e.trigger.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
                 e.trigger.setAttribute( 'aria-label', fallbackMessage(e.action) );
-                e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(rtl?'e':'w')) );
+                e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(isRtl?'e':'w')) );
                 var f = function(){
                     e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard );
-                    e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(rtl?'e':'w')) );
+                    e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(isRtl?'e':'w')) );
                     document.removeEventListener( 'copy', f );
                 };
                 document.addEventListener( 'copy', f );
@@ -406,7 +403,6 @@ function initCodeClipboard(){
             button.setAttribute( 'title', window.T_Copy_to_clipboard );
             button.innerHTML = '<i class="fas fa-copy"></i>';
             button.addEventListener( 'mouseleave', function() {
-                var rtl = this.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
                 this.removeAttribute( 'aria-label' );
                 this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
             });
@@ -548,20 +544,23 @@ function initMenuScrollbar(){
     // on resize, we have to redraw the scrollbars to let new height
     // affect their size
     window.addEventListener('resize', function(){
-        pst && pst.update();
-        psm && psm.update();
-        psc && psc.update();
+        console.log("resize")
+        pst && setTimeout( function(){ pst.update(); }, 400 );
+        psm && setTimeout( function(){ psm.update(); }, 400 );
+        psc && setTimeout( function(){ psc.update(); }, 400 );
     });
     // now that we may have collapsible menus, we need to call a resize
     // for the menu scrollbar if sections are expanded/collapsed
     document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){
         e.addEventListener('change', function(){
-            psm && psm.update();
+            psm && setTimeout( function(){ psm.update(); }, 400 );
         });
     });
     // bugfix for PS in RTL mode: the initial scrollbar position is off;
     // calling update() once, fixes this
-    pst && setTimeout( function(){ pst.update(); }, 0 );
+    pst && setTimeout( function(){ pst.update(); }, 400 );
+    psm && setTimeout( function(){ psm.update(); }, 400 );
+    psc && setTimeout( function(){ psc.update(); }, 400 );
 
     // finally, we want to adjust the contents end padding if there is a scrollbar visible
     window.addEventListener('resize', adjustContentWidth );
@@ -669,7 +668,7 @@ function showToc(){
     var b = document.querySelector( 'body' );
     b.classList.toggle( 'toc-flyout' );
     if( b.classList.contains( 'toc-flyout' ) ){
-        pst && pst.update();
+        pst && setTimeout( function(){ pst.update(); }, 400 );
         pst && pst.scrollbarY.focus();
         document.querySelector( '.toc-wrapper ul a' ).focus();
         document.addEventListener( 'keydown', tocEscapeHandler );
@@ -883,7 +882,7 @@ function mark() {
 			parent = parent.parentNode;
 		}
 	}
-    psm && psm.update();
+    psm && setTimeout( function(){ psm.update(); }, 400 );
 }
 window.relearn.markSearch = mark;
 
@@ -971,7 +970,7 @@ function unmark() {
 
 	var highlighted = document.querySelectorAll( '.highlightable' );
     unhighlight( highlighted, { element: 'mark' } );
-    psm && psm.update();
+    psm && setTimeout( function(){ psm.update(); }, 400 );
 }
 
 function unhighlight( es, options ){