Visitar URL original
Add RTL support by sepehr-rs · Pull Request #324 · python/python-docs-theme · GitHub
Skip to content

Add RTL support #324

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
StanFromIreland merged 25 commits into from
Sep 18, 2026
+126 −37
Merged

Add RTL support #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
091917c
Add is_rtl flag to theme.toml
sepehr-rs Aug 17, 2026
e2cc426
Force RTL but keep codeboxes LTR
sepehr-rs Aug 17, 2026
5870154
Add Vazirmatn support
sepehr-rs Aug 17, 2026
6eb161f
Fix sidebar
sepehr-rs Aug 17, 2026
13de683
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Aug 17, 2026
1ce690e
Fix siderbar
sepehr-rs Aug 17, 2026
09fce2b
Fix navbar
sepehr-rs Aug 18, 2026
a9ec66e
Remove Vazirmatn support
sepehr-rs Aug 18, 2026
779f8b9
Merge branch 'python:main' into add-rtl
sepehr-rs Aug 18, 2026
e9a4b29
Bring back CSS attributes for code-block-caption
sepehr-rs Aug 18, 2026
a4d0f82
Address review comments
sepehr-rs Aug 19, 2026
4a8dd39
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Aug 19, 2026
64a25de
Remove add_html_dir_to_context from __init__ and move RTL detection t…
sepehr-rs Aug 20, 2026
9a9dcab
Update pydoctheme.css
sepehr-rs Aug 20, 2026
7fc51b8
Address review comments
sepehr-rs Aug 20, 2026
893d844
Fix whitespace changes
sepehr-rs Aug 20, 2026
074cb15
Build Farsi in RTD
StanFromIreland Aug 20, 2026
06cf519
Revert "Build Farsi in RTD"
StanFromIreland Aug 24, 2026
2c55d7d
Apply suggestion from @StanFromIreland
sepehr-rs Aug 25, 2026
9c41b1f
Address review comments
sepehr-rs Aug 25, 2026
e23b0a8
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Aug 25, 2026
1923a64
Update README.md
sepehr-rs Aug 25, 2026
6d36814
Address reviews
sepehr-rs Sep 18, 2026
2263680
Apply suggestion from @StanFromIreland
sepehr-rs Sep 18, 2026
55e8f5a
Address review comments
sepehr-rs Sep 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions python_docs_theme/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down
156 changes: 121 additions & 35 deletions python_docs_theme/static/pydoctheme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ div.related a:hover {
}

.switchers > div {
margin-right: 5px;
margin-inline-end: 5px;
}

div.related ul::after {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -179,6 +199,11 @@ div.sphinxsidebarwrapper > ul > li > ul > li {
margin-bottom: 0.4em;
}

div.sphinxsidebar ul ul {
Comment thread
sepehr-rs marked this conversation as resolved.
margin-left: 0;
margin-inline-start: 20px;
}

div.sphinxsidebar a:hover {
color: #0095c4;
}
Expand Down Expand Up @@ -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;
Comment thread
sepehr-rs marked this conversation as resolved.
}

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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -402,7 +454,7 @@ table.docutils th {

table p,
table li {
text-align: left !important;
text-align: start !important;
}

table.docutils th {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Comment thread
sepehr-rs marked this conversation as resolved.
}

.toctree-wrapper ul {
padding-left: 20px;
padding-inline-start: 20px;
}

.theme-selector {
margin-left: .5em;
margin-inline-start: .5em;
}

div.genindex-jumpbox,
Expand All @@ -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;
}

Expand Down Expand Up @@ -583,7 +660,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;
}
Expand All @@ -605,7 +682,7 @@ div.genindex-jumpbox a {
align-items: stretch;
}
.nav-logo {
margin-right: 1rem;
margin-inline-end: 1rem;
flex-shrink: 0;
align-self: center;
}
Expand All @@ -614,7 +691,7 @@ div.genindex-jumpbox a {
width: 20px;
}
.version_switcher_placeholder {
margin-right: 1rem;
margin-inline-end: 1rem;
}
.version_switcher_placeholder > select {
height: 100%;
Expand All @@ -624,25 +701,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 {
Comment thread
sepehr-rs marked this conversation as resolved.
position: absolute;
align-self: center;
padding-left: 4px;
top: 50%;
transform: translateY(-50%);
inset-inline-start: 4px;
}
.toggler__input {
display: none;
Expand Down Expand Up @@ -674,7 +753,7 @@ div.genindex-jumpbox a {
width: 100%;
background: inherit;
position: absolute;
left: 0;
inset-inline-start: 0;
top: -8px;
}
.toggler__label > span::after {
Expand All @@ -695,29 +774,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;
Comment thread
sepehr-rs marked this conversation as resolved.
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 {
Expand All @@ -742,10 +828,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 {
Expand Down Expand Up @@ -801,26 +887,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 {
Expand Down
Loading
Loading