Hello,

I've prepared rtl css files for l10n_community (attached below), can you please add them to the module

demo here: http://drupal-ar.web-dz.info/ar
and here: http://drupal-ar.web-dz.info/ar/translate/languages/ar/translate

CommentFileSizeAuthor
#21 rtl-css.patch9.31 KBgábor hojtsy
#13 select-list.png12.48 KBdroplet
#10 l10n_server-l10n_community-rtl_css.patch3.69 KBahwebd
#7 select.png2.91 KBdroplet
#5 l10n_server_rtl css.patch3.51 KBahwebd
#5 edit-rtl.png424 bytesahwebd
#5 undecline-rtl.png505 bytesahwebd
#2 l10n_server-rtl.css_.patch3.15 KBahwebd
#1 l10n_server-rtl.css_.patch3.48 KBahwebd
editor-rtl.css_.txt1.11 KBahwebd
l10n_community-rtl.css_.txt1.29 KBahwebd

Comments

ahwebd’s picture

ahwebd commented
StatusFileSize
new l10n_server-rtl.css_.patch3.48 KB

patch:

ahwebd’s picture

ahwebd commented
StatusFileSize
new l10n_server-rtl.css_.patch3.15 KB

Please remove the patch above (it includes another change not concerned here)

Here's the correct patch:

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Status: Active » Needs review

Can we also mark the LTR items with LTR in the original styles, so we remember to fix both places when needed? Any other testers? :)

Status: Needs review » Needs work

The last submitted patch, l10n_server-rtl.css_.patch, failed testing.

ahwebd’s picture

ahwebd commented
StatusFileSize
new undecline-rtl.png505 bytes
new edit-rtl.png424 bytes
new l10n_server_rtl css.patch3.51 KB

Hello,

Here's the new patch, it includes :

Two new files for rtl : "l10n_community-rtl.css" , "editor-rtl.css"

Patch for "editor.css" : adding "direction:ltr" to "td.source" selector (translation source is in English -generally- so it should stay ltr not following user lang direction)

Patch for "l10n_community.css" : adding "direction:ltr" to selector "#edit-release" (Release name should stay ltr when active language is rtl (if not, it'll be displayed incorrectly ex: "6.x-2.0-beta2" will be dispayed as "x-2.0-beta2.6"))

Two new images attached below, to be added to "l10n_community/images" directory

Regards

ahwebd’s picture

ahwebd commented
Status: Closed (fixed) » Needs work

Here's the work-flow for maintaining rtl css :

Original css file RTL css file
Adding a css property that has "right" (or "left") as value
ex: 
float:left;
The same property should be added with value "left" (or "right")
ex: 
float:right;
Adding the css property "left" (or "right")
ex: 
left:20%;
Property "left" (or "right") should be reverted to "auto", and "right" (or "left") set to the same value
ex: 
left:auto; 
right:20%;
Adding properties like padding, margin, background-position ...
examples: 
  1. padding-left:20px;


  2. margin:10px 5px 20px 15px;

  3. background:url(images/decline.png) no-repeat right top;
"left" and "right" values should be swapped;
If only one is set the other should be reset to default value (0 for paddings and margins) if required
ex: 
  1. padding-left:0;
padding-right:20px;

  2. margin:10px 15px 20px 5px;

  3. background:url(images/decline.png) no-repeat left top;
Adding a background image that has a relation with language direction (for example an arrow from left to right)
ex: 
background-image:url(images/arrow.png);
A new rtl image should be created from the original with required changes, and the corresponding css adjusted to point to it
ex: 
background-image:url(images/arrow-rtl.png);

Other considerations might include changing the "font-family" if it exists in the original css.

Items that should not follow the user language direction and stay always LTR should have direction:ltr in the original css and not be considered for the above modifications
ex: codes in Latin characters, programming code...

Regards

droplet’s picture

droplet commented
StatusFileSize
new select.png2.91 KB

@ahwebd,
I don't understand the language, is it make sense ?? --> "العربية Translate to" and I see padding on the right of select list, not sure if it is buggy. (attached image)

ahwebd’s picture

ahwebd commented

Hi droplet,

is it make sense ?? --> "العربية Translate to"

That's because not all strings are translated yet, that sentence will be all in Arabic when its translation has been performed and imported to the site

I see padding on the right of select list

That's another problem of IE, thanks for reporting it, Display is correct in FF and chrome.

I'll take care of this and submit new patch

The padding was added cos I needed the release select list always LTR (display problems if it is rtl) and wanted its "text-align" to be "right", this caused text to collide with the down arrow of the select list

droplet’s picture

droplet commented

@ahwebd,

I'm tested in Windows.

IE 8, FF 3.6, Chrome 6 => wrong

IE 6&7, Opera 10.53, Safari 4 windows => correct

I run an online test, OSX safari & FF are display correct.

can it just add "direction:rtl" to select list ??

** remind: I just test in above demo, didn't test the patch :)

ahwebd’s picture

ahwebd commented
StatusFileSize
new l10n_server-l10n_community-rtl_css.patch3.69 KB

new patch

(rtl images attached above should also be included)

demo here http://translate.web-dz.info/ar

ahwebd’s picture

ahwebd commented
Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, l10n_server-l10n_community-rtl_css.patch, failed testing.

droplet’s picture

droplet commented
StatusFileSize
new select-list.png12.48 KB

http://translate.web-dz.info/ar looks fine.

I see another problem:

select button sometimes on left, sometimes on right

ahwebd’s picture

ahwebd commented
ahwebd’s picture

ahwebd commented

Hi droplet,

This is not a problem, it is done on purpose, it was mentioned above:

Release name should stay LTR when active language is RTL (if not, it'll be displayed incorrectly ex: "6.x-2.0-beta2" will be displayed as "x-2.0-beta2.6")

ahwebd’s picture

ahwebd commented
Status: Needs work » Needs review
ahwebd’s picture

ahwebd commented
Status: Needs review » Patch (to be ported)
gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

To be ported to where?

ahwebd’s picture

ahwebd commented
Status: Patch (to be ported) » Reviewed & tested by the community

Hi,

Sorry my fault,

Can you commit the rtl css/images to the project

ahwebd’s picture

ahwebd commented

Gábor ??

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Status: Reviewed & tested by the community » Fixed
StatusFileSize
new rtl-css.patch9.31 KB

Ok, I've asked that you mark the original declarations with /* LTR */ comments in the CSS files, so we can maintain the RTL files more easily. I've also updated some styles where changes occurred since the last patch. I hope it looks all OK. Finally, removed some lines which were duplicates in the RTL CSS and included a fix for #829626: Border-radius should be on all corners for completed projects., since that was RTL related too.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

Adding improvements in #950452: Improve RTL support, rolled out to localize.drupal.org.

Status: Needs work » Closed (fixed)

Correcting issue status, see #2125263: Issue status not taken from last comment during D7 migration.