Add Right To Left Support

[Mahdi7s]

Title!

[mlynch]

Sorry, we need a little more info on what exactly you are looking for here :) CSS will get you some of the way. Is there anything in particular that would help?

[somethingnew2-0]

Take a look at http://angular-translate.github.io/

[Mahdi7s]

The Persian and Arabic languages are right to left, so we need a right to left layout( dir="rtl" ) for our application, I tested ionic and seems it don't support right to left direction at time.

[adamdbradley]

Yes we'd love to support RTL, but honestly I'm not too familiar with it. Would you be able to assist in what needs work, or describe why something within Ionic doesn't work with rtl? Thanks

[Mahdi7s]

I tested many components of ionic and the most problem is with animations(for example, the slide animation of navbar) and element's float; I created a pen that shows the slide animation of "navbar" and if you look, the back button is not at right place, also I corrected some elements' place using "float:left/right" style.

1. Add some "xx-right-left" css class (for example "slide-right-left" against "slide-left-right" css class).
2. Make animations to work with both "xx-right-left" and "xx-left-right" classes.
3. Set icon's (like navbar back buttons) based on "dir" attribute of html or body element.
4. I think the rest is ok ;)

Here's the pen:
http://codepen.io/anon/pen/ItJGf

If you have any questions, I will be happy to answer them,
Awesome framework, thanks!

[adamdbradley]

Thanks for the assistance. This reminds me of how flexbox uses start and end instead of left and right for these very same reasons. I'll keep this issue open and probably ping you later on to see how things are working. Thanks.

[alongubkin]

This is a must!

[adamdbradley]

I just added new right to left animations. As for animations, I'm going to let the developer decide which direction to use, rather than assuming RTL attributes should do the opposite (plus a lot less code and allows more flexibility). So for an RTL app, they can assign the .slide-right-left or .slide-right-left-ios7 animations.

However, switching the back button icons I do think should be automatic depending on an RTL attribute. I've got an issue open for it and will kick around a few ideas.

@alongubkin and @Mahdi7s, would either of you be able test out the animations and let me know if they're working as expected? The nightly builds can be found here: http://code.ionicframework.com/#nightly

Thanks.

[mlynch]

Do we have an actual example of what is being requested here? I think there is some miscommunication going on. I don't know why a new animation type was necessary unless I'm missing something.

[adamdbradley]

Having an animation that slides out views from right to left would be
what's expected for rtl languages when they navigate forward, along with
the reverse of that when the user goes back. Adding this animation isn't
only for rtl, but is another reusable animation devs can choose from, it
doesn't have to be a view navigation thing only.

On Thursday, March 13, 2014, Max Lynch notifications@github.com wrote:

Do we have an actual example of what is being requested here? I think
there is some miscommunication going on. I don't know why a new animation
type was necessary unless I'm missing something.

Reply to this email directly or view it on GitHubhttps://github.com//issues/643#issuecomment-37616907
.

[mlynch]

Okay. I'd really like to see some real example apps that do RTL well before we add anymore features for it. Right now I feel we are going off a few suggestions but we don't fully understand the problem space, so I think we should just wait on it.

On Mar 14, 2014, at 6:08 AM, Adam Bradley notifications@github.com wrote:

Having an animation that slides out views from right to left would be
what's expected for rtl languages when they navigate forward, along with
the reverse of that when the user goes back. Adding this animation isn't
only for rtl, but is another reusable animation devs can choose from, it
doesn't have to be a view navigation thing only.

On Thursday, March 13, 2014, Max Lynch notifications@github.com wrote:

Do we have an actual example of what is being requested here? I think
there is some miscommunication going on. I don't know why a new animation
type was necessary unless I'm missing something.

Reply to this email directly or view it on GitHubhttps://github.com//issues/643#issuecomment-37616907
.

—
Reply to this email directly or view it on GitHub.

[adamdbradley]

Related:
c7e3def
#1061

[seme1]

Framework7 has proper support for RTL
http://www.idangero.us/framework7/docs/#.VEd6HyKUeaI
I've used it successfully in an RTL app I designed in the past. However, I am finding myself forced to switch to F7 due to some functionalities that F7 lacks, but ionic framework support.

Is it possible to have full support for RTL implemented in the Ionic framework ? All of the the form fields should be reversed (from right to left). Also the fixed search input field (AKA search bar) should be reversed, too (search field should be on the right, while cancel button on the left).

All of the custom Form elements need also to appear on the right edge of the screen.

[fadifannoun]

Hi
is this feature implemented? I cannot apply it in my app and still getting animation problem for RTL apps.

[samaphp]

I think they fixed it at framework7 if you interested. In ionic it's still an issue.

[vah7id]

Whats update ?

[sszdh]

Ping...

[fadifannoun]

Actually, You can come over it with some custom class implementation for you RTL content and keep the html direction LTR. By this simple move you can overwhelm the transition issue until it is fixed and released.

For example create a class called .rtl or what every you want and set direction: rtl !important;'and text-align: right !important; Then add this class to whatever container or div of your choice.

Or you have another option which I did not have time to go with so I do not pass my deadline is to dig deep in the css source files and fix it your self.

[sszdh]

@fadifannoun, What about floats?

I think we should have some flag in CLI setup, somthing like --rtl=true

semantic-ui approach:
https://github.com/Semantic-Org/Semantic-UI/blob/master/README.md#international