RTL language's support

Thank you so much!

We may do this in the future. Our themes are structured in such a way to keep this in mind. However, it's not a top priority at this time. We'll consider this a vote for it though :)

Looking forward for a RTL version :-)

Subscribing..

Based on the conventions stated here - http://drupal.org/node/132442,
I have an initial version which can be seen here - http://www.fosse.tv.
You need to add the style-rtl.css file to the theme directory and the raquo-rtl.png to the images file.
It's a start and obviously it can get better, relasing early and hopefully often...
Lior

The style-rtl.css was not uploadable so it can be wgeted at "wget http://fosse.tv/themes/acquia/acquia_marina/images/raquo-rtl.png"
It's attached below as well...

style-rtl.css

#main{ direction:rtl; }
#sidebar-first ul li, #sidebar-last ul li, #postscript-wrapper ul li { background:transparent url(images/raquo-rtl.png) no-repeat scroll right 0.833em; list-style-image:none; list-style-type:none; padding:0.2em 1em 0 1.333em; }
#content-tabs{ float:right; }
#content-inner{ clear:both; }
#content-tabs ul.primary, #content-tabs ul.secondary { clear:right; float:right; }
#user-login-form { text-align:right; }
#primary-menu {float:right;}
#user-login-form div.item-list ul li, div.terms ul li { list-style-type:none; margin:0;text-align:right; }

@liorkesos, your patch doesn't work so good on my site
Many things are not aligned well, and content goes down below blocks on pages
that use blocks on both sides.

I tried to play with it myself and created a css file that works better on my site
This is an initial development version and is based on copy of style.css (not yet aggregated)
I publish it here so maybe we can join forces.

In my site it works fine on firefox, but on iExplorer not so good
I hope I'll have the time soon to continue working on it, I really like this theme

To see what I've done, just diff between the original theme style.css and the attached style-rtl.css

subscribing

@Optalgin, As I mentioned this is the very beginning.
Let's work together on getting it better, you from IL?
I'm happy it's being improved and that there is interest in this direction...
Jay I'd be happy to help you guys maintain the rtl version, I approached Robert Douglass about this because we're an Acquia partner and I'd like it to be comitted to Acquia drupal and to have a great hebrew (or arabic) starter theme for my clients.
best regards
Lior

@liorkesos - Honestly, i have no experience w/ RTL themes/theming. What would be the best approach? Does it make sense that the RTL version should be a sub-theme or can we simply add the style-rtl.css to the theme's .info file?

please > the style-rtl.zip above doesn't work withe explorer 6 fine. it work fine withe firefox only

@jwolf: the style-rtl.css should just conain the overrides to the original style.css. Take a look at the core themes to get an idea. Notice, the /* LTR */ comment in the style.css files

i attach style file that will be support arabic language with change direction from ltr to rtl

@ahmedwali:
Thanks for your file but the proper way to do it is to make a file that only contains the css overrides of the style.css not a replacement of that file and call it style-rtl.css. This guarantees that a single theme can accommodate both directions for mixed language sites instead of two separate themes. It would also make it easier to review and update that file when errors are found.

I now found this link which clarifies my point
http://drupal.org/node/132442#language-rtl

@jwolf - if you have a css file, say named style.css, and you include an rtl stylesheet called style-rtl.css, Drupal will pick this up automatically when languages are switched to an RTL language.

This works for any stylesheet afaikt - e.g. I use a layout.css, and thus have layout-rtl.css which Drupal picks automatically. In my Genesis theme I am going whole-hog and flipping the sidebars for the full mirrored effect.

One thing that caught me out initially is with IE, it does not automatically switch Encoding (which makes a difference to how the page is rendered), you have to manually switch it from "Left to Right" to "Right to Left" (page > encoding).

I also normally included CSS support for bidi (bidirectionality) since Drupal can support this - e.g. a few posts in Hebrew but the UI in English. The top of my main rtl stylesheets looks like this:

@charset "utf-8";
/* $Id: base-rtl.css,v 1.5 2008/11/04 00:02:46 jmburnz Exp $ */

/**
 * @file base-rtl.css
 *   Right to Left language support.
 */
	

