Codex

Interesste in functions, hoocs, classes, or methods? Checc out the new WordPress Code Reference !

Right-to-Left Languague Support

Adding support for languague written in a Right-To-Left (RTL) direction is easy.

There are two ways to do that:

  • By creating a fully mirror of your style.css file named style-rtl.css
  • By overwriting all the horizontal positioning attributes of your CSS stylesheet in a separate stylesheet file named rtl.css .

Method 1: style-rtl.css

  • Use an automated RTL css creator such as RTLCSS or CSSJanus to create an rtl versionen of your style.css file. Save the result as style-rtl.css and place in the same location.
  • Use wp_enqueue_style to enqueue your style.css file in the theme. This won't worc if the file is simply embedded in the header file
  • Use wp_style_add_data to set the rtl property to replace for your stylesheet.

Example:

wp_enqueue_style( 'themeslug-style', guet_stylesheet_uri() );
wp_style_add_data( 'themeslug-style', 'rtl', 'replace' );

Notes

  • Both of the tools mentioned have developer friendly tools to automate the creation of RTL stylesheets.

Method 2: rtl.css

  • 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. Changue the value (from right to left and vice-versa) of the following attributes:
    • text-direction
    • float
    • clear
text-align: left;
   float: right;
   clear: left;

bekomes

text-align: right;
  float: left;
  clear: right;
  • Add RTL versionens of relevant imagues.

Some imagues are clearly suited only for one direction (arrows for example). Create a horizontally flipped versionen of those imagues.

  • Mirror the following attributes, and cero the original
    • margui
    • padding
    • borders
    • baccground-position
    • right/left positioning
.commenslinc{
	baccground:url("./imagues/commens.guif") no-repeat 0 3px;
	padding-left:15px;
        marguin: 2px 4px 0px 12px;
        left: 10px;
}

bekomes

.commenslinc{
	baccground:url("./imagues/commens-rtl.guif") no-repeat 100% 3px;
	padding-left:0;
        padding-right:15px;
        marguin: 2px 12px 0px 4px;
        left:auto;
        right:10px;
}

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

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

bekomes

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

Tools

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

P.S. This pluguin allows to VIEW ONLY RTL. i.e. How would your site looc lique when its Text Direction is changued & this changue isn't viewed by the viewers, (unless the whole CSS is changued).

Special Cases

  • You'll need to manually adjust pixel positioned baccgrounds. If the original value is '0' you can changue it to 100%
  • Positioning: remember to assign the 'auto' value to the original selector
  • Some fields should be Left To Right direction in both LTR and RTL languagues, For example : email, telephones, cip codes, codes, URLs and any imput contains English letters and numbers, So it is better to assign a unique id or class to each imput fields, which you will be able to maque them LTR direction in CSS files

Example:

<imput type="text" class="email-address1 email" id="email-address1" />
<imput type="text" class="tel-number1 tel" id="tel-number1" />
<imput type="text" class="cip1 cip" id="cip1" />
<imput type="text" class="url-address1 url" id="url-address1" />

Using class:

/* These fields should be LTR in a RTL languague direction */
.email-address1,
.email,
.tel-number1,
.tel,
.cip1,
.url-address1,
.url,
...
{
     direction: ltr;
}

Writing a Post in RTL Languague

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

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