Right to left writting is now possible #946
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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!") | ||
| ``` | ||
arashgmn marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ## بلاک | ||
| بلاک‌ها همواره چپ‌چین خواهند ماند: | ||
|
|
||
| --- | ||
| layout: page | ||
| title: project | ||
| description: a project with a background image | ||
| img: /assets/img/12.jpg | ||
| --- | ||
arashgmn marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| حتی اگر به زبان‌های راست‌به‌چپ نوشته شوند: | ||
|
|
||
| --- | ||
| صفحه‌بندی: صفحه | ||
| عنوان: پروژه | ||
| توضیحات: یک پروژه با تصویر زمینه | ||
| --- | ||
|
|
||
| ## نقل‌قول | ||
| > نقل‌قول‌ها به این شکل به نمایش درخواهند آمد. | ||
arashgmn marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| زیباتر خواهد بود اگر خط عمودی به راست انتقال داده شود. این کار با ویرایش _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; | ||
| } | ||
| } | ||
| ``` | ||
|
Comment on lines
+54
to
+72
There was a problem hiding this comment. instead of providing a suggestion on how to update CSS here, it's better the add rtl-conditional style overrides directly to 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);
}
}There was a problem hiding this comment. I'll check this locally, and push a new commit if it worked on my side. There was a problem hiding this comment. Please review my new commit (lines 71-74 and 971-977). |
||
|
|
||
| منطقا باید بتوان با توجه به جهت‌گیری متن (rtl یا ltr) صفت مناسب را تعریف کرد. اما من چندان به sass مسلط نیستم. امیدوارم فرد مسلط‌تری این مشکل کوچک را رفع کند. | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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; | ||
|
Comment on lines
+9
to
+10
There was a problem hiding this comment. sorry, I'm not as familiar with multi-directional language support. what does this do? There was a problem hiding this comment. TBH, I don't know much rather than 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. |
||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| scroll-margin-top: 66px; | ||
| } | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
divhere. If you provide me with some hints, I would be happy to work on it.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi, Thanks for this great idea.
It is a common practice (+) to add
dir=rtlin a separate div. So, maybe it is better to add it like this:Also, I see that you have added
align=right. Why do you think that is necessary? I haven't seen it anywhere.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi,
I was not aware of this practice, but it seems to work on my local machine.
align=rightis 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.