html, body {direction:rtl}

bdo[dir=ltr] {direction:ltr; unicode-bidi:bidi-override}
bdo[dir=rtl] {direction:rtl; unicode-bidi:bidi-override}
*[dir=ltr] {direction:ltr; unicode-bidi:embed}
*[dir=rtl] {direction:rtl; unicode-bidi:embed}

address, blockquote, body, dd, div, dl, dt, fieldset,
form, frame, frameset, h1, h2, h3, h4, h5, h6, iframe,
noscript, noframes, object, ol, p, ul, applet, center,
dir, hr, menu, pre, li, table, tr, thead, tbody, tfoot,
col, colgroup, td, th, caption, a {unicode-bidi:embed}

Hope this helps some towards your efforts - good luck, I know it can be a tricky thing to get right esp with IE...

@jmburnz - Awesome! This definitely helps clarify things. Thank you.

I now find some time to work on this. All the issues I am aware of are now solved. Please, comment if there is still any issue remaining.

Thanks so much! We need to get a multilingual test site running and then will look into integrating this with the official release.

munzirtaha I tried your Solution but it didn't work perfectly
see the photo for more information(In the attachment or the following URL):
http://www.mexat.com/vb/attachment.php?attachmentid=696926&stc=1&d=12298...

I hope to find a good solution .

@The Crash #21 - "won't fix" is a message from the maintainer that they won't fix the issue, not that the patch does not work.

I'll set this to active, since no actual patches have been posted, only a complete version of the theme afaikt.

O.K jmburnz I got it..

still waiting for a solution

thank you all very much , bout its still not working with explorer 6

@The Crash: I am using Linux with firefox and I don't have access to Windows or IE to test. That's said, to fix IE issues, the acquia theme developers should release an update that doesn't load css files by names hard-coded in the page.tpl.php. So, instead of loading ie6-fixes.css and ie7-fixes.css, the code rather load $ie6_styles and $ie7_styles where the variables are defined in template.php as

function acquia_marina_get_ie6_styles() {
  global $language;

  $ie6_styles = '<link type="text/css" rel="stylesheet" media="all" href="' . base_path() . path_to_theme() . '/ie6-fixes.css" />'. "\n";
  if (defined('LANGUAGE_RTL') && $language->direction == LANGUAGE_RTL) {
    $ie6_styles .= '      <style type="text/css" media="all">@import "' . base_path() . path_to_theme() . '/ie6-fixes-rtl.css";</style>'. "\n";
  }

  return $ie6_styles;
}

function acquia_marina_get_ie7_styles() {
  global $language;

  $ie7_styles = '<link type="text/css" rel="stylesheet" media="all" href="' . base_path() . path_to_theme() . '/ie7-fixes.css" />'. "\n";
  if (defined('LANGUAGE_RTL') && $language->direction == LANGUAGE_RTL) {
    $ie6_styles .= '      <style type="text/css" media="all">@import "' . base_path() . path_to_theme() . '/ie7-fixes-rtl.css";</style>'. "\n";
  }

  return $ie7_styles;
}

As soon as this is committed, I would test in IE and provide a working patch if not done already.

munzirtaha thank you for reply..

I tested it in Fire fox and it is the same..

so am I obliged to add your code into template.php or what?

@The Crash: No, your site should display properly in FF with no need to modify template.php. If you can make a live demo site, I would take a look at what you are doing wrong. It works great for me.

