Quick guideline for RTL UI
Tags: rtl, language, css, html
Published: 2020-01-27 05:02:21

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

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

3. Just using `direction` CSS property

```css
.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.

The above steps are the basic standard for 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 the 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 situations that came with multiple languages. To summarise,

1. First discuss with the back-ender developers who worked on the localization functionality process and have information about 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zqkc12abblbvmr193jt0.png)

So, when the Arabic language is selected, in the above code it triggers the `custom-rtl` class where all the RTL styling is written.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xnbmjqs4cjbc5yw02472.png)

As I am using SASS pre-processor, I created separate `custom-rtl.scss` file, 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lc3g4qud083do2i6cnio.png)

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.

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

Adding the custom class:

```css
/* 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**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rx2r8n663gdpnt4dzo27.gif)

## **RTL UI for Arabic Language**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jb6pcog8r59ci20lqxwz.png)

## **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 float, 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 a 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 behavior (e.g. opening of the drawer, menus).

## **Resources:**

1. [Adapt Framework Right to Left (RTL) support](https://github.com/adaptlearning/adapt_framework/wiki/Adapt-Framework-Right-to-Left-(RTL)-support "Adapt Framework Right to Left (RTL) support")

2. [Right-To-Left Development In Mobile Design](https://www.smashingmagazine.com/2017/11/right-to-left-mobile-design/ "Right-To-Left Development In Mobile Design")

3. [CSS Tricks — Direction](https://css-tricks.com/almanac/properties/d/direction/ "CSS Tricks — Direction")

So I suggest you give it a try on 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 !!**