Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Right-To-Left Development In Mobile Design

The Middle Eastern market is growing at a rapid pace, and, as a result, demand for various IT products is also booming in the region. What is peculiar, though, is that Middle Eastern countries require design that is not only compatible with their needs and comfortable for their users, but that is also suitable to their language standards, making a serious adaptation process very important. Given that most languages spoken in the Middle East are written and read from right to left (such as Arabic1, Hebrew and Urdu), developers often face a range of problems when creating products in those languages.

Although this might seem like not that big of a deal, IT development for right-to-left (RTL) languages entails paying attention to a number of peculiarities. This is only further complicated by the fact that the RTL market is relatively new, and not many resources are available to help developers.

Our experience with RTL development has enabled us to compile a thorough list of tips that are useful for anyone developing an RTL product (such as a website or mobile app). By following the tips closely, you should be able to navigate the challenging waters of RTL development and deliver a functional, user-friendly result.

Flipping The Interface Link

First and foremost, the interface must be flipped from right to left. You might think this is rather “D’uh” advice, but we simply could not disregard it, because it is in fact the very first thing to do.

Here’s an example of Facebook’s left-to-right (LTR) design:

2
Facebook’s log-in page in LTR design. (Image source: Facebook12963) (View large version4)

And here is the RTL version of Facebook:

5
Facebook’s log-in page in RTL design. (Image source: Facebook12963) (View large version7)

There are several ways to achieve this.

1. Using the dir Attribute or CSS Link

If the basic markup is built with floating blocks, it will look something like the example below.

For LTR design, pay attention to the styles. In this case, the link with logo will be fixed to the left, with the login-container to the right.

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Example</title>
            <style>
                .float-left{
                float: left;
                }
                .float-right{
                float: right;
                }
                body[dir="rtl"] .float-left{
                float: right;
                }
                body[dir="rtl"] .float-right{
                float: left;
                }
            </style>
        </head>
        <body>
            <header class="clearfix">
                <a href="#" class="float-left logo"><img src="static/logo.png"></a>
            <nav class="float-right login-container"></nav>
        </header>
    <main></main>
    <footer></footer>
    </body>
    </html>
    
8
Facebook’s top log-in bar in LTR design. (Image source: Facebook12963) (View large version10)

For RTL design, once you’ve assigned the body tag to the dir="rtl attribute, the whole markup will be mirrored, placing the logo to the right and login-container to the left. The opposite properties will be then applied to blocks with the float-left or float-right class.

<body dir="ltr">

The dir attribute specifies the text’s direction and display (either left to right or right to left). Normally, browsers recognize the direction because it’s assigned in the Unicode character set, but with the dir attribute, you can set whatever direction you want.

The possible variants are dir="ltr", dir="rtl" and dir="auto". This attribute can also be rewritten with the CSS direction property.

Because text direction is semantically tied to content and not to presentation, we recommend that, whenever possible, web developers use the dir attribute and not the CSS properties related to it. That way, the text will be displayed properly even in browsers that don’t support CSS (or in those where CSS support is turned off).

11
Facebook’s top log-in bar in RTL design. (Image source: Facebook12963) (View large version13)

With this attribute, you can horizontally mirror images, reassign fonts, align text to either side of the page, etc. However, the manual way is fairly labor-intensive. There are tools to automate the assembly of RTL styles, which we’ll get to a bit later in this post. In the meantime, we’ll describe another way of dealing with markup directional changes.

2. Using Flexbox Link

Flexbox is popular among developers for a couple of good reasons. Not only does it provide flexibility when adjusting the alignment of page elements and other bits, but it also eliminates the need to reassign styles for RTL development. See the code snippets below for more details.

For LTR:

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    <div>
    
14
An example of flexbox layout in LTR design. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version16)

For RTL:

    
    <div class="flex-container" style="direction: ltr;">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    <div>
    
17
An example of flexbox layout in RTL design. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version19)

