website css needs right-to-left support for arabic/farsi

Before we can do #2274 (moved) or #2275 (moved), we need right-to-left support in our website ccs, and we need a way for the wml (and/or wmi) pages to specify that they want to use it.

Do we have support hidden in our css files already, or is this going to be a big effort?

changed milestone to %Deliverable-Mar2011

added component::webpages/website milestone::Deliverable-Mar2011 owner::phobos priority::medium resolution::fixed status::closed type::defect labels

Trac:
Cc: N/A to runa

Trac:
Milestone: N/A to Deliverable-Mar2011

Sebastian looked at our css files and guessed that there is no rtl support. :(

Any css enthusiasts out there who can lend a hand? We have some Arabic and Farsi website translations ready to go but our new site format can't handle them.

the actual CSS code itself is easy:

"direction:rtl; unicode-bidi:bidi-override;"

It just needs to be added to the appropriate classes.

Trac:
Username: eris404

The main question then is: which classes?

If somebody could fork our css files to produce similar ones that do rtl in the right places, I'll modify the arabic/farsi pages so they use those css files instead.

Thanks!

I attached a file containing typography.css and layout.css modified for RTL languages. The files only contains the modified CSS that affects RTL languages. It was created using CSSMirror [1] and edited by me. I tested it using Firebug and it seems OK.

[1] http://www.ahmadh.com/tools/cssmirror/

Trac:
Username: AhmadSherif
Cc: runa to runa, ahmad.sherif.public@gmail.com

Trac:
Username: AhmadSherif

tor-rtl.zip

Updated version: using background-position and adding html direction + minor fixes

Trac:
Username: AhmadSherif

Thanks! I put those css files in place, along with a master-rtl.css that will call them.

You can see it in action at https://www.torproject.org/about/overview.html.ar

There are still some edge cases, e.g. where we bring in our ie6 and ie7 hacks afterwards, and they might override some rtl parts.

Does this look like a step in the right direction though?

Thank you Ahmad!

I noticed that the text in 'Our Projects' section of the index page doesn't have the right alignment. Adding the following code to typography-rtl.css will fix that:

caption, th, td {
text-align: right;
}

Also, the 'Who uses Tor?' section of the index page isn't at the left of the main column. Adding the following rule to "#home #maincol":

margin-right: none;

Could we please speed this up?

Trac:
Username: OsamaK

Trac:
Username: OsamaK

the flipped arrow

Trac:
Username: OsamaK

Trac:
Username: OsamaK

the flipped background

Trac:
Username: OsamaK

I attached flipped versions of sidenav-arrow.gif. After uploading them into https://www.torproject.org/images/, please add the following rules to layout-rtl.css:

	.sidenav-sub ul li.dropdown a:link,
	.sidenav-sub ul li.dropdown a:visited { 
		background: url(../images/sidenav-arrow-rtl.gif) right top no-repeat;
		margin-top: 12px;
	}

And remove:

.sidenav-sub ul li.dropdown a:link,
.sidenav-sub ul li.dropdown a:visited { 
	background-position: right top;
}

Also background of the operating system name in the download page isn't shown as intended, so I attached a flipped image. Please replace:

.title {
	background-position: left top;

with:

.title {
	background: url(../images/table-title-arrow-rtl.jpg) right top no-repeat;

Trac:
Username: OsamaK

I have updated the CSS files and added the images (see r24361 and r24362). We still need to figure out a way to handle translations of the .wmi files inside the include/ directory.

Everything should be working now, see https://www.torproject.org/about/overview.html.ar for an example. Let me know if there's anything missing.

Osama wrote in an email that "... the page https://www.torproject.org/about/overview.html still doesn't redirect to the Arabic version, even through I've my browser sit to request Arabic contents".

Replying to runa:

Osama wrote in an email that "... the page https://www.torproject.org/about/overview.html still doesn't redirect to the Arabic version, even through I've my browser sit to request Arabic contents".

We're just using apache's auto-negotiation of languages. I can confirm it doesn't work for that page when setting my preference to [ar] too. I'll have to debug some more.

A couple of issues I found:

• It isn't possible to translate the titles of the pages.
• Unlike other links, the logo still links to https://www.torproject.org/index.html instead of https://www.torproject.org/index.html.ar.

Trac:
Username: OsamaK

Another bug is in typography-rtl.css:

#projects th {
  text-align: right;

caption, th, td {
text-align: right;
}}

which should be two different rulesets:

#projects th {
  text-align: right;
}

caption, th, td {
text-align: right;
}

Trac:
Username: OsamaK

I was wrong in the previous comment. It should be simply one ruleset:

caption, th, td {
text-align: right;
}

Trac:
Username: OsamaK

A fourth issue can be seen in https://www.torproject.org/download/download-easy.html.ar where the comments (starting with '#') are shown instead of the translation.

Trac:
Username: OsamaK

Trac:
Username: OsamaK

Trac:
Username: OsamaK

A fifth issue is with the calender icon on the index page. In Arabic, the only valid form is 'DD MMMM' while the original date is 'MMMM DD' and as you can see, it currently doesn't look clear with that icon.

This is not a right-to-left issue, I see that the French version of the index page has the same problem with that icon.

Please upload the attached icon-calendar-flipped.jpg to https://www.torproject.org/images/ and add the following ruleset somewhere:

.calendar{
    background-image: url(../images/icon-calendar-flipped.jpg);
}

Trac:
Username: OsamaK

Carolyn mentioned that the arrows in the navigation on https://www.torproject.org/about/overview.html.ar still point left to right (and thus away from the text) and will have to be flipped.

re-assigning to runa, since she's been doing all of the work on it.

Trac:
Status: new to assigned
Owner: phobos to runa

There are six issues mentioned in this ticket (in addition to the ones I have already fixed):

1. It is not possible to translate the titles of the pages: I'm not sure how to fix this one. The title of a page is set in the header, and the header is simply copied from the English version of the page when the translated page is generated. Suggestions?

2. The logo on index.html.ar still points to index.html: The logo on index.html.ar points to index.html.ar. Please confirm this.

3. Fix ruleset in typography-rtl.css: Fixed in r24409.

4. Comments are shown instead of text in translations of download.easy.html: Fixed in r24414.

5. Issue with the date format / calendar icon on index.html.ar: Fixed in r24410 and r24411

6. Arrows in the navigation on overview.html.ar point the wrong way: Fixed in r24412.

Let me know if I've missed anything.

Thank you, Runa, again!

Replying to runa:

2. The logo on index.html.ar still points to index.html: The logo on index.html.ar points to index.html.ar. Please confirm this.

The logo on index.html.ar was pointing to the Arabic index, but not on about/overview.html.ar and download/download-easy.html.ar. Now, all pages correctly point to the Arabic index.

Another minor issue I found was that the calender background was repeated. To fix this, please replace line 176 and 177 in layout-rtl.css with:

	background: url("../images/icon-calendar-flipped.jpg") right top no-repeat;

Trac:
Username: OsamaK
Cc: runa, ahmad.sherif.public@gmail.com to runa, ahmad.sherif.public@gmail.com, OsamaK

Thanks! Fixed in r24424.

It seems that table-title-arrow-rtl.jpg is a corrupted copy of the image I attached (5.7KB vs. 1.3KB)

Trac:
Username: OsamaK

Thanks, Sebastian fixed it in r24430.

phobos, any updates on the Apache bug?

Trac:
Username: OsamaK

Trac:
Owner: runa to phobos

Replying to OsamaK:

phobos, any updates on the Apache bug?

Does it not autonegotiate arabic for you?

Trac:
Status: assigned to accepted

No, it doesn't.

Trac:
Username: OsamaK

Replying to OsamaK:

No, it doesn't.

If you don't mind saying, what's your language encoding set to? And do you have torbutton set to force english?

Sorry for the late reply. My "Accept-Charset" is set to "ISO-8859-1,utf-8;q=0.7,*;q=0.7" and no, I don't have torbutton.

Trac:
Username: OsamaK

This is part of my request headers and part of the response headers I got (please let me know if more headers are required to figure this bug):

Request Headers: Accept-Language[ar] Accept-Encoding[gzip, deflate] Accept-Charset[ISO-8859-1,utf-8;q=0.7,*;q=0.7] [...] Response Headers: Content-Location[index.html.en] Vary[negotiate,accept-language,Accept-Encoding] Content-Encoding[gzip] Content-Type[text/html] Content-Language[en] [...]

Trac:
Username: OsamaK

does this still not work?

I few arabic and farsi people say this works for them, assuming the translated page exists. Considering this done. Please re-open if it fails for you.

Trac:
Resolution: N/A to fixed
Status: accepted to closed

closed

moved to tpo/web/trac#2692 (closed)