Right to left writting is now possible #946

arashgmn · 2022-10-15T09:13:27Z

This branch helps the template's internationalization by providing right-to-left (rtl) scripting.

The default layout and all its derivates now automatically change their direction and alignment if a language with right-to-left scripting is specified in the front matter. The feature detects the following right-to-left languages (can be extended in _config.yml):

Arabic (ar)
Aramaic (arc)
Azeri (az)
Dhivehi/Maldivian (dv)
Hebrew (he)
Kurdish (ku)
Persian (fa)
Urdu (ur)

An example post is also provided in the Blog.

alshedivat

thanks for this contribution! really important step towards internationalization. please see some feedback and questions below. once addressed, I'd be happy to merge.

alshedivat · 2022-10-25T12:20:04Z

_layouts/default.html

@@ -16,7 +16,8 @@
    {%- include header.html %}

    <!-- Content -->
-    <div class="container mt-5">
+    <div class="container mt-5" {% if site.rtl_langs contains page.lang %}dir="rtl" align="right"{% endif %}


I think it's also worth adding "rtl" class to this div, so that we can conditionally change CSS of some inner elements (eg, the border location of the blockquote).

Happy that you find it useful :) . I have to clarify one important fact: I'm by no means dominant on HTML, SCSS, and I'm afraid, even after going through Jekyll's documentation several times, I haven't fully comprehend its philosophy. So please take my response with a grain of salt, i.e., modify it as you feel it's better.

Coming back to your comment, I actually don't know how to add it to div here. If you provide me with some hints, I would be happy to work on it.

Hi, Thanks for this great idea.

It is a common practice (+) to add dir=rtl in a separate div. So, maybe it is better to add it like this:

<div {% if site.rtl_langs contains page.lang %} dir="rtl" endif %> Stuff </div>

Also, I see that you have added align=right. Why do you think that is necessary? I haven't seen it anywhere.

Hi,
I was not aware of this practice, but it seems to work on my local machine.

align=right is to decouple the text of each post from the body of the page which have some use cases. E.g., one might want to have the header and navigation in, say English, but the posts in a rtl script. An example post is here.

_posts/2022-10-15-rtl.md

alshedivat · 2022-10-25T12:24:46Z

_posts/2022-10-15-rtl.md

+```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;
+  }
+}
+```


instead of providing a suggestion on how to update CSS here, it's better the add rtl-conditional style overrides directly to _scss/_base.scss, like this (I haven't tested the code below, so please adjust as necessary):

rtl blockquote { border-left: none; border-right: 2px solid var(--global-theme-color); } .post-content { rtl blockquote { border-left: none; border-right: 2px solid var(--global-theme-color); } }

I'll check this locally, and push a new commit if it worked on my side.

Please review my new commit (lines 71-74 and 971-977).

alshedivat · 2022-10-25T12:25:54Z

_sass/_layout.scss

+  unicode-bidi: bidi-override !important;
+  direction: unset !important;


sorry, I'm not as familiar with multi-directional language support. what does this do?

TBH, I don't know much rather than bidi handles bi-directional scripting in the correct way. Often right-to-left scripts are not equal to a right-aligned version of a left-to-right script. Text becomes more shattered if there are numbers or special characters involved as well. Yet, with smart conditioning, one can prevent the misplacement of phrases. I guess, what bidi does is take care of all those cases.

Why these particular key-values are necessary to fix this, I don't know. I had this problem and (almost) followed the accepted answer. In my case, it worked.

arashgmn · 2022-10-26T21:14:27Z

The most recent push, fixes the location of the vertical line of blockquote with &:

