Right-to-left 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;
}

For buttons that have hidden text using text-indent, you need to change its value from negative to positive:

.image-button{
	text-indent:-99999px;
}

becomes

.image-button{
	text-indent:99999px;
}

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

Writing a Post in RTL Language

WordPress default visual text editor doesn’t support writing in RTL languages like Hebrew, Persian and Arabic. Therefore, if you’re willing to write a post in one of those languages, you should either :

  • Reinstall / Change your WordPress version to be in that language, which fixes this issue with allowing you as a default to write in RTL.
  • Use this plugin: http://wordpress.org/plugins/wp-rtl/ which adds two buttons to the TinyMCE editor (if you have it) to enable changing text direction from Left to Right (LTR) and Right to Left (RTL).

Was this article helpful?

Related Articles