Help Make Vanilla Right-to-Left (rtl) Compatible

Todd

As part of our effort to get Vanilla's translations up-to-date I'd like to start getting some feedback over right-to-left issues that Vanilla has and come up with workable solutions. Since I only speak English I'm going to really need the help of native speakers on the community here.

Right to Left Languages

Just so I'm clear, here are the right-left languages that I'm aware of:

• Arabic (ar, ar-SA)

• Hebrew (he, he-IL)

• Persion (fa, fa-IR)

Issues with right-left support

The issues that we'll need to fix with right-to-left support fall under three areas.

1. Making sure our translation strings support rtl. Some strings may need to be changed.

2. Having a plugin that can fix up most rtl issues by adding a css stub. Please see the right-to-left plugin.

3. Debugging bi-directional (bidi) issues.

What I need

Please point out problems you see in this thread. If an issue is substantial enough then by all means start another thread. What I really want to see is.

1. A description of the problem. A screenshot would be great.

2. A description of a solution or possible solution. I can help out the best I can, but if you can solve a problem yourself then please do and contribute that to the community.

Todd

Thanks I got it. @gass3n, I'd love you to point out places where we
need to fix our right-to-left support. I'm hoping that we can fix many
rtl issues with css, but I really need the feedback.

emzi

Todd said:

@gass3n, I'd love you to point out places where we
need to fix our right-to-left support. I'm hoping that we can fix many
rtl issues with css, but I really need the feedback.

Greate! @Todd, Let Me Start By Saying Thank You to You!
Here are some RTLing problems:

1. → and ↳ -> Description!

2. Category Page (Dashboard) -> If you pull a category to the left, it goes to be a child category. When you force Dashboard to be RTL, for creating a child category, again you should Pull a category to the left! it's opposite of the direction you feel free on a RTL'd Dashboard!

3. Category Page (Dashboard) -> If you write a category name in Persian (I don't know about other RTL languages!), the Url will not be properly showed.
   for instant, the below line is url of a category called "Vanilla":
   http://localhost/vanilla/index.php?p=/category/vanilla
   
   And the below line is url of a category called وانیلا=Vanilla, the same as what you see on Dashboard/Categories:
   http://localhost/vanilla/index.php?p=/category/وانیلا
   But it should be:
   http://localhost/vanilla/index.php?p=/category/وانیلا
   It needs a new css class!
   Note: The above lines contains Persian characters. Without proper rendering support, you may see question marks, boxes, or other symbols. Install "FreeFont" to get the best view on this comment!
   

4. Homepage Page (Dashboard) -> What you see on an original Dashboard is:
   http://localhost/vanilla/index.php?p=/{TextBox}
   
   And you see what comes on a RTL'd Dashboard here:
   {TextBox}/=localhost/vanilla/index.php?p
   
   
   A jackleg solution:
   The below codes comes from: /applications/dashboard/views/settings/homepage.php

      <?php
         echo $this->Form->Label('Enter the url to the page you would like to use as your homepage:', 'Target');
         echo Wrap(Url('/', TRUE), 'strong');
         echo $this->Form->TextBox('Target');
      ?>

It can be changed to:

<?php echo $this->Form->Label('Enter the url to the page you would like to use as your homepage:', 'Target'); ?> <foo> <?php echo Wrap(Url('/', TRUE), 'strong'); echo $this->Form->TextBox('Target'); ?> </foo>

While "foo" is an extra free tag that it's not used somewhere needs to be rtl! So, can be defined in customadmin.php as: foo { direction: ltr; float: right; } and nothing for original Dashboard (ltr).

HalfCat said:

%1$s changed %6$s profile picture.
%1$s updated %6$s profile.

These lines cannot be translated correctly as in German we use a different verb form in case that %1$s is "you" or "someone else".

Yes, There's the same problem in Persian!
Temporary I solved it using Persian equivalent for "The user" instead of "You":
$Definition['You'] = 'The user / This user'; it's so so!

T('%1$s changed %6$s profile picture.') => %1$s => You => The user changed Cyrus profile picture. instead of You changed Cyrus profile picture.

Todd

I added the right-to-left plugin. This adds a css stub to the page to patch rtl issues. Please help improve it.

emzi

Todd said:
I added the right-to-left plugin. This adds a css stub to the page to patch rtl issues. Please help improve it.

Wow, Thnx;
You could use Vanilla rtl Decorator for this stuff!

customadmin.css --> admin_rtl.css
Vanilla_default_Theme_RTLer.css codes --> style_rtl.css

Zoie said:
you should Pull a category to the left to nest it, that is opposite of the direction you feel free on a RTL'd Dashboard!

ScreenShot

If you write a category name in Persian, the Url will not be properly showed.

ScreenShot 1, ScreenShot 2

emzi

---

1.a) A CSS LTR ∞ RTL converter: https://github.com/ded/R2

1.b) A Ruby port of github.com/ded/R2: http://rubygems.org/gems/r2




2) CSSJanus converts LTR(left to right) properties and values in a CSS file to RTL counterparts and vice-versa): http://cssjanus.commoner.com

---

Note: After converting, insert body { direction: rtl; } code into the R2 output css file.