Skip to content

Add RTL support to python-docs-theme #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

Open
sepehr-rs wants to merge 16 commits into
base: main
Choose a base branch
from
+92 −39
Open

Add RTL support to python-docs-theme #324

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 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
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
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
129 changes: 89 additions & 40 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;
}

html[dir='rtl'] div.related ul li.right {
Comment thread
sepehr-rs marked this conversation as resolved.
Outdated
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 {
margin-left: 0;
margin-inline-start: 20px;
}

div.sphinxsidebar a:hover {
color: #0095c4;
}
Expand Down Expand Up @@ -211,11 +236,16 @@ div.sphinxsidebar input[type='text'] {
}

div.body {
padding: 0 0 0 1.2em;
padding: 0;
padding-inline-start: 1.2em;
Comment thread
sepehr-rs marked this conversation as resolved.
}

html[dir='rtl'] div.body {
direction: rtl;
}

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 +255,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 +267,21 @@ div.body hr {
height: 1px;
}

dl > dt span ~ em,
.sig {
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}

pre,
code,
div.highlight,
dl > dt span ~ em,
.sig,
.sig-param {
direction: ltr;
unicode-bidi: isolate;
}

div.body pre {
border-radius: 3px;
border: 1px solid #ac9;
Expand All @@ -258,12 +307,10 @@ div.code-block-caption {
padding: 0.3em 0.6em;
font-size: 90%;
color: #333;

@StanFromIreland StanFromIreland Aug 19, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are unrelated changes.

@StanFromIreland StanFromIreland Aug 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still see these as removed.

@sepehr-rs sepehr-rs Aug 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I tried fixing these by adding spaces in place of the removed whitespace, but I don't know if this has fixed the problem or not. Could this be a quirk on GitHub's side?

& + div pre {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}

& + div .copybutton {
border-top-right-radius: 0 !important;
}
Expand Down Expand Up @@ -402,7 +449,7 @@ table.docutils th {

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

table.docutils th {
Expand All @@ -416,9 +463,9 @@ table.footnote td {

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 @@ -477,17 +524,12 @@ div.footer a:hover {
}


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 +548,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 +625,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 +647,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 +656,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 @@ -627,22 +669,22 @@ div.genindex-jumpbox a {
}
.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;
inset-inline-start: 4px;
}
.toggler__input {
display: none;
Expand Down Expand Up @@ -674,7 +716,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 +737,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(-100%);
width: 300px;
height: 100%;
background-color: #eee;
color: #444444;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow-y: auto;
}
html[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 +791,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 +850,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
1 change: 1 addition & 0 deletions python_docs_theme/theme.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ headbgcolor = "white"
headlinkcolor = "#aaaaaa"
codebgcolor = "#eeffcc"
codetextcolor = "#333333"
is_rtl = "false"

hosted_on = ""
issues_url = ""
Expand Down
Loading