I played a little with adding RTL support
and after couple of hours I've got an initial RTL extension for the pixture_reloaded theme
I hope to spend couple hours this weekend and then I'll publish the css and images..

This theme is really clean and orgenized, it was very easy to change it's direction
(compare to other themes I worked with)

What I've done so far...
1) Added style-rtl.css
2) Added direction to page.tpl.php (dir="rtl")
3) flipped left and right sidebars for rtl in page.tpl.php ( as if they were first and last )
4) flipped the logo (logo-rtl.png)

To be done...
1) logo image position
2) menu indentation
3) Forum
4) color module adjustments

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jeff Burnz’s picture

Really great effort - please supply a patch when you have something ready (patch against HEAD).

superfish.css needs to be changed also.

How did you flip the sidebars, I would think this requires and should be done in layout-rtl.php

I was about to release a new version of PR, but I'm going to postpone as I would love to get this in.

Hows it looking in IE7?

Optalgin’s picture

It is easier to consider the sidebars as first and last (instead of left and right)
So in LTR you have: first -> content -> last
and in RTL: last <- content <- first

actually I messed with the page.tpl.php but I am not sure this is the best way :-)
it works because sidebars on this theme have same width and style

<?php $is_rtl = (defined('LANGUAGE_RTL') && $language->direction == LANGUAGE_RTL); ?>
...
<?php if (!empty($left)): ?>
  <div id="sidebar-left" class="region region-left">
    <?php print $is_rtl?$right:$left; ?>
  </div> <!-- /#sidebar-left -->
<?php endif; ?>

<?php if (!empty($right)): ?>
  <div id="sidebar-right" class="region region-right">
    <?php print $is_rtl?$left:$right; ?>
  </div> <!-- /#sidebar-right -->
<?php endif; ?>

I have a test site, I'll send you a url when I'm done so you can "get the feel"..
Sorry for not publishing the url here for everyone it's a slow server on my home network.. :-(

Jeff Burnz’s picture

I not really in favour of this approach, primarily because the sidebars can be different, and the content within each sidebar can be different.

I really prefer to do the flipping in the CSS level, which is doable.

Before you go too far I have a suggestion/idea - for a while I've been thinking of migrating Pixture Reloaded from the Zen layout to the Genesis layout - this would open up the ability to use all 7 Genesis layouts and I can use a theme setting so the end user can select the layout from the theme config page.

Now, I have pretty good support for RTL built into Genesis, I just need to finish full RTL support for all 7 layouts (most of the layouts are supported), once that is done I see no reason why I can't do this migration.

I dont think this will be that difficult acutally and would certainly be real drawcard for theme, 7 selectable layouts and all with RTL support.

BTW, how was flipping the header design, did you just reverse the floats?

Optalgin’s picture

FileSize
24.2 KB

Actually what I've done to flip the tab is not good because it will only work when both $left and $right are not empty
If fixed this, but I guess this is not the best approach

I'm attaching my work so far so you can review it
I prefer we go the same path :-)

Open issues:

  1. Better approach for switching the logo when RTL is on
  2. Better approach for Flipping the sidebars
  3. Display of tab is IE incorrect
  4. Color module support

and probably few more :-)

Optalgin’s picture

@jmburnz
I've been working on a fix for the tabs issue I've got with IE in RTL
and discovered that when I remove the ie.css tabs looks fine..

While isolating this I found that when I disable the relative positioning
the RTL issue is gone, but the z-order now doesn't work and menu appear under the blocks..
Any suggestion?

/*ul.primary { position: relative;}*/
...
#superfish { /*position: relative*/; z-index: 2;}
...

Attached screen-shots

There are several things that I need opinion for

  1. The default logo flip - how to
  2. Color module support - need to add rtl images
  3. Best strategy for flipping sidebars - you said that the .tpl is not the best place for this

Apart from the above issues
I think that RTL support for the theme is near to complete
please let me know if you think I missed anything or
if you think of any more testing that I should do

Thanks

Jeff Burnz’s picture

Great stuff, I'll try to find some time either the next days or over the weekend, pretty flat out right now building up to Christmas break:)

Jeff Burnz’s picture

Ok, just reading through this again, off the top of my head:

The default logo flip - how to

Use two logos- we can use some logic in a preprocess fucntion to pull this off rather than in page.tpl.php

Color module support - need to add rtl images

One solution might be to build out base.png more - essentially copy/paste the header bits, flip it (and say add it to the bottom of base.png) and add the coordinates to color.inc and pull the alternate images in style-rtl.css - this should be doable with a bit of mucking about. I can only think of two images we need to flip - the header and the tile on superfish menu items.

Best strategy for flipping sidebars

Simply reversing the floats and margins works perfectly in Firefox (quick test), probably a bit messy in IE but should be doable. This is how I do it in Genesis and it works just fine (althought the layout method is totally different).

Optalgin’s picture

Merry christmas

@jmburnz, what is the reason for forcing text-direction property for page and content?

#page {
  ...
  text-align: left;
  ...
}
#content {
  text-align: left;
}

In my RTL css I changed that property to right and it works great
a problem arise when I try to add LTR (english) message in my RTL site
the english text is aligned to the right even if my html looks like:

<div class="content clearfix">
  <div dir="ltr">
     some text....
  </div>
</div>

When I remove the text-align property RTL content and LTR content display with correct alignment

p.s.
I couldn't find a solution for the menu z-order issue, can you help?

Jeff Burnz’s picture

postponing until 6.x-4.0 which is a total make over of the underlying code.

