TheLazy.Dev
Portfolio GitHub

Blog

rtl |language |css |html

Quick guideline for RTL UI

nirazanbasnet

⚡ Nirazan Basnet ⚡

Posted on January 27, 2020

Quick guideline for RTL UI

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 */
Enter fullscreen mode Exit fullscreen mode
  1. With the help of CSS attributes 
html[dir="rtl"] .rtlContent {     
  float: left;
  margin-left: 10px;
  margin-right: 0;  
  padding: 0 0 0 10px; 
}
Enter fullscreen mode Exit fullscreen mode
  1. Just using direction CSS property 
.main-content {
  direction: rtl;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

  1. 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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Results

Alt Text

RTL UI for Arabic Language

Alt Text

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

  2. Right-To-Left Development In Mobile Design

  3. 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 !!

💖 💪 🙅 🚩
nirazanbasnet
⚡ Nirazan Basnet ⚡

Posted on January 27, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Quick guideline for RTL UI
rtl Quick guideline for RTL UI

January 27, 2020