Contents
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:
- Add attribute
dir="rtl"to the root element which ishtmlin the browser. Example:<html dir="rtl">. - 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:
- 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).
- 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.
Leave a Reply