The grid layout is also useful here. We set grid-template-areas in the containing block with {display: grid;} property (imagine it as a table with two columns and three rows). From the top: The header occupies the entire width of the screen, the sidebar is on the left, while the main content and the footer are on the right, one under another.

For LTR:

    <div class="grid" 
    style="grid-template-areas: "header  header";
    "sidebar main"
    "sidebar footer";">
        <div class="item-1" style="grid-area: header;">header</div>
        <div class="item-2" style="grid-area: sidebar;">sidebar</div>
        <div class="item-3" style="grid-area: main;">main</div>
        <div class="item-4" style="grid-area: footer;">footer</div>
    </div>
    
20
An example of basic direction of grid layout in LTR design. (Image source: SteelKiwi6757555350474439373533282523211815)

For RTL, by changing the dir attribute, the horizontal axis with the grid class and the {display: grid;} property will adjust to the specified direction. The layout matrix is then inverted:

    <div class="grid" 
    style="grid-template-areas: "header header"
    "sidebar main"
    "sidebar footer"; 
    dir="rtl">
        <div class="item-1" style="grid-area: header;">header</div>
        <div class="item-2" style="grid-area: sidebar;">sidebar</div>
        <div class="item-3" style="grid-area: main;">main</div>
        <div class="item-4" style="grid-area: footer;">footer</div>
    </div>
    
22
An example of inverted grid layout matrix in RTL design. (Image source: SteelKiwi6757555350474439373533282523211815)

Even though using tables to build layouts hasn’t been popular for a while now, they would still build flow direction as a component, just like in the previous examples, meaning that when you add the dir="rtl" tag, columns will start from the right and move from right to left. All table elements will follow this, unless the direction is clearly predefined beforehand.

Character Encoding Link

Save your file using a character encoding that includes the characters you need (UTF-8 is a good bet). Declare that you are going to use such characters in the head tag of your HTML page with:

<meta charset="utf-8"/>
    

UTF-8 is a character encoding capable of encoding all possible Unicode code points, and it covers almost all languages, characters and punctuation symbols. Using UTF-8 also removes the need for server-side logic when individually determining each page’s character encoding or each incoming form submission. Coding helps to convert everything into binary numbers. For instance, “hello” in UTF-8 would be stored like this (in binary): 01101000 01100101 01101100 01101100 01101111.

Formatted Text Link

Try as hard as you can to avoid using bold and italics. Bold text would make readability extremely difficult in most RTL languages (especially Arabic), and italics is simply never used. As well, capital letters are almost always disregarded in RTL languages.

24
An example of omitting capital letters in RTL languages. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version26)

If you need to highlight a certain part of text in Arabic, overline it instead of underlining, interspacing or italicizing. Here is how we do it:

<h1>مثال</h1>
    h1 {
        text-decoration: overline;
    }
    
27
An example of overlining Arabic text. (Image source: SteelKiwi6757555350474439373533282523211815)

Make sure that all text is aligned to the right, and that font and font size are adjusted properly (better yet, customize them), because Latin fonts tend to affect Arabic readability rather poorly.

Actually, the best way to deal with fonts is to speak to your client (assuming, of course, they speak the language). The thing is that languages such as Arabic tend to have a great number of spoken and written variations, and if you’re making a product catered specifically to some region, it should really display the language version used there. If you find this matter interesting, information about the history of Arabic writing systems is available here29.

In case your client isn’t a native speaker of the product’s language or isn’t able to help you, there is always the simple option of using one of the Google Noto30 fonts (there is one for every language, and all of them are free). Alternatively, Arabnet recommends 10 Arabic fonts31 (the list is from 2014, but things haven’t changed much in this area over the last three years). However, do keep in mind that your client always knows best which language variant is used most in their particular region, and if you have a chance to consult with them about it, do so right away.

Also, remember that words in RTL languages are often much shorter than words in English. So, adjust to keep a balance in how text is displayed on the page.

Icons Link

Using icons in RTL development can be tricky. Keep in mind that some of them might have to be mirrored, and some could be considered offensive to people of some nationalities, so double-check that the icons you’re using make sense.