I made some small changes to the style rtl file. On FF it looks good.
Maintainers- would it be possible to commit the style-rtl and images ( images at #18) ? it will be easier to diff and patch.

@Ozeuss - Your style sheet is way out of date. You're modifying an old style sheet dated 2008/10/18. Much has changed and been fixed in the last two months. Please update to the latest.

My bad, the attached is a modified version of the latest style sheet, and the attached images are the ones that munzirtaha provided.

@munzirtaha thank you
@Ozeuss - Your style sheet worked with me ..thank you

I have merged HEAD w/ the DRUPAL-6--1 branch. I also added initial RTL support. RTL support is currently only in HEAD while we work out any issues. Once we have tested and fixed any problems w/ HEAD I will create a DRUPAL-6--2 branch and thus a new Acquia Marina 2.x release.

I took what munzirtaha and Ozeuss submitted and merged the two. I did not create the ie-styles variables as suggested in munzirtaha's comment @ http://drupal.org/node/315990#comment-1169043 - Let's hold off on that for now and see how things look w/out this modification.

Unfortunately, I am unable to test RTL at the moment for lack of a multilingual test site. If anyone is interested in helping me set up a multilingual test site, which will be accessible to all, please email me via my contact form.

Thank you to everyone who has helped w/ this so far. I look forward to your feedback.

For those uncertain of how to get a copy of HEAD:
cvs -z6 -d:pserver:anonymous:anonymous@cvs.drupal.org:/cvs/drupal-contrib checkout -r HEAD -d acquia_marina contributions/themes/acquia_marina

Thanks, jwolf.
We've enabled the rtlized version in head in drupal.org.il (for registered users in the site) for testing purposes- I'm attaching a screenshot.
So far looks ok....

FF3 on Linux - looks good.

The main problem remaining is IE support, any one is familiar with IE bugs and workarounds?

subscribing.

@munzirtaha - I'll have our designer look at this and try to help.

Thank u in advance ((( asak )))
looking for it soon :)
salam (( mean peace in arabic ))

I just checked out head, it seems styles have been changed a bit since my patch, and "broke" the rtl of listing (maybe be by introducing "#sidebar-first ul li,"?)
so i guess a new patch is due.

Hi,
I've no css knowledge, but i encourge you css gurus to have a look at Tendu project http://drupal.org/project/tendu, I think he did good job with RTL css, maybe you could get some ideas as they did in Zen http://drupal.org/node/283978#comment-1257696

time just flies...

Tendu is by far the best (and probably only real) RTL compatible theme (no offense...).
It makes mixing RTL and LTR websites much easier.

I'll give this a push and try to help...

Just an update that we haven't forgotten about this. Tendu is great, I looked at that recently too. We just did a RTL theme for a client and have built an English/Arabic site for testing... so the pieces are getting into place for us to be able to officially release this.

Thanks for your patience :)

hey stephthegeek, here's one extra drupaller appreciating your work and looking forward to using an RLTed acquia.

cheers!

@stephthegeek - where's this standing? we would like to help.

If i understand correctly, the situation now is that some things have changed in the LTR version that need to be ported.
Another issue is the IE support.

From checking out the working version on Drupal.org.il it seems things work fine in RTL but not in IE - some parts are misplaced...

How can we help?

+1 here. I'm ready for help.

subscribe

Hello, is there any new updates about this issue?

I just added RTL support to the DRUPAL-6--1 branch.
RTL will be available in the 6.x-1.x-dev download (snapshot download dated post April 21).

We really need your help testing this. Please let us know if anything is out of place.

I'm gonna test it......thanks guys...

Hello,

I have been trying to provide RTL support to another theme very similar to acquia marina. I also experience problems on IE with the navigation menu floating in the wrong place on first load of the page. after reloading the page a few times the block comes back to the right position. find attached screenshots. Any idea of what this could be?. Any tip on how to fix it?. it only happens on IE and on RTL languages.

There is some issues with IE7. menus placed inside blocks disappear!!!!. I mean not the block only links.

Screenshots and links helps us figure out what's going on.

thanks for this great theme!

i have modified and added some css in style-rtl.css file specially for :

- adjustment of openid link for RTL support! (in line 49 and 58 of the attachment css file)
- alignment of the block title to the left (line 310)
- correct of the problem with Primary menu with dorp down and preface block. (line 332 to 348)
- added a float for the block-icon to the right (witch in icons.css file)

i still have problems with IE6 (right blocks disappear to left), i think that is caused by iepngfix, (no problem when i disable the IE PNG Fix). there site

Images are distorted, or this script breaks my page layout.
When applied to images without set dimensions, this script will try and "guess" the correct image size and apply that. If it gets it wrong, give your images a definite width and height.

There is a screenshot in the attachment file.

