Add RTL support (#324)

Co-authored-by: Stan Ulbrych <stan@python.org>

Author: sepehr-rs

README.md

@@ -22,6 +22,8 @@ To use this theme, add the following to `conf.py`:
 
 - `html_sidebars`, defaults taken from https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_sidebars
 
+- To lay pages out right-to-left for languages such as Persian, Arabic, or Hebrew,
+  set `html_theme_options = {"is_rtl": True}`. Defaults to `false`.
 
 ## Translation
 

python_docs_theme/layout.html

@@ -6,7 +6,7 @@
       <h3>{{ _('Navigation') }}</h3>
       <ul>
           {%- for rellink in rellinks %}
-          <li class="right" {% if loop.first %}style="margin-right: 10px"{% endif %}>
+          <li class="right" {% if loop.first %}style="margin-inline-end: 10px"{% endif %}>
               <a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
                  {{ accesskey(rellink[2]) }}>{{ rellink[3] }}
               </a>
@@ -89,7 +89,7 @@ <h3>{{ _('Navigation') }}</h3>
 {%- endblock -%}
 
 {%- block body_tag %}
-{{ super() }}
+<body{% if theme_is_rtl|tobool %} dir="rtl"{% endif %}>
 {%- if builder != 'htmlhelp' %}
 <div class="mobile-nav">
     <input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"

python_docs_theme/static/pydoctheme.css

@@ -108,7 +108,7 @@ div.related a:hover {
 }
 
 .switchers > div {
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 div.related ul::after {
@@ -117,6 +117,17 @@ div.related ul::after {
     display: block;
 }
 
+div.related ul {
+    padding: 0;
+    padding-inline-start: 10px;
+}
+
+body[dir='rtl'] div.related ul li.right {
+    float: left;
+    margin-right: 0;
+    margin-left: 5px;
+}
+
 .inline-search,
 form.inline-search input {
     display: inline;
@@ -142,6 +153,9 @@ span.pre {
 div.sphinxsidebar {
     display: flex;
     width: min(25vw, 350px);
+    flex-shrink: 0;
+    margin: 0;
+    order: 0;
     float: none;
     position: sticky;
     top: 0;
@@ -158,8 +172,14 @@ div.sphinxsidebar h4 {
     margin-top: 1.5em;
 }
 
-div.bodywrapper {
-    margin-left: min(25vw, 350px);
+div.document div.bodywrapper {
+    margin: 0;
+}
+
+div.documentwrapper {
+    flex: 1;
+    min-width: 0;
+    order: 1;
 }
 
 div.sphinxsidebarwrapper {
@@ -179,6 +199,11 @@ div.sphinxsidebarwrapper > ul > li > ul > li {
     margin-bottom: 0.4em;
 }
 
+div.sphinxsidebar ul ul {
+    margin-left: 0;
+    margin-inline-start: 20px;
+}
+
 div.sphinxsidebar a:hover {
     color: #0095c4;
 }
@@ -206,16 +231,23 @@ div.sphinxsidebar input[type='text'] {
     border-left: none;
 }
 
+body[dir='rtl'] #sidebarbutton {
+    border-radius: 5px 0 0 5px;
+    border-right: none;
+    border-left: none;
+}
+
 #sidebarbutton:hover {
     background-color: #AAAAAA;
 }
 
 div.body {
-    padding: 0 0 0 1.2em;
+    padding: 0;
+    padding-inline-start: 1.2em;
 }
 
 div.body p, div.body dd, div.body li, div.body blockquote {
-    text-align: left;
+    text-align: start;
     line-height: 1.6;
 }
 div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
@@ -225,6 +257,10 @@ div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
 }
 div.body dl.field-list > dt {
     line-height: 1.6;
+    padding-left: 0;
+    padding-right: 0;
+    padding-inline-start: 0.5em;
+    padding-inline-end: 5px;
 }
 
 div.body hr {
@@ -233,6 +269,22 @@ div.body hr {
     height: 1px;
 }
 
+body[dir='rtl'] {
+    & pre,
+    & code,
+    & div.highlight,
+    & dl > dt span ~ em,
+    & .sig,
+    & .sig-param {
+        direction: ltr;
+        unicode-bidi: isolate;
+    }
+}
+
+body[dir='rtl'] .sig {
+    text-align: right;
+}
+
 div.body pre {
     border-radius: 3px;
     border: 1px solid #ac9;
@@ -402,7 +454,7 @@ table.docutils th {
 
 table p,
 table li {
-    text-align: left !important;
+    text-align: start !important;
 }
 
 table.docutils th {
@@ -414,11 +466,37 @@ table.footnote td {
     border: 0 !important;
 }
 
+body[dir='rtl'] div#search-results,
+body[dir='rtl'] div#search-results ul.search li {
+    direction: rtl;
+    text-align: right;
+    unicode-bidi: isolate;
+}
+
+body[dir='rtl'] div#search-results ul.search li p {
+    text-align: right;
+}
+
+body[dir='rtl'] div.citation > span {
+    float: right;
+}
+
+body[dir='rtl'] aside.footnote > span {
+    float: right;
+    padding-right: 0;
+    padding-left: 0.5rem;
+}
+
+body[dir='rtl'] aside.footnote > p {
+    margin-left: 0;
+    margin-right: 2rem;
+}
+
 div.footer {
     line-height: 150%;
-    text-align: right;
+    text-align: end;
     width: auto;
-    margin-right: 10px;
+    margin-inline-end: 10px;
 }
 
 div.footer a {
@@ -476,18 +554,17 @@ div.footer a:hover {
     color: var(--threadsafety-atomic);
 }
 
-
 dl > dt span ~ em,
 .sig {
     font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 }
 
 .toctree-wrapper ul {
-    padding-left: 20px;
+    padding-inline-start: 20px;
 }
 
 .theme-selector {
-    margin-left: .5em;
+    margin-inline-start: .5em;
 }
 
 div.genindex-jumpbox,
@@ -506,17 +583,17 @@ div.genindex-jumpbox a {
     cursor: pointer;
     position: absolute;
     top: 0;
-    right: 0;
+    right: 0; /* physical right; always, even in RTL, since code is LTR */
     font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
     font-size: 80%;
     padding-left: .5em;
     padding-right: .5em;
     height: 100%;
     max-height: min(100%, 2.4em);
-    border-radius: 0 3px 0 0;
+    border-radius: 0 3px 0 0; /* physical — top-right corner, always */
     color: #000;
     background-color: #fff;
-    border: 1px solid #ac9; /* follows div.body pre */
+    border: 1px solid #ac9;
     display: none;
 }
 
@@ -589,7 +666,7 @@ div.genindex-jumpbox a {
         width: 100%;
         position: fixed;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         box-shadow: rgba(0, 0, 0, 0.25) 0 0 2px 0;
         z-index: 1;
     }
@@ -611,7 +688,7 @@ div.genindex-jumpbox a {
         align-items: stretch;
     }
     .nav-logo {
-        margin-right: 1rem;
+        margin-inline-end: 1rem;
         flex-shrink: 0;
         align-self: center;
     }
@@ -620,7 +697,7 @@ div.genindex-jumpbox a {
         width: 20px;
     }
     .version_switcher_placeholder {
-        margin-right: 1rem;
+        margin-inline-end: 1rem;
     }
     .version_switcher_placeholder > select {
         height: 100%;
@@ -630,25 +707,27 @@ div.genindex-jumpbox a {
         flex: auto;
         border: 1px solid #a9a9a9;
         align-items: stretch;
+        position: relative;
     }
     .nav-content .search input[type=search] {
         border: 0;
-        padding-left: 24px;
+        padding-inline-start: 24px;
         width: 100%;
         flex: 1;
     }
     .nav-content .search input[type=submit] {
         height: 100%;
         box-shadow: none;
         border: 0;
-        border-left: 1px solid #a9a9a9;
+        border-inline-start: 1px solid #a9a9a9;
         cursor: pointer;
-        margin-right: 0;
+        margin-inline-end: 0;
     }
     .nav-content .search svg {
         position: absolute;
-        align-self: center;
-        padding-left: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+        inset-inline-start: 4px;
     }
     .toggler__input {
         display: none;
@@ -680,7 +759,7 @@ div.genindex-jumpbox a {
         width: 100%;
         background: inherit;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: -8px;
     }
     .toggler__label > span::after {
@@ -701,29 +780,36 @@ div.genindex-jumpbox a {
     }
     .toggler__input:checked ~ .menu-wrapper {
         visibility: visible;
-        left: 0;
+        transform: translateX(0);
     }
 
     /* Sliding side menu */
     .menu-wrapper {
         display: block;
         position: fixed;
         top: 0;
-        transition: left 400ms ease;
-        left: -310px;
+        inset-inline-start: 0;
+        transition: transform 400ms ease;
+        transform: translateX(calc(-100% - 10px));
         width: 300px;
         height: 100%;
         background-color: #eee;
         color: #444444;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
         overflow-y: auto;
     }
+    body[dir='rtl'] .menu-wrapper {
+        transform: translateX(100%);
+    }
     .menu-wrapper.open {
         visibility: visible;
-        left: 0;
+        transform: translateX(0);
     }
     .menu {
-        padding: 40px 10px 30px 20px;
+        padding-block-start: 40px;
+        padding-inline-end: 10px;
+        padding-block-end: 30px;
+        padding-inline-start: 20px;
     }
     .menu-wrapper h3,
     .menu-wrapper h4 {
@@ -748,10 +834,10 @@ div.genindex-jumpbox a {
         list-style: none;
         line-height: 1.4;
         overflow-wrap: break-word;
-        padding-left: 0;
+        padding-inline-start: 0;
     }
     .menu ul ul {
-        margin-left: 20px;
+        margin-inline-start: 20px;
         list-style: square;
     }
     .menu ul li {
@@ -807,26 +893,26 @@ div.versionadded,
 div.versionchanged,
 div.deprecated,
 div.deprecated-removed {
-    border-left: 3px solid;
+    border-inline-start: 3px solid;
     padding: 0 1rem;
 }
 
 div.versionadded {
-    border-left-color: var(--versionadded-border);
+    border-inline-start-color: var(--versionadded-border);
 }
 
 div.versionchanged {
-    border-left-color: var(--versionchanged-border);
+    border-inline-start-color: var(--versionchanged-border);
 }
 
 div.deprecated,
 div.deprecated-removed,
 div.versionremoved {
-    border-left-color: var(--deprecated-border);
+    border-inline-start-color: var(--deprecated-border);
 }
 
 div.soft-deprecated {
-    border-left-color: var(--soft-deprecated-border);
+    border-inline-start-color: var(--soft-deprecated-border);
 }
 
 div.versionadded .versionmodified {