[dir=rtl] & {
        border-right: 5px solid var(--global-theme-color);
        border-left: none;

Note: It seems to me that the lateral border highlighting is repeated in _base.scss. Namely, there's a command at line 41 and another one at the very end line 661. I'm not sure why is that. So, I added [dir=rtl] & {... to both.

alshedivat · 2022-10-30T00:44:47Z

@arashgmn, thanks again for the implementation of rtl support and for pushing a fix for the blockquote, it looks great! I'll take another pass, perhaps make some small adjustments to the code, and merge.

arashgmn · 2022-10-30T12:41:34Z

Happy to help. And thanks for the awesome template!

pourmand1376 · 2022-12-25T20:22:45Z

Also, we have a great font for writing Persian (Farsi) called Vazirmatn. It would be very good if we can somehow add custom fonts to this site. I'll just leave it as an idea.

arashgmn · 2023-01-01T18:35:42Z

Also, we have a great font for writing Persian (Farsi) called Vazirmatn. It would be very good if we can somehow add custom fonts to this site. I'll just leave it as an idea.

In the same blog I posted earlier, I use Noto Naskh Arabic (check _include/head.html). It can be changed to Vazirmatn easily.

The tricky part is to ensure ltr and rtl posts have the correct fonts. I used some layman's solutions to what didn'work, and it nearly works fine. The only exception is that the codes-block font is modified to the default ltr font except mono. This I couldn't fix, unfortunately. Would be happy to fix this one if you had any ideas.

stale · 2023-03-02T19:06:39Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

arashgmn · 2023-03-06T09:24:28Z

Any update on this? Should I modify anything?

george-gca · 2023-03-31T02:37:17Z

I am not the best one to verify this, since I have no idea what are the rules when using left-to-right writing. @alshedivat @pourmand1376

arashgmn · 2023-05-06T17:19:44Z

Hi,
I synced my fork to include the nice sidebar feature and adapted my repo. My new commits include the followings:

Adding "Vazirmatn" font for rtl content,
ensuring the post-tags are always ltr (it looks better this way),
removing deprecated attributes defined for the earlier version,
correct highlighting of the sidebar headers for active title or hover (by default, the vertical bar is placed on the right),
ensuring that the code blocks are always ltr, left-aligned and in monospace.

In addition, I added one new post to demonstrate that the sidebar indeed works an rtl language.

Cheers, Arash

arashgmn

Please review my new commits and my recent reviews. And as before, thanks for the awesome template!

_posts/2022-10-15-rtl.md

arashgmn · 2023-05-06T17:29:12Z

_posts/2022-10-15-rtl.md

+```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;
+  }
+}
+```


Please review my new commit (lines 71-74 and 971-977).

arashgmn added 2 commits October 15, 2022 08:16

added right-to-left capability

8d727af

fixed code blocks + added sample post

068dd0d

rohandebsarkar requested a review from alshedivat October 24, 2022 04:54

alshedivat reviewed Oct 25, 2022

View reviewed changes

fixed blockquote lateral line placement

ff6f4e5

distill rtl (should be tested)

64d76b9

stale bot added the wontfix label Mar 2, 2023

stale bot removed the wontfix label Mar 6, 2023

arashgmn added 4 commits May 6, 2023 16:45

Merge branch 'master' into right-to-left

56e53c7

added vazirmatn

68e9fd3

tags always must be ltr

fd02f31

fixing the sidebar for rtl

c9c61c8

arashgmn commented May 6, 2023

View reviewed changes

alshedivat added the enhancement label Jun 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Right to left writting is now possible #946

Right to left writting is now possible #946

arashgmn commented Oct 15, 2022

alshedivat left a comment

alshedivat Oct 25, 2022

arashgmn Oct 26, 2022

pourmand1376 Dec 25, 2022

arashgmn Jan 1, 2023

alshedivat Oct 25, 2022

arashgmn Oct 26, 2022

arashgmn May 6, 2023

alshedivat Oct 25, 2022

arashgmn Oct 26, 2022

arashgmn commented Oct 26, 2022 •

edited

alshedivat commented Oct 30, 2022

arashgmn commented Oct 30, 2022

pourmand1376 commented Dec 25, 2022

arashgmn commented Jan 1, 2023 •

edited

stale bot commented Mar 2, 2023

arashgmn commented Mar 6, 2023

george-gca commented Mar 31, 2023

arashgmn commented May 6, 2023 •

edited

arashgmn left a comment

arashgmn May 6, 2023

		unicode-bidi: bidi-override !important;
		direction: unset !important;

Right to left writting is now possible #946

Are you sure you want to change the base?

Right to left writting is now possible #946

Conversation

arashgmn commented Oct 15, 2022

alshedivat left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arashgmn commented Oct 26, 2022 • edited

alshedivat commented Oct 30, 2022

arashgmn commented Oct 30, 2022

pourmand1376 commented Dec 25, 2022

arashgmn commented Jan 1, 2023 • edited

stale bot commented Mar 2, 2023

arashgmn commented Mar 6, 2023

george-gca commented Mar 31, 2023

arashgmn commented May 6, 2023 • edited

arashgmn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arashgmn commented Oct 26, 2022 •

edited

arashgmn commented Jan 1, 2023 •

edited

arashgmn commented May 6, 2023 •

edited