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

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

gap
Contents πŸ”–

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

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

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

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

HTML in Comment

Do You know that You can use HTML in your WordPress comment? There are 14 elements You can use to prettify your comments. The elements are a, abbr, acronym, b, blockquote, cite, code, del, em, i, q, s, strike, and strong. Some of them might also have attribute(s) that can be modified.

<a>

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

In WordPress comment, this element has 2 attributes that can be used they are href and title. Fill the href attribute with some kind of URL and title attribute with a related title Specifies extra information about an element (displayed as a tool tip) .

<abbr> & <acronym>

The <abbr> tag defines an abbreviation or an acronym, like “Mr.”, “Dec.”, “ASAP”, “ATM”.

Tip: An abbreviation and an acronym are both shortened versions of something else. Both are often represented as a series of letters.

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

The elements have one and only attribute that can be used for the comment and that is title. This attribute works the same behavior with <a> tag, when You hover it, the tool tip will show You content of the title. Those tags are similar, probably the same, but when You are writing your own HTML page You might want to use only abbr tag. because…

The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead.

<b>, <strong>, <i> & <em>

These elements are Formatting elements. <b> similar with <strong>, <i> similar with <em>. <b> means bold, <strong> also bold but with added semantic “strong” importance. <i> means italic, <em> also italic but with added semantic importance.

Here is some examples of combination from the elements.

no format = no format.
<b>bold</b> <strong>strong</strong> = bold strong.
<i>italic</i> <em>em</em> = italic em.
This sentence is important but not as important as this.

<blockquote>, <q> & <cite>

A quotation is the repetition of one expression as part of another one, particularly when the quoted expression is well-known or explicitly attributed by citation to its original source, and it is indicated by (punctuated with) quotation marks.

Paragraph above is quoted from wikipedia. I use a special element to make the appearance different with other section. I use <blockquote>tag. <blockquote> and <q> tag are the same, the difference is <blockquote> used for a long quote, and <quote> for shorter version of quote. I personally use <blockquote> in a self paragraph, and <q> for quoting a sentence inside a paragraph.

Those two tags, has an attribute that can be filled. The attribute is called cite, it usually has a value of a URL which means Specifies the source of the quotation. The attribute can be a self tag called <cite>, I haven’t actually use it a lot, I just usually use the quoting tag directly, but for example most of my references is taken from w3schools.com.

<code>

I should love this element the most. This element is me, haha.The <code> tag is a phrase tag. It defines a piece of computer code. This element make a block of text pretty different, if we take a look at other elements, this is the only element that change the background.

This element has an inline display, so if You want to make the piece of code more visible You might want to add more spaces between before and after block.

<del>, <s> and <strike>

Last but not least, for a strike through decoration text we can use these elements. The only element that has attribute that can be modified is <del> element. The attribute is datetime, if You want a precise thing for you deletion thing, You can use this element with the attribute datetime even though the format is pretty hard to memorize YYYY-MM-DDThh:mm:ssTZD.

I don’t use this kind of element so much, but maybe if You are working in a project and need versioning, You can use these element to mark that something has changed. Or, just use it to make your text noticeable in the comments.


So, now is the time to try these elements in the comment. I haven’t tried much
but I might add a comment to this post after.

I Need More

I love WordPress, but, I need more. This is about me customizing content of a website. I’m not good with words so I try to use something else. I know a little about HTML, CSS, and JavaScript, and I want to use them. But WordPress doesn’t allow me to use custom CSS or JavaScript in a post, not that I know of.

edit-post

So, I try to find something else, something free, because I believe that my content is not good enough to be in paid service, my WordPress is also a Free Plan by the way.

Github Pages

After sometime trying to find an alternative, I found out about Github Pages. GitHub Pages is a static site hosting service. I can host my HTML documents and only HTML, no server-side scripting (PHP, Ruby, Python, etc.) supported, just like a usual web server without Backend code. I started to create pages and put it there, so far the site works just like what I wanted yuulye.github.io.


Linking to thethoughtfulbrain, this will pingback to your post.

Linking to another post.