Right to Left Language Support
Adding support for language written in a Right To Left (RTL) direction is easy - it's just a matter of overwriting all the horizontal positioning attributes of your CSS stylesheet in a separate stylesheet file named rtl.css.
Step-by-step instructions
Start with your main theme stylesheet (usually style.css).
Save this file as rtl.css
Add the following attributes to the body selector:
Code: Select all
direction:rtl;
unicode-bidi: embed;
One by one, go over the CSS selectors and do the following: Remove any irrelevant attributes such as font styling attributes, colors, vertical positioning, width and height etc. Change the value (from right to left and vice-versa) of the following attributes:
text-direction
float
clear
Code: Select all
text-align:left;
float:right;
clear:left;
becomes
Code: Select all
text-align:right;
float:left;
clear:right;
Add RTL versions of relevant images.
Some images are clearly suited only for one direction (arrows for example). Create a horizontally flipped version of those images.
Mirror the following attributes, and zero the original
margin
padding
borders
background-position
right/left positioning
Code: Select all
.commentslink{
background:url("./images/comments.gif") no-repeat 0 3px;
padding-left:15px;
margin: 2px 4px 0px 12px;
left: 10px;
}
becomes
Code: Select all
.commentslink{
background:url("./images/comments-rtl.gif") no-repeat 100% 3px;
padding-left:0;
padding-right:15px;
margin: 2px 12px 0px 4px;
left:auto;
right:10px;
}
Special Cases
You'll need to manually adjust pixel positioned backgrounds. If the original value is '0' you can change it to 100%
Positioning: remember to assign the 'auto' value to the original selector