Icons that are symmetrical and that don’t point in a particular direction should not be flipped.

32
There is no need to mirror symmetrical icons. (Image source: SteelKiwi6757555350474439373533282523211815)

On the other hand, icons that clearly point in a particular direction should be mirrored.

34
Mirror icons that point to a side. (Image source: SteelKiwi6757555350474439373533282523211815)
<span class="back-icon"></span>
    body[dir="rtl"] {
        transform: scale(-1, 1);
    }
    

The scale (x, y) CSS function used in the example above modifies the size of an element. If set to 1, it does nothing, but when negative, it performs as a “point reflection” and can modify size.

Icons that have characters or words from non-RTL languages don’t need to be mirrored. You should, however, localize them if necessary.

36
Icons containing words or characters from non-RTL languages don’t need be translated, but should be localized if necessary. (Image source: SteelKiwi6757555350474439373533282523211815)

Ensure that the icons you’re using are appropriate. For example, using a wine glass as a symbol for a restaurant or bar could be misunderstood because alcohol consumption is prohibited in Islam. Cultural peculiarities need to be taken into account, and developers should double-check that the symbols and icons they’re using are appropriate for the target market.

38
Avoid culturally inappropriate icons. (Image source: SteelKiwi6757555350474439373533282523211815)

Logos, navigation buttons and menus should be located in the upper-right corner for RTL design. The two latter elements also need to be displayed in reverse order. You don’t, however, need to mirror all of the stuff related to controlling media content (such as play and pause buttons).

40
Example of YouTube’s usage of media-content-management buttons in RTL design. (Image source: YouTube41) (View large version42)

Digit Ordering Link

The order of digits in numbers should not be changed for RTL. Note the phone number below. The digits are displayed in the same order in both LTR and RTL, but the telephone icon changes position. The same rule applies to other digits (such as addresses and other numeric strings).

43
The order of digits shouldn’t change for RTL design. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version45)

Position Of Control Buttons Link

Even though people speaking RTL languages perceive and process information from right to left, many of them are right-handed. Thus, it would be a good idea not to mirror control buttons, so that users can interact with them comfortably. Instead, center them to resolve any issues. For instance, if the orange button shown below was located to the left, it’d be extremely difficult for people to reach it with their right thumb while holding their device in one hand:

46
Placing the orange button to the left would be uncomfortable for users. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version48)

In this case, it would be much more convenient for users if such important elements of interaction were large and located in the middle of the screen.

49
Placing the orange button in the middle of the page would solve all convenience-related problems. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version51)

The elements in the bottom tab bar below should be positioned from right to left. RTL also exists in the Persian language — see example below:

52
In RTL design, the elements in the bottom tab bar should be positioned from right to left. (Image source: SteelKiwi6757555350474439373533282523211815)

Navigation drawers should appear from the right side.

54
In RTL design, drawers should appear from the right side. (Image source: SteelKiwi6757555350474439373533282523211815)

Position Of Other Symbols Link

The position of symbols that can be used for both RTL and LTR (such as punctuation marks) will depend on the direction of the text as a whole. This is because browsers process RTL words in the RTL direction, even though the data format starts from the beginning. Punctuation is converted only towards the specified direction.

The following example should illustrate the issue better:

56
You need to convert RTL and LTR strings into separate elements in order to have punctuation symbols appear in the right direction. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version58)

To fix this problem, you can convert RTL and LTR strings (or text fragments) into separate elements. Then, specify their direction with either the dir attribute or the CSS direction property. In the first case, you would do this:

    <p dir="rtl" class="rtl-text">?سوف أعطي مثالا على ذلك. لا تمانع</p>
    <p dir="ltr" class="ltr-text">I will give an example. Don’t you mind?</p>
    

And in the second, this:

.rtl-text {
    direction: rtl;
}

.ltr-text {
    direction: ltr;
}

Alternatively, you could also use the bdi tag to avoid this type of issue. However, it is only supported in Chrome (16) and Firefox (10).

Separate RTL CSS File Link

