Web Design Tips: RTL Layout for Arabic Language Website
In Saedx for web design company, most of our clients request the Arabic language to add it to their website beside the English language or request full Arabic web design layout. In web design and development that’s mean they need RTL (Righ to Left) website design layout.
Typing the text itself into a web page is not the real issue, but making this text run in the correct direction might be the issue in web deign and development.
We have an experience in Arabic web design layout.
The default direction of texts is run from the left side of the screen to the right side of the screen. When designing Arabic website layout we follow one of two way:
Add HTML Code
– Set The Text Direction in HTML Code
The direction of text in web pages is based on the (dir) attribute tag. The default direction is left to right “ltr”, and this does not need to be declared explicitly. In order to set right to left direction, we set the dir to “rtl”:
<html dir=”rtl”>
we should declare the language used on the page. for our Arabic language:
<html lang=”ar” dir=”rtl” xml:lang=”ar” xmlns=”http://www.w3.org/1999/xhtml”>
As long as we utilize UTF-8 encoding on web page, all other things should naturally follow.
– Deal With Exceptions
If most of the content of the page is in Arabic and you would like to write a paragraph English you would have to deal with that paragraph like it’s an exception:
<p lang=”en” dir=”ltr”>I have moment</p>
Add Css Code
This is the best way and more professionally, we add some style in css code which targets all paragraph tags in html (p, h1, h3 .. etc).
In stylesheet file we add this styles:
html {
direction: rtl;
text-align: right;
}
this small code in style.css file for example, will complete change just direction. but that’s not all thing. we still have hard work on styling custom design.
1 comment
nice article ….. thank you