Right to Left Styling

General instructions for RTL support.

Firstly RTL is an abbreviation Right-To-Left.

For such languages as Arabic and Urdu.. you need to adapt your app UI to be shown correctly this includes DIVs, texts, images, tables and all elements inside the DOM.

In this quick article I will try to pass my experience and knowledge in such type of tasks, based on resources of course to show you the best steps and techniques to do that in the right way.

This steps is absolutely based on HTML tags and CSS properties.

— Note

So let’s follow the instructions and steps below to achieve the best RTL supported website and apps.

Let’s suppose that we have already a website who needs to add Arabic support as a new feature..

Specific CSS style

First of all I suggest to create new CSS file for our Arabic adaptation, let’s say that our file is named “arabic-theme.css”.

We will suppose that our web page didn’t detect languages dynamically, so our website will be on “www.ourdomain.com/ar”
So in “/ar” will have our “arabic-theme.css”.

Working on HTML

In our Index.html will chnage the html “lang” attribute form English to Arabic.

1.Our default Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>English Page</title>
<link rel="stylesheet" href="style.css”>
</head>
<body>

    <p>This is an test</p>

</body>
</html>

Observe this html line of code <html lang=”en”>, will be changed in our arabic version of index page.

2. Our /ar Index.html:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>صفحة إختبار</title>
<link rel="stylesheet" href="arabic-theme.css”>
</head>
<body>

    <p>إختبار</p>

</body>
</html>

So we changed <html lang=”en”> to <html lang=”ar”>, let’s comment a little about HTML lang attribute its give us the languages of text content on the web, this give our website a lots of advantages in the search results of our website or app.

And we added HTML dir attribute, that used to set base direction of text for display from right to left.

Overriding the floating.

We will make those changes to float the elements or the right to the left and vice versa.

Example:

.content {
   float: left;
}
.side-bar {
   float: right;
}

But the problem with float is make the whole box change his position, so we are forced to change the direction of elements that already inside the box, so you have the right to make change on title as below for example.

.box .title {
   text-align: right;
}

.. and do that for all your elements on measure..

Final words

So by those following guidelines above we will be able to done the RTL support for our website or app, that’s will give us great accessibility and high performance website and great search results.

Resources:

Leave a Reply

Your email address will not be published. Required fields are marked *