By totocol on

Hello everyone,

I am trying to set up a multilingual site that has both let to right and right to left languages. While I think it works like a charm, I still want to have everything, including blocks and when content is being created to align the text right whenever I switch languages into a right to left language. I looked around for a bit and I found this addition to the head (I guess they mean between the head tags?) of the page.tpl.php file but it did not have the desired effect (maybe this only works for drupal 5 or maybe I am not suppose to place it between the tags but somewhere else?):

<style type="text/css">
.rtl { direction: rtl; unicode-bidi: embed; }
.ltr { direction: ltr; unicode-bidi: embed; }
<?php if (in_array($language, array('ar', 'fa', 'ur', 'he'))) {
echo 'body { direction: rtl; unicode-bidi: embed; }
p { direction: rtl; unicode-bidi: embed; }
#navigation a { text-align:right; }';
} ?>
</style>

Could anyone provide some advice on how to approach this?.

Thanks in advance for any help

⋅ Categories: Drupal 6.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

You can just put the RTL specific CSS in your RTL stylesheet.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
totocol’s picture

totocol commented

Hi jmburnz

Thanks for your reply

I am not very good with CSS yet. Just to clarify the steps:

Add this to my page.tpl.php (This was a solution for Drupal 4.7 so not sure if it works for 6)

<style type="text/css">
.rtl { direction: rtl; unicode-bidi: embed; }
.ltr { direction: ltr; unicode-bidi: embed; }
<?php if (in_array($language, array('ar', 'fa', 'ur', 'he'))) {
echo 'body { direction: rtl; unicode-bidi: embed; }
p { direction: rtl; unicode-bidi: embed; }
#navigation a { text-align:right; }';
} ?>
</style>

Then Create a styles.css where I add the things that I want with the .rtl selector on them for example:

div.generalbox .rtl {
border:1px solid #EFEFEF;
padding:16px 10px 12px 2px;
text-align:right;
}

Then it all should work?

Thanks in advance

Raul
raulcaceres.me

Jeff Burnz’s picture

Jeff Burnz commented

I suggest you take a look inside the Garland theme directory, you will see a stylesheet called style-rtl.css. This is the RTL stylesheet and it is picked up by Drupal automatically when the site switches to an RTL language.

All you need to do is append -rtl to the stylesheet and Drupal will include it. Say for example you have a tyopgraphy.css file, you can include typography-rtl.php, and automagically Drupal will include it.

You should be using the html element from Garland. It has $variables embedded in it that change depending on the language, this is the primary way the browser will know what language the document is in.

// Garlands HTML element
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

If you are serious about supporting RTL I would strongly advise you to download the Tendu theme. Tendu is the benchmark for RTL theme development in Drupal, its also a starter theme so is a perfect starting point for either your own theme or for a crash course in learning how this technology works.

This is a complex and often confusing subject, read widely and do study Tendu.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
totocol’s picture

totocol commented

Thanks again jmburnz,

I just have one rtl language out of the 6 languages I will be having my website on and my theme has been in development for a while so not sure starting from scratch would be a good approach but I will definitely study Tendu and garland to see how I can modify the theme I am working on that is not any of the contributed ones.

Many thanks again

Raul
raulcaceres.me

totocol’s picture

totocol commented

Hi jmburnz and everyone else.

I have studied Garland and Tendu for some time and also used a similar HTML element like in Garland. I then created a style-rtl.css file and started adding the changes I wanted when on a RTL language using what is used on Tendu and Garland.

Everything is working well on Firefox and on Safari but the theme gets completely broken on IE even if the style-rtl.css file is completely empty. Any idea of where I could start troubleshooting this?. The simple fact of adding the style-rtl.css file is breaking the IE display so I am completely lost on this.

Thanks,

Raul

Raul
raulcaceres.me

totocol’s picture

totocol commented

What's making me feel even more lost is that the issue is only happening on some of the pages. Some of them render properly and some of them just get broken (front, forums and a few others). Any idea on where to start troubleshooting would be great.

Thanks

Raul
raulcaceres.me

totocol’s picture

totocol commented

I have found that Administration Menu module breaks the theme for some versions of IE and when on RTL languages. Just something to keep an eye on. I have reported it in the project page.

Raul
raulcaceres.me

tombigel’s picture

tombigel commented

Thats weird.
Check your theme's HTML structure, Tendu + Admin Menu works perfect together, I know - I wrote Tendu and helped RTLing Admin menu.

IE becomes very "sensitive" to broken HTML in RTL mode - Check that all your DIVs are closed, that the $closure region is not inside any DIV (just before the </body> closing tag)

If you want you can post a link or a screenshot or your themes code, it will help a lot to help you if you still need it.

rusdvl’s picture

rusdvl commented

I also have an issue with IE7 when changing over to arabic. Im using the Zen theme and created my own subtheme from it. It looks like IE7 is not including the main stylesheet. or if it is its not reading it. This is only in IE7. firefox,safari and chrome all work fine...

anyone had this issue before?

UPDATE: found the answer here http://drupal.org/node/382098 as that person suggested, turning on css optimization fixed the issue... weird!