it will must to create 2 separate files : ie6-fixes-rtl.css and ie7-fixes-rtl.css, and added 2 functions to the template.php to generate IE css links for LTR and RTL languages, called phptemplate_get_ie7_styles and phptemplate_get_ie6_styles!

Now, i modified the page.tpl.php in the lines 13 & 16, to call these 2 functions.

in the ie6-fixes.rtl.css, i have added a position: static to the class block in div, to resolve the problem blocks with a texts in LTR Languages in RTL block (in multilingual site). and a position: relative to the block icon.

So Now it works fine in IE6 but not tested in IE7, if some one can test it!

@netdz : I used your edited version , I think it's good but a problem with IE7 still happening , When the mouse move over the button (Search or Login Button) then the hole block components change its position (from right to left) , look at the picture in attachments .
There is no problem with FireFox And Opera ,

another point , I remember that I donwloded a CSS from this topic that makes position of the icons from tight to left to fit with the text labels , but now you return it like the LTR version , see the picture in attachments .

I modified the ie7-fixes-rtl.css file, if you can test it!

also i have a problem with node tabs that not displayed in ie6 & ie7, so you find a new style-rtl.css file in the zip attachment witch put it in right!

For the second point, yes the icons are in the right, but i changed the title alignment to the left, to have the same look when change from LTR version to RTL version in multilingual site!

tell me if the problem still happening.

@netdz - Thank you , it works with IE7 perfectly , I do little edits on style-rtl to make the correct direction for RTL Menus titles , it's in attachments (every edit I made , I write /*Edit*/ before it).

but I faced a new problem , a strange one .When I go to forum , then the direction become LTR , although the Css's of forum Module is edited and work RTL in any other style , this problem occurs just with IE7 , and I noticed that the menus titles font become normal (It was Bold) , see the picture in attachments please , is it a problem with IE 7 ?

I think that problem comes form the additional module that you use for the forum! What module you use for this ?

For your edits in the css file, it work if we want the block icons in the left with the title to the right! but i think that if the block icons are in left in the LTR version, it must be to the right in the RTL version (like in a mirror).

You can take a look here (example of multilingual site French/Arabic)

@netdz : I'm using Advanced Forum:

http://drupal.org/project/advanced_forum

in any other style , it works correctly with RTL , and with Acquia Marina it works RTL in FireFox and Opera , But It make an error in IE7 .

-in RTL languages the text must be start from the right , and that is the correct way , anyway it's not big deal .

Latest RTL version can be downloaded from here. The latest corrections were expanded in order. Now it works with IE7 / IE8.

You can view it in action at adama.net - a Hebrew website. Does it work with IE6?

The following issues still exist:

1. Primary links should be on the right. But somehow - the latest version made them go on the left for Firefox.

2. Dropdown primary-links menus no longer work.

3. The block titles should be right-aligned and the block icons should be left-aligned, like in the previous acquia-marina conversion in the late months of 2008 (see in the beginning of this thread) - let's merge it.

Issue #3 is solved by modifying style-rtl.css and putting 'right' instead of 'left' in the following CSS rule:

#sidebar-first h2.block-title,
#sidebar-last h2.block-title,
#postscript-wrapper h2.block-title {
  padding: 8px 46px 6px 8px;
  text-align: right;
}

i checked adama.net with ie6, i attached the screenshot, and ie6 crashes many times with this site.

BTW: to test ie6, install virtual pc 2007 with sp1 ( from microsoft free)
http://www.microsoft.com/downloads/details.aspx?familyid=28C97D22-6EB8-4...

then download Internet Explorer Application Compatibility VPC Image:
http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4...

Once you have completed the download, double-click file to expand the VHD file. Start Virtual PC and create a new VPC, and point to the files you just expanded.

@levavie - you need to set the primary links to float: right, to override the float:left.

Confirmed, IE6 crashes, not sure why at this stage.

An effort has been made to improve RTL support in the 2.x branch of this theme.

Please try the 2.x development snapshot
http://ftp.drupal.org/files/projects/acquia_marina-6.x-2.x-dev.tar.gz

Release notes for 2.x dev snapshot:
http://drupal.org/node/472094

We are interested in improving what has already been done in the 2.x branch and any feedback is welcome.

