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.
- 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 eitherltr(left-to-right) orrtl(right-to-left).
<html dir="rtl"> /* which is a RTL state */
<html dir="ltr"> /* DEFAULT STATE */
- With the help of CSS attributes
html[dir="rtl"] .rtlContent {
float: left;
margin-left: 10px;
margin-right: 0;
padding: 0 0 0 10px;
}
- Just using
directionCSS 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.
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,
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.
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.
So, when the Arabic language is selected, in the above code it triggers the custom-rtl class where all the RTL styling is written.
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.
- 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
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:
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 !!
Top comments (0)