Opened 9 years ago

Closed 8 years ago

#2692 closed defect (fixed)

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

Reported by: arma Owned by: phobos
Priority: Medium Milestone: Deliverable-Mar2011
Component: Webpages/Website Version:
Severity: Keywords:
Cc: runa, ahmad.sherif.public@…, OsamaK Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

Before we can do #2274 or #2275, 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?

Child Tickets

Attachments (4)

tor-rtl.zip (1.5 KB) - added by AhmadSherif 9 years ago.
Updated version: using background-position and adding html direction + minor fixes
sidenav-arrow-rtl.gif (192 bytes) - added by OsamaK 9 years ago.
the flipped arrow
table-title-arrow-rtl.jpg (1.3 KB) - added by OsamaK 9 years ago.
the flipped background
icon-calendar-flipped.jpg (915 bytes) - added by OsamaK 9 years ago.

Download all attachments as: .zip

Change History (38)

comment:1 Changed 9 years ago by arma

Cc: runa added

comment:2 Changed 9 years ago by arma

Milestone: Deliverable-Mar2011

comment:3 Changed 9 years ago by arma

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.

comment:4 Changed 9 years ago by eris404

the actual CSS code itself is easy:

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

It just needs to be added to the appropriate classes.

comment:5 Changed 9 years ago by arma

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!

comment:6 Changed 9 years ago by AhmadSherif

Cc: ahmad.sherif.public@… added

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/

Changed 9 years ago by AhmadSherif

Attachment: tor-rtl.zip added

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

comment:7 Changed 9 years ago by arma

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?

comment:8 Changed 9 years ago by OsamaK

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?

Changed 9 years ago by OsamaK

Attachment: sidenav-arrow-rtl.gif added

the flipped arrow

Changed 9 years ago by OsamaK

Attachment: table-title-arrow-rtl.jpg added

the flipped background

comment:9 Changed 9 years ago by 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;

comment:10 Changed 9 years ago by runa

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.

comment:11 Changed 9 years ago by runa

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.

comment:12 Changed 9 years ago by 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".

comment:13 in reply to:  12 Changed 9 years ago by phobos

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.

comment:14 Changed 9 years ago by OsamaK

A couple of issues I found:

comment:15 Changed 9 years ago by 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;
}

comment:16 in reply to:  15 Changed 9 years ago by OsamaK

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

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

comment:17 Changed 9 years ago by 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.

Changed 9 years ago by OsamaK

Attachment: icon-calendar-flipped.jpg added

comment:18 Changed 9 years ago by 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);
}

comment:19 Changed 9 years ago by runa

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.

comment:20 Changed 9 years ago by phobos

Owner: changed from phobos to runa
Status: newassigned

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

comment:21 Changed 9 years ago by 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?

  1. 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.

  1. Fix ruleset in typography-rtl.css:

Fixed in r24409.

  1. Comments are shown instead of text in translations of download.easy.html:

Fixed in r24414.

  1. Issue with the date format / calendar icon on index.html.ar:

Fixed in r24410 and r24411

  1. Arrows in the navigation on overview.html.ar point the wrong way:

Fixed in r24412.

Let me know if I've missed anything.

comment:22 in reply to:  21 Changed 8 years ago by OsamaK

Cc: OsamaK added

Thank you, Runa, again!

Replying to runa:

  1. 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;

comment:23 Changed 8 years ago by runa

Thanks! Fixed in r24424.

comment:24 Changed 8 years ago by OsamaK

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

comment:25 Changed 8 years ago by runa

Thanks, Sebastian fixed it in r24430.

comment:26 Changed 8 years ago by OsamaK

phobos, any updates on the Apache bug?

comment:27 Changed 8 years ago by runa

Owner: changed from runa to phobos

comment:28 in reply to:  26 Changed 8 years ago by phobos

Status: assignedaccepted

Replying to OsamaK:

phobos, any updates on the Apache bug?

Does it not autonegotiate arabic for you?

comment:29 Changed 8 years ago by OsamaK

No, it doesn't.

comment:30 in reply to:  29 Changed 8 years ago by phobos

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?

comment:31 Changed 8 years ago by OsamaK

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.

comment:32 Changed 8 years ago by 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]
[...]

comment:33 Changed 8 years ago by phobos

does this still not work?

comment:34 Changed 8 years ago by phobos

Resolution: fixed
Status: acceptedclosed

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.

Note: See TracTickets for help on using tickets.