Jeff Burnz’s picture

Status: Active » Postponed
Optalgin’s picture

Will be glad to help and assist if you need

droshani’s picture

Did this discussion result to any update in pixture_reloaded? I started using this Theme for my English and Arabic web site. I realised that there is not much RTL support in the theme as all listings, titles and sub-titles are shown exactly as LTR section. The texts direction are not positioned in a correct way.

I can see in the page element code that

html lang="Ar" ...

There is no direction input related to the language of the page. In this case the code should read

html xmlns=",,,," xml:lang="ar" lang="ar" dir="rtl"

This is very important element that insure correct appearances of the page.

Many developer go directly for style-rtl.css which makes it hard to inject any css styling which does not effect other themes. I think the main style should have the name of theme included and all class, ID should have the prefix such as pixture-footer, pixture-leftbar or ... in pixture-style-rtl.css

I would go for

pixture-style-ltr.css
pixture-style-rtl.css

This will allow for easier costume injection of css element.

These discussions sound to be relevant with this case as well

http://forum.joomla.org/viewtopic.php?p=1646175

http://fortysevenmedia.com/blog/archives/styling_right-to-left_text_with...

Jeff Burnz’s picture

I have pretty extensive experience building RTL themes and unfortunatly it all came AFTER building Pixture Reloaded...

I have never really bothered trying to hack or backport support in since I always intended to rebuild the theme from scratch and of course build in RTL right from the start - this is what i am doing now.

droshani’s picture

Very good, happy to know this, I wish to use it soon.

Subscribing !!

Optalgin’s picture

Looking forward for the new theme...

I'm using my version of pixture reloaded RTL for some time now
it works fine (minor issues with IE6)

Will be happy to help and/or test if needed :-)

droshani’s picture

Is it possible to get a copy of your version so I can test that as well. Thank you

Optalgin’s picture

@koyauni, my version is attached to comment #4

droshani’s picture

I have now implemented your version. It behave smooth and nice in RTL.

1. But it fails to pick up colour selection for RTL logo panel at the top right in Chrome 4x, Fire fox 3.6, Opera latest. So it is on default pink. When you go back to LTR section it works fine.

2. It totally fails to select/pick the style-rtl.css in IE8x so only the LTR working correctly. It fails in IE!!

I hope this will help

Optalgin’s picture

This implementation is far from being complete
To change the color I've done some manual actions such as creating RTL logo and flipping the header image

style-rtl.css is automatically added by drupal for RTL languages, it has nothing to do with IE
Maybe some IE hacks are needed

Looking forward for the official release :-)

Jeff Burnz’s picture

Yeah, imo RTL is ALL about IE... since its generally very easy to get working in FF and other browsers, but IE is the deal breaker in most cases - and this is especially so for IE6 and fluid widths less than 100%, often you'll find the left sidebar starts freaking out when the viewport is resized as IE6 loses hasLayout and the sidebar starts drifting around.

I haven tested the patch as yet, my apologies but time is so hard to come by at the moment and I have plans to radically shake up this theme and use a totally different base theme for the layout and other features - at the moment its based on Zen, but I am working on a version with Adaptivetheme and all the theme setting goodies that come with it. The good news there is that Adaptivetheme is 100% RTL compliant to start with so this shouldn't be too hard to get working once the port is completed.

droshani’s picture

I think the RTL verion here is working fine but need some small cosmetic changes. IE does not pick up the style at all. I wonder why? I original is working fine with IE.

I have tried Adaptive_Marina, they have problem with their primary menus. where it can not separate the languages and it shows all menu items for any language on any selected language. I posted an issue but no one has back to me yet.

tsi’s picture

I must first appologize, I have done all my work without even looking if there is an issue already open, Don't know why but I just assumed there isn't :\
Anyway the result is my (another) version of RTLed pixture reloaded.
The changes are pure css and one flipped image, didn't touch anything else.

What the patch does :
1. creates layout-rtl.css
2. creates style-rtl.css
3. adds /* LTR */ comments in style.css
4. adds /* LTR */ comments in layout.css

open issues :
* Primary menu act strange in IE7 - I'm not sure this is RTL related.
* ToDo - superfish menu RTL

I quickly tested on IE7-8, FF and Chrome so we need some more testing.

Sorry again for the duplicate effort.

tsi’s picture

Version: 6.x-3.0 » 6.x-3.2
Status: Postponed » Needs review

Changing status to "needs review"

tsi’s picture

OK, the strange behaviour of the primary menu in IE7 is caused by this line in ie.css :

#primary ul.links li a,
#superfish { position: relative; z-index: 10;}

Do we must have that position: relative; in there ? I didn't noticed any problem without it (IE7-8, FF).

Optalgin’s picture

@TSI, Can you please post your version of RTL also as regular files
I have some difficulties using patch

tsi’s picture

Sure.
BTW you can see it in action here : http://www.rtl-themes.co.il/themes/pixture-reloaded

Optalgin’s picture

Nice site! I like the idea of collecting RTL themes in one central place
Do you have any idea how to solve the disappearing of top menu (primary links) in IE6?

tsi’s picture

Thanks, I try to ignore IE6 but if it's important to you I will try and have a look, no promises...

tsi’s picture

Was that happening with or without superfish ?

BTW I have RTLed the superfish menu, don't know about IE6 but it looks fine in IE7+
I will create a patch but meanwhile it can be found here : http://www.rtl-themes.co.il/themes/pixture-reloaded

Ddorda’s picture

Can anyone confirm it works with D7?