For basic CSS styles, you should create a separate RTL file and set the horizontal properties there (floating left and right, padding left and right, margins and so on), while also redefining them appropriately:

div.class {
    width: 150px;
    height: 100px;
    float: left;
    padding: 0 15px 0 10px;
}

And in the rtl.css file:

html[dir="rtl"] div.class {
    float: right;
    padding: 0 10px 0 15px;
}

If you need to eliminate some other LTR-directed features, you can always create and attach another separate rtl.css file.

In case this approach doesn’t meet your needs well enough, you can create two separate style files for LTR and RTL. Various utilities can be applied to automate their assembly. One such program is css-flip59 (created by Twitter). With its help, you can easily compile a file with properties redefined for RTL from an existing source file.

In input.css:

p {
    padding-left: 1em;
}

And in output.rtl.css:

p {
    padding-right: 1em;
}

You can also use replacements and exceptions, based on directives in the source file. For example, in input.css:

p {
    /@replace: -32px -32px/ background-position: -32px 0;
    /@replace: ">"/ content: "<";
    /@noflip/ float: left;
}

And in output.rtl.css:

p {
    background-position: -32px -32px;
    content: ">";
    float: left;
}

RTLCSS60 is another tool that supports replacements (exceptions) and makes it possible for developers to rename selectors, add local configurations of exception, and delete or add properties.

You could also use plugins for assembly instruments, including for Gulp61, Grunt62 and Webpack63.

For example, in input.css:

.example {
    transform: translateY(10px) /*rtl:append:scaleX(-1)*/;
    font-family: "Helvetica Neue", Arial/*rtl:prepend:"Arabic fonts", */;
    font-size:1.3em/*rtl:1.2em*/;
    /*rtl:remove*/
    text-decoration:underline;
    /*rtl:begin:ignore*/
    margin-left:15px;
    padding-left:20px;
    /*rtl:end:ignore*/
}

And in output.rtl.css:

.example {
    transform: translateY(10px) scaleX(-1);
    font-family: "Arabic fonts","Helvetica Neue", Arial;
    font-size:1.2em;
    margin-left:15px;
    padding-left:20px;
}

You can also make configurations for renaming selectors. Again, in input.css:

/*rtl:begin:options: {
    "autoRename": true,
    "stringMap":[ {
       "name" : "prev-next",
       "search" : ["prev", "previous"],
       "replace" : ["next", "next"],
       "options" : {"ignoreCase":false}
   } ]
} */
slide-prev, .card-previous {
    content: ‘<’;
}
/*rtl:end:options*/

And in output.rtl.css:

.slide-prev, .card-previous {
    content: ‘>’;
}

Calendars Link

Calendars are probably one of the most important and complicated aspects of RTL design, because calendar years are different between LTR and RTL geographic regions.

Hijri Link

Hijri, the Islamic calendar, is lunar-based, which means that a year in the Gregorian calendar is longer than in the Islamic calendar. As a result, Hijri always has to shift according to the Gregorian calendar.

Hebrew Calendar Link

The Hebrew calendar, which has 12 lunar months, with an extra month added every few years, also differs from the Gregorian calendar. These differences make it hard to find an adequate tool for working with both Gregorian calendars in LTR scripts and non-Gregorian calendars in RTL scripts.

Tools for Displaying Calendars Link

One popular tool is FullCalendar64, because it calculates time based on Moment.js. However, it cannot convert between different types of calendars and is only useful for localizing dates and displaying RTL content.

dijit/Calendar65 is able to display non-Gregorian calendars but has a rather limited range of tasks.

The DateTimeFormat constructor is an invaluable property for international objects. It makes it possible to pass additional options to the argument string when specifying the exact formatting for time and date.

Below, you can see how a date should be converted from the Gregorian calendar to the Islamic one:

var sampleDate = new Intl.DateTimeFormat("ru-RU-u-ca-islamicc").format(new Date()); // => "26.03.2017" console.log(sampleDate); // => "27.06.1438 AH"

Abbreviations (Days Of Week) Link

