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

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

auto-right
When detected as RTL
no-auto
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.

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

debug-direction-text-align
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.

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

inline-block-rtl

inline-rtl-example

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

block-rtl-example

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.

code-block-rtl

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

Advertisements

Published by

yuulye

Male, Indonesian, Muslim, Programmer, 27 y.o. Single by Bye... You are a poet, you just don't know it...

37 thoughts on “Right to Left”

    1. Read your post now..πŸ‘
      It’s nice that you’re learning Arabic (coz I’m too lazy to learn any new lang, lolπŸ˜‚). I know, learning any new language requires a lot of dedication and I respect you for that. Anyways, All the best..πŸ‘

      Liked by 3 people

      1. So I guess the good nite is off πŸ˜‚
        Really no pressure! Me too love my bed ❀️
        It’s 9.40 pm now here, I’ll back to the another comment tomorrow, I just afraid to say something stupid because of my brain is not on working time 🀣
        Thank you very much for bringing back my day ❀️

        Liked by 2 people

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s