Introduction

At some point you may want to have bidirectional (RTL) support in your application / web site. That means you want to have a support for Arabic, Hebrew and other right-to-left languages. Before everything let me quote from W3C some of the definitions:

  • Bidirectional text – in languages that use right-to-left scripts any embedded text from a left-to-right script and all numbers progress visually left-to-right within the right-to-left visual flow of the text. (Of course, English text on this page could also contain bidirectional text if it included, say, Arabic and Hebrew examples.)
    Bidirectional text is commonplace in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana. Numerous different languages are written with these scripts, including Arabic, Hebrew, Pashto, Persian, Sindhi, Syriac, Dhivehi, Urdu, Yiddish, etc.
  • Bidi – a short form for ‘bidirectional’.
  • RTL – a short form for ‘right-to-left’.

Apart what’s written in article Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts I will present you some few tricks which should help you build RTL in your application / web site.

Flip your assets

Today’s day we can use power of CSS3 and transform. So, instead of creating flipped images, fonts icon, etc. you can use:

-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
display: inline-block;
vertical-align: top;
transform: scaleX(-1);

Note: 1) display: inline-block; is important in order to trigger flipping in pseudo-elements. 2) vertical-align: top; is used to correct position for pseudo-element in Safari / Mac.

Automatic transformation CSS to RTL version

Don’t do that. You don’t know what will be the effect of changes at the end. Especially in large application you may easy introduce regression bugs. It’s better to do it manually and test changes every time.

How to make a changes for RTL in CSS?

You need 2 things:

  1. Add attribute dir="rtl" to the root element which is html in the browser. Example: <html dir="rtl">.
  2. Set CSS properties related to RTL in CSS using

    html[dir='rtl'] selector {
        /* here are your RTL styles */
    }

Example:

.example {
    float: left;
}

html[dir='rtl'] .example {
    float: right;
}

Can this be done in SASS?

Yes. Similar to CSS you can use html[dir='rtl'] & { /* here are you CSS styles */ }.

Example:

.example {
    float: left;

    html[dir='rtl'] & {
        float: right;
    }
}

Animations

Generally I haven’t found any use case of reverting animations, but just in any case check it with your designers if it’s required or not.

Question mark

You can deal with question mark in 2 ways:

  1. Punctuation could remain as for English – at the end of the sentence, only message will be aligned to the right (e.g. good: Are you there?, bad: ?Are you there).
  2. Punctuation can follow “bi-di rules” and be on the left, but then question mark should be mirrored.

However, please, keep in mind, for Hebrew, question mark is the same as for English.

See also thread: [RTL][Gallery]The question mark in RTL is about the same size as that in LTR..

Time

You don’t have to change the way how you present the time. So, don’t change from 10:15 to 15:10.

Parentheses

The parenthesis are not rendered correctly in RTL mode. The text:

John Doe (administrator)

in RTL mode will be generated:

John Doe (administrator(

To fix it you have to add some special unicode characters. So, after opening bracket add LRE unicode (Left-to-Right Embedding, 0x202a) and PDF (Pop Direction Format, 0x202c) after closing bracket.

Example:

John Doe (<code>0x202a</code>administrator)<code>0x202c</code>

Note: there are few different kind of brackets: (), [], {}, <> (angle brackets) and <> (angle brackets). Angle brackets can be confusing as they look like the “less than” and “greater than” signs.

Summary

I think I have covered some basic, fundamental scenarios. Following them you may build quite good RTL version of your application.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...

Comments

You can leave a response, or trackback from your own site.

Before you add comment see for rules.

Leave a Reply

Your email address will not be published. Required fields are marked *

8a5t1k