Quick guideline for RTL UI

Nirazan Basnet
YoungInnovations' Blog
4 min readApr 26, 2018

--

The UI for languages that are written and read from right-to-left (RTL) such as Arabic, Hebrew and Urdu, are flipped to ensure that the content is easy to understand and is compatible with the RTL languages.

Let’s get started,

The following are the basic steps I followed to make the UI compatible with RTL languages.

  1. The first step towards making a web page RTL is adding the code dir="rtl" to the <html> tag —The directionality can be set to either ltr (left-to-right) or rtl (right-to-left).
<html dir="rtl"> /* which is a RTL state */<html dir="ltr"> /* DEFAULT STATE */

2. With the help of CSS attributes

html[dir="rtl"] .rtlContent {     
float: left;
margin-left: 10px;
margin-right: 0;
padding: 0 0 0 10px;
}

3. Just using direction CSS property

.main-content {
direction: rtl;
}

The direction property in CSS sets the direction of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.

Above steps are the basic standard to RTLing the content of any website. But when it comes to the large application we need to think of the whole system from Right to Left aspect. We can achieve that by flipping CSS properties and rules. But major thing to keep in mind is that we should understand where and how are we flipping them.

Let me share my experience on a project I recently worked on, DevelopmentCheck. We have multiple languages on this project, among them three RTL languages, so RTL styling was necessary to handle all the situation that came with multiple languages. To summarise,

  1. First discuss with the back-ender developers who worked on the localisation functionality process and have information of all the languages that we are dealing with.
  2. Add dynamic class to the body tag so that when we encounter RTL language, like Arabic, we can style the content to the respective class.
custom-rtl class

So, when Arabic language is selected, in the above code it triggers thecustom-rtlclass where all the RTL styling is written.

custom-rtl.scss

As I am using SASS pre-processor, I created separate custom-rtl.scssfile, hey don’t be mistaken, we are not creating a separate css file over here. So, whenever the custom-rtl class triggers, RTL styling applies.

custom-rtl.scss content

3. As we are going over the whole website we need to think for every content which is flipped from right to left which can be tedious and very confusing at the beginning. So, we should always check these few things while styling for RTL UI:

Adding direction = "rtl” is the first step. This property almost flips the entire interface.

/* RTL-styling */ - Overriding the float property.custom-rtl .float-left{
float: right;
}
.custom-rtl .float-right{
float: left;
}

Adding the custom class:

/* LTR-styling */.exampleclass {
position: absolute;
left: 20px;
margin-left: 30px;
float: left;
padding-left: 15px;
}
/* RTL-styling */ - Overriding the ltr CSS styles.custom-rtl .exampleclass {
left: auto;
right: 20px;
margin-left: 0;
margin-right: 30px;
float: right;
padding-left: 0;
padding-right: 15px;
}

Results

RTL UI for Arabic Language

RTL Arabic language

Conclusion

So by following the tips closely, you should be able to navigate the challenging RTL development and deliver a functional, user-friendly result.

To conclude,

  • The major CSS properties that we need to take care of arefloat, margin-left, margin-right, padding-left, padding-right, left, right, direction.
  • We should follow the text displacement in correct RTL format such as considering signs as full stop, exclamation mark, question mark, etc. Also we should also handle the directionality of images and icons appropriate for RTL — e.g. arrows, progress bars, icons, etc.
  • In RTL we should maintain the position and directionality of page and component layout and movement including lists, tables, etc.
  • Animation and easing directionality must be adjustable in RTL behaviour (e.g. opening of drawer, menus).

So I suggest you give it a try in your project and enjoy!

If you have found this blog very helpful then please feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Keep on Hacking, Cheers and to support me you can buy me a coffee!!

--

--