Right to left writting is now possible

[arashgmn]

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]

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).

[arashgmn]

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.

[pourmand1376]

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.

[arashgmn]

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.

[alshedivat]

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);
    }
}

[arashgmn]

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

[arashgmn]

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

[alshedivat]

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

[arashgmn]

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]

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]

@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]

Happy to help. And thanks for the awesome template!

[pourmand1376]

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]

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]

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]

Any update on this? Should I modify anything?

[george-gca]

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]

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

1. Adding "Vazirmatn" font for rtl content,
2. ensuring the post-tags are always ltr (it looks better this way),
3. removing deprecated attributes defined for the earlier version,
4. correct highlighting of the sidebar headers for active title or hover (by default, the vertical bar is placed on the right),
5. 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!

[arashgmn]

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