0
How to RTL your site ? step by step tutorial
10 July 2011
Hello ,
today I want to talk about how one can make his site from right to left using css edits .
this entry will be general talk , it can be used for all kinds of websites .
step 1 - directions :
you need to edit directions in your css
search for
also go to your html and add dir="rtl" to the <html> tab
it will be like
step 2- text align :
you need to swap text-align in your css
for example
if you have
step 3 - positions :
in your css you can see sometimes
you should make it
step 4 - paddings :
padding can be right in different methods .
you can find it sometimes like
in this case you can change it to be
sometimes you can see it as
the values here 10,3,7,25 (top , right , bottom , left ) .
so you need to swap second and fourth value
step 5 - margin :
please see step 4 (same as padding )
step 6 - float :
also float you should swap .
for example if you have
step 7 - background images :
you do not need this step always ,
but sometimes you need to edit images position
for example
-----------------------------
this is the basic edits knowledge which you need for RTL .
so please do not think it will be 100% perfect .
Thanks .
today I want to talk about how one can make his site from right to left using css edits .
this entry will be general talk , it can be used for all kinds of websites .
step 1 - directions :
you need to edit directions in your css
search for
body{
add in it direction:rtl;it will be like
body{ direction:rtl; }
also go to your html and add dir="rtl" to the <html> tab
it will be like
<html dir="rtl">
step 2- text align :
you need to swap text-align in your css
for example
if you have
text-align:left;you should make it
text-align:right;and vice versa .
step 3 - positions :
in your css you can see sometimes
left:5px ;
you should make it
right:5px ;please note that sometimes you need to make this like
right:5px ; left:auto ;
step 4 - paddings :
padding can be right in different methods .
you can find it sometimes like
padding-right : 5px ; padding-left: 10px ;
in this case you can change it to be
padding-left : 5px ; padding-right: 10px ;
sometimes you can see it as
padding: 10px 3px 7px 25px;
the values here 10,3,7,25 (top , right , bottom , left ) .
so you need to swap second and fourth value
padding: 10px 25px 7px 3px;
step 5 - margin :
please see step 4 (same as padding )
step 6 - float :
also float you should swap .
for example if you have
float: right ;you should make it
float: left ;and vice versa .
step 7 - background images :
you do not need this step always ,
but sometimes you need to edit images position
for example
#sidebar{background:#000 url('side.png') no-repeat top left; }
it must be #sidebar{background:#000 url('side.png') no-repeat top right; }
please to not forget to flip your image -----------------------------
this is the basic edits knowledge which you need for RTL .
so please do not think it will be 100% perfect .
Thanks .
