Codex

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: 
  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 
   text-align: left;
   float: right;
   clear: left;

becomes 

  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 
.commentslink{
	background:url("./images/comments.gif") no-repeat 0 3px;
	padding-left:15px;
        margin: 2px 4px 0px 12px;
        left: 10px;
}

becomes 

.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;
}

Tools

The RTL Tester plugin allows you to easily switch the text direction of the site: http://wordpress.org/extend/plugins/rtl-tester/

P.S. This plugin allows to VIEW ONLY RTL. i.e. How would your site look like when its Text Direction is changed & this change isn't viewed by the viewers, (unless the whole CSS is changed).

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
Retrieved from "http://codex.wordpress.org/Right-to-Left_Language_Support"

Codex Resources