390540 - [he] RTL support for MoCo theme

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[Tomer Cohen :tomer]

Attachment: Changes required in rustico theme for RTL support

As pascalc advice, I am working on the required changes in the CSS for Right-to-left version of MoCo (rustico theme). Those changes seems not to affect the English version, but may require further investigations. 


/* Stick the mozilla logo to the left. No clear required. */
#header h1 img {float: left;} 

/* Make right edge border for the text. This will stop it from overlapping the background image. */ 
#main-feature p,  #main-feature h2, #main-feature .home-download,  #main-feature .download-other  {padding-right: 500px;}

Comment 1

[Tomer Cohen :tomer]

Attachment: Screenshot of Hebrew [trunk] MoCo page with the patch applied

Comment 2

[Steven Garrity [:sgarrity]]

Could these additional CSS rules go behind a [dir=rtl] ?

Comment 3

[Tomer Cohen :tomer]

(In reply to comment #2)
> Could these additional CSS rules go behind a [dir=rtl] ?
> 
Yes, this is possible.

Comment 4

[Tomer Cohen :tomer]

We did something like it in AMO <https://addons.mozilla.org/css/forms.css>.

Comment 5

[Tomer Cohen :tomer]

(In reply to comment #2)
> Could these additional CSS rules go behind a [dir=rtl] ?

Better not, as IE6 do not render *[] rules correctly. 

Comment 7

[(no longer active)]

Mass-assigning the new rtl keyword to RTL-related (see bug 349193).

Comment 8

[Tomer Cohen :tomer]

I know that Firefox 2 is about to be deperated soon, and so is the current theme that won't live for the main site, but I think we should consider merging this changes into the webpages of mozilla.com asap.

Comment 9

[Steven Garrity [:sgarrity]]

I tried out this change:

 #header h1 img {float: left;}

and it is breaking the layout in Internet Explorer by pushing the page open a few hundred pixels wider. I was able to work around this by forcing text-align to the left in the #header h1.

Now onto the main-feature alignment issue...

Comment 11

[(no longer active)]

FWIW, I went ahead and implemented full RTL support for Persian inside the locale directory without touching any base files.  The relevant changes are:

<http://viewvc.svn.mozilla.org/vc/projects/mozilla.com/trunk/fa/includes/rtl-support.php?view=log>
<http://viewvc.svn.mozilla.org/vc/projects/mozilla.com/trunk/fa/includes/header.inc.php?view=log>
<http://viewvc.svn.mozilla.org/vc/projects/mozilla.com/trunk/fa/includes/header-portal-pages.inc.php?view=log/>
<http://viewvc.svn.mozilla.org/vc/projects/mozilla.com/trunk/fa/style/tignish/rtl.css?view=log>
And all the images which had to be reversed:
<http://viewvc.svn.mozilla.org/vc/projects/mozilla.com/trunk/fa/img/tignish/>

This can be adapted to other RTL locales fairly easily by copying over header.inc.php, header-portal-pages.inc.php, rtl-support.php, rtl.css, as well the necessary image files, and adjusting the paths to the images inside rtl.css.

The result of these efforts can be seen at stage right now:
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/about/>
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/central/>
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/community/>
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/customize/>
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/organic/>
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/security/>
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/security/identity/>
<https://fa.www-trunk.stage.mozilla.com/fa/firefox/tips/>

Comment 12

[Alex Buchanan [:abuchanan]]

old bug, looks like RTL is working fine now.  closing.