Although abbreviating the names of the days of the week is standard in many languages, this isn’t possible in Arabic because all of them start with the same letter. Instead, simply display their whole names and reduce the font size.

66
All names of weekdays start with the same letter in Arabic, meaning that you cannot abbreviate them like you would in English. (Image source: SteelKiwi6757555350474439373533282523211815) (View large version68)

Internationalization Link

If your product requires internationalization, consider the ECMAScript Internationalization API. It comes with a language-sensitive string comparison and relevant formatting for numbers, dates and time.

Another important point is that ECMAScript supports not only Arabic, but also a wide range of other combinations, such as Arabic-Arabic and Arabic-Tunisian.

Also, keep in mind that the use of Eastern and Western Arabic numerals might depend on the language variant. Some regions might use Eastern Arabic numerals (١٢٣), while others use Western ones (123).

Formatting Arabic-Egyptian Numerals Link

var sampleNumber = new Intl.NumberFormat(‘ar-EG’).format(12345);
        console.log(sampleNumber); // => ١٢٬٣٤٥

In Tunisia, for instance, Eastern Arabic numerals are usually used:

var sampleNumber = new Intl.NumberFormat(‘ar-TN’).format(12345);
        console.log(sampleNumber); // => 12345

Examples Of Native Arabic Websites Link

69
Arageek7170 is dedicated to all hip geek news around the world. (Image source: Arageek7170) (View large version72)
73
Hawaa Forum74 is an online community for women. (Image source: Hawaaworld.com75) (View large version76)
Saudileague77
Saudi League78 is dedicated to football in Saudi Arabia, with news, tournament days, info about teams and more. (Image source: Saudileague.com79) (View large version80)

Share Your Experience! Link

Cultural and linguistic peculiarities can be a hassle when you’re developing for different regions and markets. When it comes to the RTL market, developers must use their knowledge to adhere to a completely different set of rules, making the whole process more challenging and potentially frustrating. Using the 12 tips above, we hope you’re able to overcome some of the most common problems with RTL development.

If you have encountered any obstacles related to RTL development, please describe them (along with the solutions you’ve found) in the comments section below. The more that developers share their knowledge and experience, the easier it will be for all of us to deal with the peculiarities of RTL development.

