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 πŸ”–

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

Call to Action

After reading this post you should be able to make “Call to Action” button on your post. In web terms, a call to action is usually an enticement for someone to visit a link, and that link is often designed to look like a button, ready to be clicked. Maybe you’d like visitors to head straight to your Services page? Or perhaps you’d like them to check out your latest recipe, or sign up for your newsletter?

Button Primary Scary Compact

Contents πŸ”–

Call to Action πŸ”–

CTA is a marketing term used extensively in advertising and selling. It refers to any device designed to prompt an immediate response or encourage an immediate sale. A CTA most often refers to the use of words or phrases that can be incorporated into sales scripts, advertising messages or web pages that encourage consumers to take prompt action.

Click Me! or Click Me!

Between the two clickable text, which one make you want to click more? I’m certain that you will click the text with button shaped background, because it’s more interesting. Although it’s not guaranteed that your link will be clicked. Let’s see how this can be achieved in your post.

Button πŸ”–

Open your post editor and go to HTML tab. Create an HTML element and add class attribute and give button value to it. <a href="link" class="button">.

Please note that your button style maybe will only available from the reader, when you open your post from the reader. The class button really depends on your theme or css files that loaded in your page. You can force this to work using Inline Style method.

There are places that your post will probably be shown like in th reader, your site or mobile applications. In the current WordPress.com system this inconsistency can be prevented using 2 combined method, Inline Style and Classes.

Inline StyleπŸ”–

The inline style is specific to the tag itself. The inline style uses the HTML style attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The inline style is good for one and individual CSS change that you do not use repeatedly through the site.

There are some ways to apply CSS to your page: Internal Stylesheet, External Stylesheet and Inline Styles. In this case, you only have the Inline Style option. How to do the inline style? You just need to add the style attribute to your tag.

<a href="your.site.url" class="button" style="border: 1px solid black;padding: 4px;">Text Label</a>

Above code is just an example on how to apply inline style, for the complete syntax you can go to more buttons section.

More Buttons πŸ”–

  1. button
  2. button is-primary
  3. button is-scary
  4. button is-compact

<span class="button" style="vertical-align:baseline;background:white;border-color:#c8d7e1;border-style:solid;border-width:1px 1px 2px;color:#2e4453;cursor:pointer;display:inline-block;margin:0;outline:0;overflow:hidden;font-weight:500;text-overflow:ellipsis;text-decoration:none;box-sizing:border-box;font-size:14px;line-height:21px;border-radius:4px;padding:7px 14px 9px;-webkit-appearance:none;-moz-appearance:none;appearance:none;">Button</span>

<span class="button is-primary" style="background: #00aadc;border-color: #008ab3;color: #fff;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;font-size: 14px;line-height: 21px;border-radius: 4px;padding: 7px 14px 9px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Primary</span>

<span class="button is-scary" style="padding: 7px 14px 9px;vertical-align: baseline;color: #d94f4f;background: #fff;border-color: #c8d7e1;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;font-size: 14px;line-height: 21px;border-radius: 4px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Scary</span>

<span class="button is-compact" style="vertical-align: baseline;padding: 7px;color: #537994;font-size: 12px;line-height: 1;background: #fff;border-color: #c8d7e1;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;line-height: 21px;border-radius: 4px;padding: 7px 14px 9px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Compact</span>

Try this link if you can’t see above code.