Right to Left

If you try to write in Hebrew, Kurdish (Sorani), Persian/Farsi, Aramaic, Azeri, Dhivehi/Maldivian, Urdu or Arabic you might want to read this post. My primary language is Indonesian, English is my second, and recently I’m learning Arabic. Indonesian and English are written in the same direction and that is left to right (ltr), but Arabic is different, it is written from right to left (rtl). While learning arabic, I tried to make a post and quoting some arabic texts in my post, here is how I write RTL language in my post…

🔖 Contents

• Auto Detection
• direction=rtl, {direction: rtl} & {text-align: right}
• Quoting Inline and Block RTL

Auto Detection 🔖

I found it strange when I write arabic text, sometime it aligned to right, sometime to the left. After debugging, I think the WordPress.com web reader will automatically align text to the language in the post, when the post is considered using rtl language it will add direction properties to the container.

When detected as RTL

No RTL detection

As you can see in the image when it detected as RTL language the post story content block adding direction and style attribute to the element and filling the style attribute with direction and text-align properties.

direction=rtl, {direction: rtl} & {text-align: right} 🔖

I don’t know the HTML attribute for direction and after I check it does nothing, so I will refer to dir HTML attribute. FYI, this attribute will give the element styles

element {
  direction: rtl;
  unicode-bidi: isolate;
}

I will just leave the dir attribute because I’m not using it, this is just for additional information.

Debugging direction and text-align

From the picture above I decide that I will only use the style direction: rtl; because the result is what I needed. There are a lot of technical things to deal with the rtl like unicode-bidi, but for now I’m happy enough with just that appearance. The period symbol on the div with the style direction: rtl; appear in the most left compared to the text-align: right;, so in my opinion you can ignore other attributes or properties. Now we can move on and make it real.

Quoting Inline and Block RTL 🔖

As I was complained before about the difference view between reader, site, or mobile apps appearance I need to prepare classes and inline styles. In an inline view, I will need DayPicker--ar class which has the property direction: rtl;. In addition, you can add another class formatted-header__title to make the font size bigger font-size: 24px; because it appear pretty small compared to the English letters. For the inline element you can use span.

For the block view, I have some additional styling because I want it to appear more interesting than other parts.

It has different classes with the inline term-tree-selector for border style and notice__content to add more margin and padding. I used h1 for the rtl text part because I want to make the font even bigger than just 24px, probably. I separate the meaning with hr which is horizontal line.

Or you can just make the block rtl simpler with changing span into div from the inline.

---

Now I’m wondering why some languages is written right to left or left to right, or even why there are so many languages. I hope that my experience can help you if you had difficulties with writing RTL text.

Visit the Post I was talking about

السَّلَامُ عَلَيْكُمْ (assalamu ‘alaykum) means “peace be upon you”. When a muslim meet his/her brother/sister on the way, he greet him by saying this sentence or at least this is how I’ve been taught since I was little as a muslim kid. I’d like to greet you also in Islamic way because I’m planning on filling this blog with posts about Islam. […]

via May Peace be Upon You — Another Islam Student Blog