From 413921e00e63159f7de618222999b8a4e9303805 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 11 Aug 2025 05:48:04 +0000 Subject: [PATCH 01/13] Initial plan From db6594be0bc1c78a12787f73b1163aac680e879d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 11 Aug 2025 05:52:59 +0000 Subject: [PATCH 02/13] Initial setup: Plan RTL script support implementation Co-authored-by: mmcky <8263752+mmcky@users.noreply.github.com> --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 715549ba..279e6c84 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -20,7 +20,7 @@ description = "A clean book theme for scientific explanations and documentation dynamic = ["version"] readme = "README.md" -requires-python = ">=3.13" +requires-python = ">=3.8" dependencies = [ "pyyaml", "sphinx>=7,<9", From 842075000d50086e195a2bf8a0edc99b814ba292 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 11 Aug 2025 05:57:17 +0000 Subject: [PATCH 03/13] Add RTL script support implementation Co-authored-by: mmcky <8263752+mmcky@users.noreply.github.com> --- pyproject.toml | 2 +- src/quantecon_book_theme/__init__.py | 1 + .../assets/styles/_rtl.scss | 244 ++++++++++++++++++ .../assets/styles/index.scss | 1 + .../theme/quantecon_book_theme/layout.html | 2 +- .../theme/quantecon_book_theme/theme.conf | 1 + tests/sites/rtl_test/conf.py | 37 +++ tests/sites/rtl_test/index.md | 9 + tests/sites/rtl_test/rtl_test.md | 43 +++ 9 files changed, 338 insertions(+), 2 deletions(-) create mode 100644 src/quantecon_book_theme/assets/styles/_rtl.scss create mode 100644 tests/sites/rtl_test/conf.py create mode 100644 tests/sites/rtl_test/index.md create mode 100644 tests/sites/rtl_test/rtl_test.md diff --git a/pyproject.toml b/pyproject.toml index 279e6c84..715549ba 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -20,7 +20,7 @@ description = "A clean book theme for scientific explanations and documentation dynamic = ["version"] readme = "README.md" -requires-python = ">=3.8" +requires-python = ">=3.13" dependencies = [ "pyyaml", "sphinx>=7,<9", diff --git a/src/quantecon_book_theme/__init__.py b/src/quantecon_book_theme/__init__.py index 47e62a49..fb66a29c 100644 --- a/src/quantecon_book_theme/__init__.py +++ b/src/quantecon_book_theme/__init__.py @@ -264,6 +264,7 @@ def get_github_src_folder(app): "theme_use_edit_page_button", "theme_use_repository_button", "theme_use_issues_button", + "theme_script_right_to_left", ] for key in btns: if key in context: diff --git a/src/quantecon_book_theme/assets/styles/_rtl.scss b/src/quantecon_book_theme/assets/styles/_rtl.scss new file mode 100644 index 00000000..a7c07704 --- /dev/null +++ b/src/quantecon_book_theme/assets/styles/_rtl.scss @@ -0,0 +1,244 @@ +/* +----------------------------------- +RTL (Right-to-Left) Script Support +----------------------------------- +*/ + +@use "breakpoints"; + +// RTL-specific styles for Arabic, Hebrew, Persian, and other RTL languages +[dir="rtl"] { + // Basic text direction + text-align: right; + + // Main layout adjustments + .qe-main { + flex-direction: row; // Reverse the row-reverse for RTL + padding-left: 2rem; + padding-right: 2rem; + } + + // Page layout + .qe-page { + &__toc { + // Move TOC to the left side for RTL + right: auto; + left: calc(-200px - 3rem); + } + + &__header { + &-copy { + flex-direction: row; // Adjust header layout + + @media (max-width: breakpoints.$md) { + flex-direction: column; + } + } + + &-heading { + margin: 0 0 0 1rem; // Flip margin for RTL + + @media (max-width: breakpoints.$md) { + margin: 0; + } + } + } + + &__content { + // Adjust text alignment for content + text-align: right; + + // Tables should align properly + table { + td, th { + text-align: right; + } + + thead { + tr th { + text-align: right !important; + } + } + } + + // Code blocks and pre elements maintain LTR for readability + pre, code, .highlight { + direction: ltr; + text-align: left; + } + + // Math equations should remain LTR + .math, .MathJax, span.eqno { + direction: ltr; + text-align: left; + } + + // Figures and images + .figure { + &.align-left { + text-align: right; // Flip alignment + } + &.align-right { + text-align: left; // Flip alignment + } + } + } + } + + // Sidebar adjustments + .qe-sidebar { + // Move sidebar to the right side for RTL + left: auto; + right: 0px; + border-right: none; + border-left: 1px solid #ccc; + + &.inactive { + transform: translate3d(100%, 0px, 0px); // Slide to the right when inactive + } + + @media (max-width: 1340px) { + box-shadow: -10px 10px 5px 9999px rgba(255, 255, 255, 0.8); // Flip shadow direction + } + + &__nav { + ul { + ul { + padding-left: 0; + padding-right: 1rem; // Flip indentation + } + } + } + } + + // Toolbar adjustments + .qe-toolbar { + &__inner { + // Reverse toolbar layout + flex-direction: row-reverse; + + > ul { + &:first-child { + order: 2; // Move first ul to the right + } + + &:last-child { + order: 1; // Move last ul to the left + } + } + } + } + + // TOC navigation + .qe-page__toc-nav { + ul { + ul { + padding-left: 0; + padding-right: 1rem; // Flip nested list indentation + } + } + } + + // Blockquotes + blockquote { + border-left: none; + border-right: 5px solid #1665ad; // Move border to the right + padding: 0.5rem 2rem 0.5rem 0.5rem; // Adjust padding + } + + // Navigation links (prev/next) + .qe-page__toc-footer { + .left-prev { + float: right; // Move to right for RTL + } + + .right-next { + float: left; // Move to left for RTL + } + } + + // Admonitions + div.admonition, + .admonition { + text-align: right; + } + + // Lists + ul, ol { + margin-right: 0; + padding-right: 1.5em; + padding-left: 0; + } + + // Definition lists + dl.simple, + dl.field-list { + dd { + margin-left: 0; + margin-right: 1.5em; + } + } + + dl.glossary { + dd { + margin-left: 0; + margin-right: 1.5em; + } + } + + dl.footnote { + dd { + margin-left: 0; + margin-right: 3em; + } + + dd p { + padding-left: 0; + padding-right: 1.5em; + } + } + + dl.citation { + margin-left: 0; + margin-right: 3em; + } + + // Search functionality + .bd-search { + svg { + right: auto; + left: 2.75rem; // Move search icon to left + } + + .search-button__kbd-shortcut { + right: auto; + left: 3em; + } + } + + // Cell outputs and inputs + .cell { + .output .prompt, + .input .prompt { + left: auto; + right: -55px; // Move prompts to the right + } + } + + // Settings modal adjustments + #settingsModal { + .modal-servers { + li { + i { + margin: 0 1rem 0 0; // Flip margin for icons + } + } + } + } + + // Anchor links + .anchor-link, .headerlink { + margin-left: 0; + margin-right: 6px; // Move anchor links to the right + } +} \ No newline at end of file diff --git a/src/quantecon_book_theme/assets/styles/index.scss b/src/quantecon_book_theme/assets/styles/index.scss index b546e3ea..a0cae6ee 100644 --- a/src/quantecon_book_theme/assets/styles/index.scss +++ b/src/quantecon_book_theme/assets/styles/index.scss @@ -13,6 +13,7 @@ IMPORTS @forward "syntax"; @forward "tippy-themes"; @forward "margin"; +@forward "rtl"; @import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,700;1,400&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"); diff --git a/src/quantecon_book_theme/theme/quantecon_book_theme/layout.html b/src/quantecon_book_theme/theme/quantecon_book_theme/layout.html index e112425b..2f6c652d 100644 --- a/src/quantecon_book_theme/theme/quantecon_book_theme/layout.html +++ b/src/quantecon_book_theme/theme/quantecon_book_theme/layout.html @@ -75,7 +75,7 @@ {% block sidebarsourcelink %}{% endblock %} {% block body_tag %} -
+ {%- endblock %} {%- block content %} diff --git a/src/quantecon_book_theme/theme/quantecon_book_theme/theme.conf b/src/quantecon_book_theme/theme/quantecon_book_theme/theme.conf index 482abc76..1e77476f 100644 --- a/src/quantecon_book_theme/theme/quantecon_book_theme/theme.conf +++ b/src/quantecon_book_theme/theme/quantecon_book_theme/theme.conf @@ -33,3 +33,4 @@ persistent_sidebar = False dark_logo = authors = mainpage_author_fontsize = 18 +script_right_to_left = False diff --git a/tests/sites/rtl_test/conf.py b/tests/sites/rtl_test/conf.py new file mode 100644 index 00000000..34a30324 --- /dev/null +++ b/tests/sites/rtl_test/conf.py @@ -0,0 +1,37 @@ +# -- Project information ----------------------------------------------------- + +project = "RTL Test - Sphinx Book Theme" +copyright = "2020, Executable Book Project" +author = "Executable Book Project" + +master_doc = "index" + +# -- General configuration --------------------------------------------------- + +# Add any Sphinx extension module names here, as strings. They can be +# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom +# ones. +extensions = ["myst_nb", "sphinx_togglebutton", "sphinx_thebe"] +html_theme = "quantecon_book_theme" +html_baseurl = "https://sphinx-book-theme.readthedocs.org" +html_copy_source = True +html_sourcelink_suffix = "" +nb_execution_mode = "auto" + +# Base options, we can add other key/vals later +html_theme_options = { + "path_to_docs": "TESTPATH", + "repository_url": "https://github.com/executablebooks/sphinx-book-theme", + "nb_repository_url": "https://github.com/executablebooks/sphinx-book-theme", + "navigation_with_keys": True, + # Test RTL support + "script_right_to_left": True, + # "repository_branch": "main", # Not using this, should default to main + "launch_buttons": { + "binderhub_url": "https://mybinder.org", + "jupyterhub_url": "https://datahub.berkeley.edu", + "colab_url": "https://colab.research.google.com", + "notebook_interface": "jupyterlab", + "thebe": True, + }, +} \ No newline at end of file diff --git a/tests/sites/rtl_test/index.md b/tests/sites/rtl_test/index.md new file mode 100644 index 00000000..a08082ec --- /dev/null +++ b/tests/sites/rtl_test/index.md @@ -0,0 +1,9 @@ +# RTL Theme Test - Index `with code` in title + +This site tests the RTL (Right-to-Left) support in the QuantEcon Book Theme. + +```{toctree} +:caption: RTL Test Pages +:numbered: +rtl_test +``` diff --git a/tests/sites/rtl_test/rtl_test.md b/tests/sites/rtl_test/rtl_test.md new file mode 100644 index 00000000..30e87322 --- /dev/null +++ b/tests/sites/rtl_test/rtl_test.md @@ -0,0 +1,43 @@ +# RTL Test Page + +This is a test page to demonstrate Right-to-Left (RTL) script support in the QuantEcon Book Theme. + +## Arabic Text Example + +هذا نص تجريبي باللغة العربية لاختبار دعم الكتابة من اليمين إلى اليسار في هذا الموضوع. يجب أن يظهر النص بشكل صحيح مع التوجيه المناسب. + +## Hebrew Text Example + +זהו טקסט לדוגמה בעברית לבדיקת תמיכה בכתיבה מימין לשמאל בנושא זה. הטקסט אמור להיות מוצג כראוי עם הכיוון המתאים. + +## Mixed Content + +When RTL is enabled, the layout should adjust properly while maintaining readability for: + +- Code blocks (should remain LTR) +- Mathematical equations +- Navigation elements +- Lists and content structure + +```python +# This code should remain left-to-right for readability +def example_function(): + return "Hello World" +``` + +## Mathematical Content + +Mathematical equations should also remain in LTR direction: + +$$E = mc^2$$ + +The equation above should display properly even in RTL mode. + +## Tables + +| Column 1 | Column 2 | Column 3 | +|----------|----------|----------| +| Data 1 | Data 2 | Data 3 | +| Value A | Value B | Value C | + +Tables should align to the right in RTL mode. \ No newline at end of file From 6dc493c2ad86e34c32635a36614af7cf2c99b1ac Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 11 Aug 2025 06:01:43 +0000 Subject: [PATCH 04/13] Complete RTL script support implementation with tests and documentation Co-authored-by: mmcky <8263752+mmcky@users.noreply.github.com> --- docs/RTL_SUPPORT.md | 82 +++++++++++++++++ tests/ltr_vs_rtl_comparison.html | 151 +++++++++++++++++++++++++++++++ tests/rtl_test.html | 91 +++++++++++++++++++ tests/test_rtl_functionality.py | 114 +++++++++++++++++++++++ 4 files changed, 438 insertions(+) create mode 100644 docs/RTL_SUPPORT.md create mode 100644 tests/ltr_vs_rtl_comparison.html create mode 100644 tests/rtl_test.html create mode 100644 tests/test_rtl_functionality.py diff --git a/docs/RTL_SUPPORT.md b/docs/RTL_SUPPORT.md new file mode 100644 index 00000000..356f7042 --- /dev/null +++ b/docs/RTL_SUPPORT.md @@ -0,0 +1,82 @@ +# RTL (Right-to-Left) Script Support + +The QuantEcon Book Theme now supports RTL (Right-to-Left) scripts including Arabic, Hebrew, Persian, and other RTL languages. + +## Usage + +To enable RTL support in your Sphinx configuration, add the following to your `conf.py`: + +```python +html_theme = "quantecon_book_theme" + +html_theme_options = { + "script_right_to_left": True, # Enable RTL support + # ... other theme options +} +``` + +## Configuration + +- **Option**: `script_right_to_left` +- **Type**: Boolean +- **Default**: `False` +- **Description**: When set to `True`, enables right-to-left text direction and adjusts the entire layout for RTL languages. + +## Features + +When RTL mode is enabled, the theme automatically adjusts: + +### Layout Changes +- **Text Direction**: All text flows from right to left +- **Sidebar Position**: Moves from left to right side +- **Navigation**: Toolbar elements are reversed for RTL flow +- **Margins and Padding**: Adjusted for RTL reading patterns +- **Blockquotes**: Border appears on the right side instead of left + +### Preserved Elements +For optimal readability, these elements remain in LTR (Left-to-Right) direction: +- **Code blocks** and syntax highlighting +- **Mathematical equations** and formulas +- **URLs** and technical content + +## Example + +```python +# conf.py for an Arabic documentation site +project = "دليل البرمجة" +language = "ar" # Arabic language code + +html_theme = "quantecon_book_theme" +html_theme_options = { + "script_right_to_left": True, + "repository_url": "https://github.com/your-repo/arabic-docs", + # ... other options +} +``` + +## Supported Languages + +This RTL implementation supports all RTL scripts including: +- **Arabic** (العربية) +- **Hebrew** (עברית) +- **Persian/Farsi** (فارسی) +- **Urdu** (اردو) +- **Pashto** (پښتو) +- And other RTL writing systems + +## Testing + +You can test the RTL functionality by: + +1. Setting `script_right_to_left = True` in your theme options +2. Building your Sphinx documentation +3. Viewing the generated HTML to see the RTL layout adjustments + +The theme includes comprehensive test files demonstrating both LTR and RTL modes side by side. + +## Implementation Details + +- RTL styles are implemented using CSS `[dir="rtl"]` selectors +- The `dir="rtl"` attribute is conditionally added to the `` element +- Layout adjustments use CSS flexbox and positioning for proper RTL flow +- All changes are backward compatible with existing LTR documents \ No newline at end of file diff --git a/tests/ltr_vs_rtl_comparison.html b/tests/ltr_vs_rtl_comparison.html new file mode 100644 index 00000000..b81543c2 --- /dev/null +++ b/tests/ltr_vs_rtl_comparison.html @@ -0,0 +1,151 @@ + + + + + +English Book
+Testing Left-to-Right Layout
+This is a test of normal left-to-right text flow. The sidebar should be on the left, and text should align to the left.
+ +++ +This is a blockquote in English. The border should be on the left side.
+
def example():
+ return "Hello World"
+ كتاب عربي
+اختبار تخطيط من اليمين إلى اليسار
+هذا اختبار لتدفق النص الطبيعي من اليمين إلى اليسار. يجب أن يكون الشريط الجانبي على اليمين، ويجب أن يكون النص محاذاة إلى اليمين.
+ +++ +هذا اقتباس باللغة العربية. يجب أن تكون الحدود على الجانب الأيمن.
+
def example():
+ return "مرحبا بالعالم"
+ كتاب اختبار RTL
+اختبار دعم الكتابة من اليمين إلى اليسار
+هذا نص تجريبي باللغة العربية لاختبار دعم الكتابة من اليمين إلى اليسار في هذا الموضوع. يجب أن يظهر النص بشكل صحيح مع التوجيه المناسب.
+ +זהו טקסט לדוגמה בעברית לבדיקת תמיכה בכתיבה מימין לשמאל בנושא זה. הטקסט אמור להיות מוצג כראוי עם הכיוון המתאים.
+ +Code blocks should remain left-to-right:
+def hello_world():
+ return "Hello, World!"
+
+ Mathematical expressions should also remain LTR:
+| العمود الأول | +العمود الثاني | +العمود الثالث | +
|---|---|---|
| البيانات 1 | +البيانات 2 | +البيانات 3 | +
| القيمة أ | +القيمة ب | +القيمة ج | +
++هذا اقتباس باللغة العربية يجب أن يظهر مع الحدود المناسبة في الجانب الصحيح.
+
Testing Left-to-Right Layout
This is a test of normal left-to-right text flow. The sidebar should be on the left, and text should align to the left.
- +- +This is a blockquote in English. The border should be on the left side.
def example():
return "Hello World"
اختبار تخطيط من اليمين إلى اليسار
هذا اختبار لتدفق النص الطبيعي من اليمين إلى اليسار. يجب أن يكون الشريط الجانبي على اليمين، ويجب أن يكون النص محاذاة إلى اليمين.
- +- +هذا اقتباس باللغة العربية. يجب أن تكون الحدود على الجانب الأيمن.
def example():
return "مرحبا بالعالم"
اختبار دعم الكتابة من اليمين إلى اليسار
- +هذا نص تجريبي باللغة العربية لاختبار دعم الكتابة من اليمين إلى اليسار في هذا الموضوع. يجب أن يظهر النص بشكل صحيح مع التوجيه المناسب.
- +זהו טקסט לדוגמה בעברית לבדיקת תמיכה בכתיבה מימין לשמאל בנושא זה. הטקסט אמור להיות מוצג כראוי עם הכיוון המתאים.
- +Code blocks should remain left-to-right:
def hello_world():
return "Hello, World!"
-
+
Mathematical expressions should also remain LTR:
هذا اقتباس باللغة العربية يجب أن يظهر مع الحدود المناسبة في الجانب الصحيح.