Development Seed Blog
Fantastic RTL Support in Drupal
Getting Webforms Into Arabic and Other Right-to-Left Languages
Getting Webforms Into Arabic and Other Right-to-Left Languages
Ever think about trying out Drupal's right-to-left (RTL) language support for languages like Arabic or Hebrew? We got to test it out for a project we're working on with the SEEP Network, a support system for microfinance and microenterprise communities around the world. Currently they're working to build the capacity and improve the services and performance of organizations within national and regional-level networks of microfinance institutions. To get feedback on their efforts and track changes that occur, they needed a tool that would allow members of these networks to give them feedback directly. And since these members speak many different languages - including RTL languages like Arabic - we got to try out Drupal's support for this while building their survey tool.
The key to RTL language support in Drupal 5 is the internationalization module (i18n), and Jose reminded me that there's a great documentation page on using RTL languages on Drupal sites here.
In a nutshell, the i18n module allows you to define a language as being a right-to-left language. Then when the site is being viewed in that RTL language, you can make your theme aware of this fact and have it call different or additional CSS stylesheets in order to theme according to the direction of the language. In the case of this webform, we were simply able to call an additional stylesheet after all the other stylesheets were called, which adjusted all the text from left-to-right to right-to-left.
In our case, we were doing some manipulations of the default CSS files so a good place to stick in this call was in our template.php file, where we could add in the extra style sheet. This also allowed us to add the stylesheet to the end of the styles variable, so that it's called last. And since the stylesheet is called last, it can override any declarations made by all the previous stylesheets.
Here's what the code looked like:
function _phptemplate_variables($hook, $vars) {
switch ($hook) {
case 'page':
// fetch the array of css files loaded by the theme
$css = drupal_add_css();
// if we're dealing with a RTL language, add in our stylesheet
if (module_invoke('i18n', 'language_rtl')) {
$css['all']['theme'][$path.'/networks/style-rtl.css'] = true;
}
// put the array of CSS files back into the 'styles' variable for phptemplate.
$vars['styles'] = drupal_get_css($css);
default:
return array();
break;
}
For now, the style-rtl.css simply has the following in it:
body {
direction: RTL;
}
which so far seems to cover the area of the website where we need the RTL effect to take place.
If you're looking to run your entire site in RTL, there are entire themes that work to do this. Check out some of these themes - just search for "RTL" on that page. Have fun!
It even works in IE.
Comments
drupal 5 rtl support
Zohar is right , drupal 6 have better support in BIDI
but even in drupal 5 you can use the RTLed themes that israel drupal community have RTLed,some of them have build in support that loads RTL css files if exists of the core & contrib modules
you can download some here http://drupal.org.il/rtl-themes
(not all of them have this support)
try bidi bluebreeze here : http://drupal.org.il/%D7%A2%D7%99%D7%A6%D7%95%D7%91/bluebreeze
you will need to download the core rtl files from Hebrew drupal installation profile
http://drupal.org/project/he
drupal_add_css
Is there a benefit to adding elements to the $css array in that style? I've always just called
drupal_add_css('/networks/style-rtl.css', 'theme', 'all', TRUE);$vars['styles'] = drupal_get_css();
While I see what you are doing should produce the same results, I was just wondering if there was a reason for doing it that way that I can't see. Does it result in any change in the caching of CSS with the CSS preprocessor?
You could do it that way too.
Hi Michael, in this case we are acting on other parts of the array of stylesheets which is not shown in this snippet, so in this particular case it was the best place to add it. You can do as you state as well. Although, if your RTL stylesheet is called before your main stylesheet, I guess it's possible some declarations in your RTL could get overridden.
Ian
RTL built-in support in Drupal 6
...and in Drupal 6 we got RTL support into core!
Besides identifying the directionality of the current language, we also add RTLized CSS files to all the core's CSS files. This means that for every LTR CSS rule, we have an RTL override.
Themers are encouraged to mark LTR rules in their CSS files, to ease their RTLization.
But it's oh so much easier :-)
Built-in in 6
Yes, you're right. In the example given in this post, the site is built on 5 and uses the i18n.module to handle the RTL. However, in 6 this is built in. If anyone is interested in an overview of the differences in multilingual handling between Drupal 5 and 6, you can read more about that in this post.
thanks,
Ian
Post new comment