From 8d727af5a32b4ae1c0b8615d71153ba99448300b Mon Sep 17 00:00:00 2001 From: Arash Golmohammadi Date: Sat, 15 Oct 2022 08:16:06 +0200 Subject: [PATCH 1/7] added right-to-left capability --- _config.yml | 6 ++++++ _layouts/default.html | 3 ++- _sass/_layout.scss | 4 +++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 71597db4f91e..2c3d1469a80f 100644 --- a/_config.yml +++ b/_config.yml @@ -96,6 +96,12 @@ discord_id: # your discord id (18-digit unique numerical identifier) contact_note: > You can even add a little note about which of these is the best way to reach you. + +# ----------------------------------------------------------------------------- +# Right-to-left scripts +# ----------------------------------------------------------------------------- +rtl_langs: ["ar","arc","az","dv","he","ku","fa","ur"] + # ----------------------------------------------------------------------------- # Analytics and search engine verification # ----------------------------------------------------------------------------- diff --git a/_layouts/default.html b/_layouts/default.html index 1d291e406fca..749629151f06 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,7 +16,8 @@ {%- include header.html %} -
+
{{ content }}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 9c10cac70df1..1d9deb525881 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -6,7 +6,9 @@ body { padding-bottom: 70px; color: var(--global-text-color); background-color: var(--global-bg-color); - + unicode-bidi: bidi-override !important; + direction: unset !important; + h1, h2, h3, h4, h5, h6 { scroll-margin-top: 66px; } From 068dd0d65cf7d2b416306a7ea9553a042a640e68 Mon Sep 17 00:00:00 2001 From: Arash Golmohammadi Date: Sat, 15 Oct 2022 11:09:13 +0200 Subject: [PATCH 2/7] fixed code blocks + added sample post --- _config.yml | 2 +- _posts/2022-10-15-rtl.md | 74 ++++++++++++++++++++++++++++++++++++++++ _sass/_base.scss | 2 ++ 3 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 _posts/2022-10-15-rtl.md diff --git a/_config.yml b/_config.yml index 2c3d1469a80f..a698a1957654 100644 --- a/_config.yml +++ b/_config.yml @@ -228,7 +228,7 @@ jekyll-archives: tag: '/blog/tag/:name/' category: '/blog/category/:name/' -display_tags: ['formatting', 'images', 'links', 'math', 'code'] # this tags will be dispalyed on the front page of your blog +display_tags: ['formatting', 'images', 'links', 'math', 'code', 'internationalization'] # this tags will be dispalyed on the front page of your blog # ----------------------------------------------------------------------------- # Jekyll Scholar diff --git a/_posts/2022-10-15-rtl.md b/_posts/2022-10-15-rtl.md new file mode 100644 index 000000000000..727055e7f873 --- /dev/null +++ b/_posts/2022-10-15-rtl.md @@ -0,0 +1,74 @@ +--- +layout: post +title: Right to left scripting +date: 2022-10-15 +description: you can also write from right to left +lang: fa +tags: internationalization formatting math code +category: internationalization +--- + +# عنوان +این یک پست نمونه برای سنجش نوشتارهای راست‌به‌چپ است. + + +## فرمول‌نویسی +فرمول‌ها هم مانند کد به درستی به نمایش در‌خواهند آمد: + + +$$ +\sum_{k=1}^\infty |\langle x, e_k \rangle|^2 \leq \|x\|^2 +$$ + +## کد +کدها هم‌چنان مانند قبل از چپ‌به‌راست خواهند بود. + +```python +if lang=="rtl" + print("I am a right-to-left script!") +``` + +## بلاک +بلاک‌ها همواره چپ‌چین خواهند ماند: + + --- + layout: page + title: project + description: a project with a background image + img: /assets/img/12.jpg + --- + +حتی اگر به زبان‌های راست‌به‌چپ نوشته شوند: + + --- + صفحه‌بندی: صفحه + عنوان: پروژه + توضیحات: یک پروژه با تصویر زمینه + --- + +## نقل‌قول +> نقل‌قول‌ها به این شکل به نمایش درخواهند آمد. + +زیباتر خواهد بود اگر خط عمودی به راست انتقال داده شود. این کار با ویرایش _base.scss امکان‌پذیر است: + +```scss +blockquote { + background: var(--global-bg-color); + border-left: 2px solid var(--global-theme-color); // change to border-right: + margin: 1.5em 10px; + padding: 0.5em 10px; + font-size: 1.2rem; +} + +... + + +.post-content{ + blockquote { + border-left: 5px solid var(--global-theme-color); // change to border-right: ... + padding: 8px; + } +} +``` + +منطقا باید بتوان با توجه به جهت‌گیری متن (rtl یا ltr) صفت مناسب را تعریف کرد. اما من چندان به sass مسلط نیستم. امیدوارم فرد مسلط‌تری این مشکل کوچک را رفع کند. diff --git a/_sass/_base.scss b/_sass/_base.scss index 0efbcb98535b..92f5c9a19fa3 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -605,6 +605,8 @@ pre { background-color: var(--global-code-bg-color); border-radius: 6px; padding: 6px 12px; + text-align: left; + direction: ltr; pre, code { background-color: transparent; border-radius: 0; From ff6f4e5728dccb519be655be865c496757865c8f Mon Sep 17 00:00:00 2001 From: arashgmn <1593842-arashgmn@users.noreply.gitlab.com> Date: Wed, 26 Oct 2022 23:04:10 +0200 Subject: [PATCH 3/7] fixed blockquote lateral line placement --- _sass/_base.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/_sass/_base.scss b/_sass/_base.scss index 92f5c9a19fa3..d90c68dbe50f 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -42,6 +42,11 @@ blockquote { margin: 1.5em 10px; padding: 0.5em 10px; font-size: 1.2rem; + + [dir=rtl] & { + border-left: none; + border-right: 2px solid var(--global-theme-color); + } } // Math @@ -655,6 +660,10 @@ html.transition *:after { blockquote { border-left: 5px solid var(--global-theme-color); padding: 8px; + [dir=rtl] & { + border-right: 5px solid var(--global-theme-color); + border-left: none; + } } } } From 64d76b9bd3461ee2934faa5a8a5dcae0b2f8f0cf Mon Sep 17 00:00:00 2001 From: arashgmn <1593842-arashgmn@users.noreply.gitlab.com> Date: Wed, 2 Nov 2022 22:35:01 +0100 Subject: [PATCH 4/7] distill rtl (should be tested) --- _layouts/distill.html | 2 +- _posts/2022-11-02-distill-rtl.md | 277 +++++++++++++++++++++++++++++++ 2 files changed, 278 insertions(+), 1 deletion(-) create mode 100644 _posts/2022-11-02-distill-rtl.md diff --git a/_layouts/distill.html b/_layouts/distill.html index 018b2897dd44..8a09884d7cab 100644 --- a/_layouts/distill.html +++ b/_layouts/distill.html @@ -60,7 +60,7 @@ {%- include header.html %} -
+

{{ page.title }}

diff --git a/_posts/2022-11-02-distill-rtl.md b/_posts/2022-11-02-distill-rtl.md new file mode 100644 index 000000000000..3fa04f156ba0 --- /dev/null +++ b/_posts/2022-11-02-distill-rtl.md @@ -0,0 +1,277 @@ +--- +layout: distill +title: دیستیل راست به چپ +description: تست صفحه‌آرایی راست به چپ +date: 2022-11-02 +lang: fa +authors: + - name: Albert Einstein + url: "https://en.wikipedia.org/wiki/Albert_Einstein" + affiliations: + name: IAS, Princeton + - name: Boris Podolsky + url: "https://en.wikipedia.org/wiki/Boris_Podolsky" + affiliations: + name: IAS, Princeton + - name: Nathan Rosen + url: "https://en.wikipedia.org/wiki/Nathan_Rosen" + affiliations: + name: IAS, Princeton + +bibliography: 2018-12-22-distill.bib + +# Optionally, you can add a table of contents to your post. +# NOTES: +# - make sure that TOC names match the actual section names +# for hyperlinks within the post to work correctly. +# - we may want to automate TOC generation in the future using +# jekyll-toc plugin (https://github.com/toshimaru/jekyll-toc). +toc: + - name: Equations + # if a section has subsections, you can add them as follows: + # subsections: + # - name: Example Child Subsection 1 + # - name: Example Child Subsection 2 + - name: Citations + - name: Footnotes + - name: Code Blocks + - name: Layouts + - name: Other Typography? + +# Below is an example of injecting additional post-specific styles. +# If you use this post as a template, delete this _styles block. +_styles: > + .fake-img { + background: #bbb; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 12px; + } + .fake-img p { + font-family: monospace; + color: white; + text-align: left; + margin: 12px 0; + text-align: center; + font-size: 16px; + } + +--- + +## Equations + +This theme supports rendering beautiful math in inline and display modes using [MathJax 3](https://www.mathjax.org/) engine. +You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`. +If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$. + +To use display mode, again surround your expression with `$$` and place it as a separate paragraph. +Here is an example: + +$$ +\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) +$$ + +Note that MathJax 3 is [a major re-write of MathJax](https://docs.mathjax.org/en/latest/upgrading/whats-new-3.0.html) that brought a significant improvement to the loading and rendering speed, which is now [on par with KaTeX](http://www.intmath.com/cg5/katex-mathjax-comparison.php). + + +*** + +## Citations + +Citations are then used in the article body with the `` tag. +The key attribute is a reference to the id provided in the bibliography. +The key attribute can take multiple ids, separated by commas. + +The citation is presented inline like this: (a number that displays more information on hover). +If you have an appendix, a bibliography is automatically created and populated in it. + +Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by displaying more information on hover. +However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well — the authors are human and it’s nice for them to have the community associate them with their work. + +*** + +## Footnotes + +Just wrap the text you would like to show up in a footnote in a `` tag. +The number of the footnote will be automatically generated.This will become a hoverable footnote. + +*** + +## Code Blocks + +Syntax highlighting is provided within `` tags. +An example of inline code snippets: `let x = 10;`. +For larger blocks of code, add a `block` attribute: + + + var x = 25; + function(x) { + return x * x; + } + + +**Note:** `` blocks do not look good in the dark mode. +You can always use the default code-highlight using the `highlight` liquid tag: + +{% highlight javascript %} +var x = 25; +function(x) { + return x * x; +} +{% endhighlight %} + +*** + +## Layouts + +The main text column is referred to as the body. +It is the assumed layout of any direct descendants of the `d-article` element. + +
+

.l-body

+
+ +For images you want to display a little larger, try `.l-page`: + +
+

.l-page

+
+ +All of these have an outset variant if you want to poke out from the body text a little bit. +For instance: + +
+

.l-body-outset

+
+ +
+

.l-page-outset

+
+ +Occasionally you’ll want to use the full browser width. +For this, use `.l-screen`. +You can also inset the element a little from the edge of the browser by using the inset variant. + +
+

.l-screen

+
+
+

.l-screen-inset

+
+ +The final layout is for marginalia, asides, and footnotes. +It does not interrupt the normal flow of `.l-body` sized text except on mobile screen sizes. + +
+

.l-gutter

+
+ +*** + +## Other Typography? + +Emphasis, aka italics, with *asterisks* (`*asterisks*`) or _underscores_ (`_underscores_`). + +Strong emphasis, aka bold, with **asterisks** or __underscores__. + +Combined emphasis with **asterisks and _underscores_**. + +Strikethrough uses two tildes. ~~Scratch this.~~ + +1. First ordered list item +2. Another item +⋅⋅* Unordered sub-list. +1. Actual numbers don't matter, just that it's a number +⋅⋅1. Ordered sub-list +4. And another item. + +⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). + +⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ +⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ +⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) + +* Unordered list can use asterisks +- Or minuses ++ Or pluses + +[I'm an inline-style link](https://www.google.com) + +[I'm an inline-style link with title](https://www.google.com "Google's Homepage") + +[I'm a reference-style link][Arbitrary case-insensitive reference text] + +[I'm a relative reference to a repository file](../blob/master/LICENSE) + +[You can use numbers for reference-style link definitions][1] + +Or leave it empty and use the [link text itself]. + +URLs and URLs in angle brackets will automatically get turned into links. +http://www.example.com or and sometimes +example.com (but not on Github, for example). + +Some text to show that the reference links can follow later. + +[arbitrary case-insensitive reference text]: https://www.mozilla.org +[1]: http://slashdot.org +[link text itself]: http://www.reddit.com + +Here's our logo (hover to see the title text): + +Inline-style: +![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1") + +Reference-style: +![alt text][logo] + +[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2" + +Inline `code` has `back-ticks around` it. + +```javascript +var s = "JavaScript syntax highlighting"; +alert(s); +``` + +```python +s = "Python syntax highlighting" +print s +``` + +``` +No language indicated, so no syntax highlighting. +But let's throw in a tag. +``` + +Colons can be used to align columns. + +| Tables | Are | Cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +There must be at least 3 dashes separating each header cell. +The outer pipes (|) are optional, and you don't need to make the +raw Markdown line up prettily. You can also use inline Markdown. + +Markdown | Less | Pretty +--- | --- | --- +*Still* | `renders` | **nicely** +1 | 2 | 3 + +> Blockquotes are very handy in email to emulate reply text. +> This line is part of the same quote. + +Quote break. + +> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. + + +Here's a line for us to start with. + +This line is separated from the one above by two newlines, so it will be a *separate paragraph*. + +This line is also a separate paragraph, but... +This line is only separated by a single newline, so it's a separate line in the *same paragraph*. From 68e9fd39f10d6db4935f19127eaa56f2489bac75 Mon Sep 17 00:00:00 2001 From: arashgmn Date: Sat, 6 May 2023 16:47:12 +0200 Subject: [PATCH 5/7] added vazirmatn --- _includes/head.html | 3 +- _posts/2023-05-05-rtl-with-sidebar.md | 82 +++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 _posts/2023-05-05-rtl-with-sidebar.md diff --git a/_includes/head.html b/_includes/head.html index b05a0d67ca0d..425d6095c72a 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,7 +12,8 @@ - + + diff --git a/_posts/2023-05-05-rtl-with-sidebar.md b/_posts/2023-05-05-rtl-with-sidebar.md new file mode 100644 index 000000000000..9abbfd417113 --- /dev/null +++ b/_posts/2023-05-05-rtl-with-sidebar.md @@ -0,0 +1,82 @@ +--- +layout: post +title: یک عنوان راست‌به‌چپ +date: 2023-05-05 +description: RTL even in sidebar +lang: fa +tags: internationalization formatting math code +category: internationalization +related_posts: false +toc: + sidebar: right +--- + +# عنوان +این یک پست نمونه برای سنجش نوشتارهای راست‌به‌چپ است. + + +## فرمول‌نویسی +فرمول‌ها هم مانند کد به درستی به نمایش در‌خواهند آمد: + + +$$ +\sum_{k=1}^\infty |\langle x, e_k \rangle|^2 \leq \|x\|^2 +$$ + +## کد +کدها هم‌چنان مانند قبل از چپ‌به‌راست خواهند بود. + +```python +if lang=="rtl" + print("I am a right-to-left script!") +``` + +## بلاک +بلاک‌ها همواره چپ‌چین خواهند ماند: + + --- + layout: page + title: project + description: a project with a background image + img: /assets/img/12.jpg + --- + +حتی اگر به زبان‌های راست‌به‌چپ نوشته شوند: + + --- + صفحه‌بندی: صفحه + عنوان: پروژه + توضیحات: یک پروژه با تصویر زمینه + --- + +## نقل‌قول +> نقل‌قول‌ها به این شکل به نمایش درخواهند آمد. + +زیباتر خواهد بود اگر خط عمودی به راست انتقال داده شود. این کار با ویرایش _base.scss امکان‌پذیر است: + +```c++ +int main(int argc, char const \*argv[]) +{ + string myString; + + cout << "input a string: "; + getline(cin, myString); + int length = myString.length(); + + char charArray = new char * [length]; + + charArray = myString; + for(int i = 0; i < length; ++i){ + cout << charArray[i] << " "; + } + + return 0; +} +``` + +و حتی می‌توان شماره‌ی خطوط را هم مانند قبل قعال کرد: +{% highlight python linenos %} +import numpy as np + +print('Hello world!') +{% endhighlight %} From fd02f316a585761b299ec95d5b68f680b1b5f48b Mon Sep 17 00:00:00 2001 From: arashgmn Date: Sat, 6 May 2023 17:02:23 +0200 Subject: [PATCH 6/7] tags always must be ltr --- _posts/2023-05-05-rtl-with-sidebar.md | 52 +++++++++++++-------------- _sass/_base.scss | 4 +-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/_posts/2023-05-05-rtl-with-sidebar.md b/_posts/2023-05-05-rtl-with-sidebar.md index 9abbfd417113..d544836024f0 100644 --- a/_posts/2023-05-05-rtl-with-sidebar.md +++ b/_posts/2023-05-05-rtl-with-sidebar.md @@ -1,11 +1,11 @@ --- layout: post -title: یک عنوان راست‌به‌چپ +title: راست‌به‌چپ با نوار کناری date: 2023-05-05 description: RTL even in sidebar lang: fa -tags: internationalization formatting math code -category: internationalization +tags: internationalization +categories: sidebar toc related_posts: false toc: sidebar: right @@ -31,29 +31,6 @@ if lang=="rtl" print("I am a right-to-left script!") ``` -## بلاک -بلاک‌ها همواره چپ‌چین خواهند ماند: - - --- - layout: page - title: project - description: a project with a background image - img: /assets/img/12.jpg - --- - -حتی اگر به زبان‌های راست‌به‌چپ نوشته شوند: - - --- - صفحه‌بندی: صفحه - عنوان: پروژه - توضیحات: یک پروژه با تصویر زمینه - --- - -## نقل‌قول -> نقل‌قول‌ها به این شکل به نمایش درخواهند آمد. - -زیباتر خواهد بود اگر خط عمودی به راست انتقال داده شود. این کار با ویرایش _base.scss امکان‌پذیر است: - ```c++ int main(int argc, char const \*argv[]) { @@ -80,3 +57,26 @@ import numpy as np print('Hello world!') {% endhighlight %} + + + +## بلاک +بلاک‌ها همواره چپ‌چین خواهند ماند: + + --- + layout: page + title: project + description: a project with a background image + img: /assets/img/12.jpg + --- + +حتی اگر به زبان‌های راست‌به‌چپ نوشته شوند: + + --- + صفحه‌بندی: صفحه + عنوان: پروژه + توضیحات: یک پروژه با تصویر زمینه + --- + +## نقل‌قول +> نقل‌قول‌ها به این شکل به نمایش درخواهند آمد. diff --git a/_sass/_base.scss b/_sass/_base.scss index 5c3e8e763fd3..9fb6ca60ab66 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -453,13 +453,12 @@ footer.sticky-bottom { font-size: 0.875rem; padding-top: 0.25rem; padding-bottom: 0; - direction: initial; // to supress rtl for a better view } a { color: var(--global-text-color); text-decoration: none; - + &:hover { color: var(--global-theme-color); } @@ -775,6 +774,7 @@ html.transition *:after { font-size: 0.875rem; padding-top: 0.25rem; padding-bottom: 1rem; + direction: ltr !important; // to supress rtl for a better view a { color: var(--global-text-color-light); From c9c61c8f37625d2f35b2fc5fa6f3ff9f674e9a0f Mon Sep 17 00:00:00 2001 From: arashgmn Date: Sat, 6 May 2023 19:07:16 +0200 Subject: [PATCH 7/7] fixing the sidebar for rtl --- _layouts/default.html | 49 ++++++++++++++++----------- _posts/2023-05-05-rtl-with-sidebar.md | 2 +- _sass/_base.scss | 26 +++++++++++++- 3 files changed, 56 insertions(+), 21 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 406ea430887b..efd23ce799aa 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -19,28 +19,39 @@
{% if page.toc and page.toc.sidebar %} - {% if page.toc.sidebar == "right" %} -
- -
- {{ content }} + + + {% assign placement = page.toc.sidebar %} + {% if site.rtl_langs contains page.lang %} + {% if page.toc.sidebar == "right" %} + {% assign placement = "left" %} + {% else %} + {% assign placement = "right" %} + {% endif %} + {% endif %} + + {% if placement == "right" %} +
+ +
+ {{ content }} +
+ +
+ +
- -
- -
-
{% else %} -
- -
- -
- -
- {{ content }} +
+ +
+ +
+ +
+ {{ content }} +
-
{% endif %} {% else %} {{ content }} diff --git a/_posts/2023-05-05-rtl-with-sidebar.md b/_posts/2023-05-05-rtl-with-sidebar.md index d544836024f0..9b33d0dfdd35 100644 --- a/_posts/2023-05-05-rtl-with-sidebar.md +++ b/_posts/2023-05-05-rtl-with-sidebar.md @@ -8,7 +8,7 @@ tags: internationalization categories: sidebar toc related_posts: false toc: - sidebar: right + sidebar: right --- # عنوان diff --git a/_sass/_base.scss b/_sass/_base.scss index 9fb6ca60ab66..720640287e31 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -67,6 +67,7 @@ blockquote { padding: 0.5em 10px; font-size: 1.2rem; + // to bring the vertical bar to the right [dir=rtl] & { border-left: none; border-right: 2px solid var(--global-theme-color); @@ -453,6 +454,7 @@ footer.sticky-bottom { font-size: 0.875rem; padding-top: 0.25rem; padding-bottom: 0; + direction: ltr !important; // to supress rtl for a better view } a { @@ -790,7 +792,9 @@ html.transition *:after { blockquote { border-left: 5px solid var(--global-theme-color); padding: 8px; - [dir=rtl] & { + + // to bring the vertical bar to the right + [dir=rtl] & { border-right: 5px solid var(--global-theme-color); border-left: none; } @@ -940,6 +944,17 @@ nav[data-toggle="toc"] { &:hover { color: var(--global-hover-color); border-left-color: var(--global-hover-color); + @if &direction=="rtl" { + border-right-color: var(--global-hover-color); + border-left: 0; + border-right: 1px solid; + } + @else { + border-left-color: var(--global-hover-color); + border-right: 0; + border-left: 1px solid; + } + } } @@ -952,6 +967,15 @@ nav[data-toggle="toc"] { color: var(--global-hover-color); border-left-color: var(--global-hover-color); } + + [dir=rtl] & { + border-left: 0; + border-right: 2px solid; + border-right-color: var(--global-theme-color); + &:hover { + border-right-color: var(--global-hover-color); + } + } } }