1038052 - (phonebook-rtl) [Meta] [RTL] Right To Left compatibility in mozillians.org

Status: NEW

(Participation Infrastructure :: Phonebook, defect)

Description

[Ahmed Nefzaoui [:Nefzaoui]]

Starting this meta to track the changes needed in phonebook/mozillians.org code base to make it RTL-compatible.

Comment 1

[Ahmed Nefzaoui [:Nefzaoui]]

William,

Filed this bug and I'd like to get started working on it but first I need your opinion about the best way to proceed.
As I can see, most of the mozillians' style is implemented in less.
While having full support of RTL UI will require lots of additions, so now I'm thinking instead of applying addition to each file, why not create a rtl.css file and include it with the rest of the style files.

What do you think about that?

Thanks!

Comment 2

[William Reynolds [:williamr]]

:Nefzaoui, thanks for filing this bug and offering to work on it.

:wbowling, could you help :Nefzauoi with how to best proceed with adding Right to Left language compatibility based on comment 1? Thanks!

Comment 3

[Wray Bowling [:wbowling]]

:nefza(In reply to Ahmed Nefzaoui [:Nefzaoui] from comment #1)
> I'm thinking instead of applying addition to each file, why not create a rtl.css file and include it with the rest of the style files.

Hi Ahmed. That may work. There is already a class that is applied to the page when a right-to-left language is detected that can be worked with. I had suggested months back re-working the .right and .left classes to swap themselves if the .rtl class was detected but there is still a lot of sandstone that does not use that philosophy.

I'm very open to discussion about pulling apart the stylesheets a bit more so they are easier to make additions to. That may be a different discussion all together. Find me "wbowling" on the #commtools IRC channel for any general discussions about that.

Comment 4

[Wray Bowling [:wbowling]]

Nefzaoui and I met last week. He is really passionate about getting RTL language support!

I want to share this quick demonstration I made of how we could rework the layout on mozillians with a very minimal amount of CSS. For tags that support the CSS 2.1 attribute "direction", i switch the mode to RTL, and for anything layout related, I use a class "left" which swaps itself when body has the "rtl" class.

http://jsbin.com/yubufahoci/2/edit?html,css,output

There may be more I'm unaware of, but at the moment it looks very simple to to a RTL mode. the trouble will be integrating such a method in the already existing Sandstone styles we have with lots of legacy layout hacks.

Comment 5

[Ahmed Nefzaoui [:Nefzaoui]]

Hey Wray
Based on what I experienced with the case of RTL'ing Firefox OS, I'm afraid that might not work with all the cases, I've still yet to find out all the cases of phonebook and how we exactly manage the switching but I'm still very optimistic about one file (e.g. rtl.css) with all the RTL versions of the blocks that need RTL'ing, in all cases those won't be applied *unless* mozillians.org is on a RTL-based language :) But seems there's a need of a bit of cleaning before doing so..