(da, vf, yk, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/03/taking-a-closer-look-at-arabic-calligraphy/
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/09/23-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  3. 3 https://www.facebook.com/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2017/09/23-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/10/22-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  6. 6 https://www.facebook.com/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/10/22-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/10/11-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  9. 9 https://www.facebook.com/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/10/11-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/10/12-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  12. 12 https://www.facebook.com/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/10/12-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/10/14-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  15. 15 http://www.steelkiwi.com
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/10/14-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/10/13-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  18. 18 http://www.steelkiwi.com
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/10/13-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/10/15-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  21. 21 http://www.steelkiwi.com
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/10/16-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  23. 23 http://www.steelkiwi.com
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/11/hello-world.png
  25. 25 http://www.steelkiwi.com
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/11/hello-world.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/10/03-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  28. 28 http://www.steelkiwi.com
  29. 29 http://www.academia.edu/910536/Arabic_script_and_typography_A_brief_historical_overview_2002_
  30. 30 https://www.google.com/get/noto/
  31. 31 http://news.arabnet.me/best-web-fonts-arabic-text-screens/
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/10/02-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  33. 33 http://www.steelkiwi.com
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/10/01-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  35. 35 http://www.steelkiwi.com
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/10/04-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  37. 37 http://www.steelkiwi.com
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/10/05-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  39. 39 http://www.steelkiwi.com
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/10/21-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  41. 41 https://www.youtube.com/watch?v=e-5obm1G_FY
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/10/21-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/10/08-Right-to-Left-Development-for-Mobile-Design-large-opt-1.png
  44. 44 http://www.steelkiwi.com
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/10/08-Right-to-Left-Development-for-Mobile-Design-large-opt-1.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/10/19-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  47. 47 http://www.steelkiwi.com
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/10/19-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/10/20-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  50. 50 http://www.steelkiwi.com
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/10/20-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/10/18-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  53. 53 http://www.steelkiwi.com
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/10/17-Right-to-Left-Development-for-Mobile-Design-preview-opt.png
  55. 55 http://www.steelkiwi.com
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/10/09-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  57. 57 http://www.steelkiwi.com
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/10/09-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  59. 59 https://github.com/twitter/css-flip
  60. 60 https://github.com/MohammadYounes/rtlcss
  61. 61 https://github.com/jjlharrison/gulp-rtlcss
  62. 62 https://github.com/MohammadYounes/grunt-rtlcss
  63. 63 https://github.com/romainberger/webpack-rtl-plugin
  64. 64 https://github.com/fullcalendar/fullcalendar
  65. 65 https://dojotoolkit.org/reference-guide/1.10/dijit/Calendar.html
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/10/10-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  67. 67 http://www.steelkiwi.com
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/10/10-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2017/10/26-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  70. 70 https://www.arageek.com/
  71. 71 https://www.arageek.com/
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2017/10/26-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/10/25-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  74. 74 https://www.hawaaworld.com/
  75. 75 https://www.hawaaworld.com
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/10/25-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2017/10/24-Right-to-Left-Development-for-Mobile-Design-large-opt.png
  78. 78 http://saudileague.com//
  79. 79 http://saudileague.com
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/10/24-Right-to-Left-Development-for-Mobile-Design-large-opt.png

↑ Back to top Tweet itShare on Facebook

Robert Dodis is a front-end developer at SteelKiwi Inc. He is the true artist of all RTL-oriented project development and spends hours looking for the best and most suitable solutions for the problems such development often entails.

Yvette Mosiichuk is a UI/UX designer at SteelKiwi Inc. In her everyday life, Yvette is very passionate about culture of various countries around the world, which, when translated into her work, makes for a great ability to cater products to the needs of any audience.

  1. 1

    Great article thank you for the details.

    Just a note, the image under “Formatted Text” is showing the sample image for the phone numbers.

    -1
  2. 2

    Support bidi-directional texts with `dir=auto` instead of guessing `dir=ltr | rtl`.

    -8
  3. 3

    Nice article with good examples. You have inverted Eastern and Western Arabic numerals. The former are the like of ١٢٣ while the later are the like of 123. Rule of thumb: the Western part of the so-called Arab countries uses the Western ones: Morocco, Algeria, Tunisia…

    -1
  4. 8

    Renan Martinelli

    November 6, 2017 8:20 pm

    Great!!! I’m working in an internationalization website and this will help me a lot! Tnks

    -2
  5. 10

    Nice work but I have to digress, first, dir=”rtl” on body is not handled well on all browsers, on Chrome and Firefox, the scrollbar is on the right (as expected), in IE it flips to the left, which is wrong. Thus you cannot put the dir=rtl on body until Microsoft agrees to play ball.

    Which bring us to a more important detail, you do not mirror everything for RTL, because your users are the same users for all websites, using the same browser. You do not mirror the drawer location because users do not expect it to be on the other side. Scrollbars, background images, and menu locations are quite tricky, I never mirror them, and take extra care of showing them exactly where the user expects them.

    As for general CSS, I mirror everything in one go using gulp, using inline code to skip the things that need not be mirrored. Then produce different icons for the arrows (instead of scaling, which is a nice trick). This actually works better than creating [dir=rtl] selectors. But it also means you have to let the server load the right css instead of having one global css.

    The overline I never used in Arabic, so I’m not sure which languages it applies to.

    -9
    • 11

      I’m not familiar with any research, regarding to drawer position for RTL users, but if you look to the material guidelines for Bidirectionality and download the RTL Sketch plugin, you’ll see that they propose to mirror all navigation (including drawers)

      -1
  6. 12

    Shahee Nannore

    November 7, 2017 8:10 am

    Great article!
    From a designer’s perspective, what would be the ideal standards while providing redlines for a design to be used both in LTR and RTL?
    Should we try symmetry in paddings and margins to avoid misalignments?

    -7
  7. 13

    Michał Kędrzyński

    November 7, 2017 8:36 am

    Another peculiarity I have found is that in RTL languages they sometimes mix they native language with English (like when a phrase is not translatable). In that case the English phrase should be LTR. This makes it difficult to separate texts in RTL from that in LTR.

    5
  8. 15

    حمید افسری Hameed Afssari

    November 7, 2017 5:09 pm

    Thanks for the article. It indeed has great information. Couple of suggestions:
    1. Please call out the question mark directional for Hebrew as it is different than Arabic script based languages.
    2. I wonder how over-lining works when letters have diacritics and Shaddah?
    3. For first day of the week, it actually differs per country. I suggest you rely on CLDR.
    4. It would be great if you incorporate the feedback you have in comment in the article as well.

    -6
  9. 16

    Follow this image url :

    https://www.smashingmagazine.com/wp-content/uploads/2017/10/18-Right-to-Left-Development-for-Mobile-Design-preview-opt.png

    This is an Iranian website mobile preview with “Persian” Language texts.
    So, why you just said “Arabic” Language for right to left direction ?

    Racism ….. ?!

    -7
    • 17

      Hi Mohammed,

      The authors used the Arabic language as an example because the article was written based on their experience while developing projects for the Arabic market. We’ll take your words into account and change the image caption. Thanks for the pointer! :-)

      3
  10. 18

    Bandar Abdullah

    November 8, 2017 10:31 pm

    I just wonder do we need to flip everything to fit with Middle East languages? for example the back arrow some apps put it on the right and others put it on the left like what we have in western apps. As a user most apps that I have in my phone from western country which make me more comfortable with the back arrow in the left and I get confused when I use Arabic app using right back arrow.

    -3
    • 19

      Thanks for sharing your experience. BTW, what is your OS language?

      -2
      • 20

        Bandar Abdullah

        November 9, 2017 10:51 pm

        My iPhone is English but for testing I use another iPhone with Arabic language and I found many apps use left arrow for back button even in the Arabic OS such as (Dropbox, Pinterest, Facebook, etc.) In fact, I haven’t face any problem from users about the left arrow in our Arabic apps.

        -2
  11. 21

    Good article, important tips, especially on the mobile navigation front.
    Directional images such as arrows can be tricky especially if you are developing a multilingual website or offering scenarios were users switch between a typical LTR and RTL scenario (actually BiDi is both depending on text or digits for example). For example DIR cannot flip arrow.png for you.
    So, your thoughts on creating RTL versions of images that are called into the UI when the user’s language or locale is detected? E.g. if the language is Arabic, then arrrow_ar.png is called and rendered?

    -2
  12. 22

    Abdelhak Ajbouni

    November 10, 2017 10:28 am

    <3 Tunisia <3 Good article by the way

    -1
  13. 23

    Mohammad Younes

    November 10, 2017 10:48 pm

    Thanks for the article and the included RTLCSS examples. However, The selector renaming configuration example is incorrect, as string maps are bi-directional and only target Selectors/URLs, They do not update declarations such as content.

    I updated the documentation with a detailed example showcasing the intended usage (http://rtlcss.com/learn/usage-guide/string-map/#example).

    Once again, Thanks for the great article!

    -2
  14. 24

    Our team deals with RTL routinely. We work with modular components (i.e. Angular) with component styles. Because we have so many components with a number of styles (SCSS) files, it is not practical to have a separate RTL style file. Since we use SCSS, our solution (for convenience sake) is to use Sass ampersands such:

    .some-selector{
        float: left;
        text-align: left;
        // RTL rules for the same selector using ampersand
        [dir="rtl"] }
    

    This approach made allows us to address both LTR and RTL when making style changes to a particular element, and in a specific component.

    0
  15. 25

    Please fix my SCSS code example for reply 20/21:

    .some-selector{
        float: left;
        text-align: left;
        // RTL rules for the same selector using ampersand
        [dir="rtl"]  }
    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top