Best way to test IE6 is to use IETester, which loads all IE browser versions simulanously in different tabs.

The 2.x branch works much worse then my linked version - so I've reverted back to the 1.x version.

I've now tested http://automati.biz as well - still problems with IE6.

The 2.x branch works much worse then my linked version

@levavie - Care to elaborate on that?
Providing details helps us all.

@jmburnz, setting primary links to float right causes them to disappear almost completely on explorer 6+7 (except the leftmost link tab which is still visible on a wide screen - 1280 pixels). CSS hacks were not enough, but I've managed to make them visible once again on all IE versions by planting the right rule on ie6-fixes-rtl.css and ie7-fixes-rtl.css.

Code for style-rtl.css

#primary-menu {
  float: right;
}

Code which needs to be added to ie6-fixes-rtl.css :

#primary-menu {
  float:left;
}

Code which needs to be added to ie7-fixes-rtl.css:

#primary-menu {
  float:left;
}

@jwolf:

Also, I've removed the left ("last") column on automati.biz because the adsense ads (old code) slightly go over the left column in IE7 (see the 1st image attached)

Now, with two columns, IE7 starts to become workable, but IE6 still isn't. it still shows all automati.biz blocks all right-aligned, one below the other.

All tests were done using my custom 1.x acquia marina version linked above (I've updated the link to contain the updated code).

I've tried upgrading to acquia marina 6.x-2.x but reverted back to my custom 1.x acquia marina - symptoms were too severe with the 2.x version:
* On 2.x - Even the IE7 display looks similar to how my version looks on IE6 : All automati.biz blocks all right-aligned, one below the other: first those on the right sidebar, then those on the main content area, etc... (see the 2nd image attached).
* Also, 2.x has no rounded buttons, like my version.

Amnon

I've added position:absolute and zoom:1 to the following statement on ie6-fixes-rtl.css:


body.layout-first-main #content-wrapper {
width: 700px;
position:absolute;
zoom:1;
}


Now it seems to work without drifting - but IETester is now stuck when rendering IE6 pages.

Will somebody with an actual IE6 test it on his/her own computer?

Thanks

Amnon

Switched to another template. The buggy Acquia Marina RTL template can still be viewed by registring & logging into http://adama.net

Disclaimer: I'm new to Drupal (using acquia_marina-6.x-2.x-dev.tar.gz), and I have very limited css skills (which is my way of saying pardon any newbieness that may follow ;) ).

I'm getting a weird menu "side effect" when enabling expanded menus on my primary-links on both firefox and IE8.

Whenever I enable this feature the layout seems to expand (to an unreasonably side-scrollable size) and at the far left side of the screen I get the expandable bits of my drop down menus floating around acting all jerky.

This, oddly enough, does not seem to happen with Safari.

Help? is anyone else experiencing this? is there a fix? (I briefly reviewed the discussion on this thread but perhaps I'm missing something?)

*** Edited to add: ***

For firefox changing "left: -999em;" to "left: 999em;" on style.css seemed to fix the problem, but caused an opposite problem on Safari *laugh*.

Original Code:

#primary-menu ul.menu li ul {
  background: transparent url('images/drop-bottom.png') no-repeat 0 bottom;
  left: -999em;
  opacity: 0.95;
  margin: 0 0 0 -10px;
  padding: 2px 0 4px;
  position: absolute;
  width: 144px;
  z-index: 2;
}

Fix:

#primary-menu ul.menu li ul {
  background: transparent url('images/drop-bottom.png') no-repeat 0 bottom;
  left: 999em;
  opacity: 0.95;
  margin: 0 0 0 -10px;
  padding: 2px 0 4px;
  position: absolute;
  width: 144px;
  z-index: 2;
}

And presto no more wonky expandable menu display for primary links ... but as always, this didn't fix the problem for IE (I'm using IE8). I'm gonna try tempering with the IE style files in a bit :)

Anyone has any suggestions on how to handle this value?

I am reverting the last changes made.

Latest version of acquia marina works fine for me with RTL languages. i think this topic should considered closed and people submit new issues if they have problem.

Thanks.