Adding Right to Left support to Ionic Framework

[seme1]

Please add RTL support to the Ionic framewrok.

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 the ionic framework supports.

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.

[drewrygh]

Do you mean RTL support on specific elements, or a config level setting to switch the entire app to use RTL?

If you're looking to do something like $ionicConfigProvider.rtlEnabled(true), I'd say were pretty far off. While it's something we'd be interested in adding, we don't understand the problem space well enough to build it in to the framework at the moment.

@adamdbradley - any thoughts on this?

Related: #643

[seme1]

I meant global support for RTL in the ionic framework. It should be done purely with CSS to revert almost everything from left to right. In Framework7, it was successfully applied by an additional css file. So, if one wants an app to support RTL, framework7.rtl.css is included after the main framework7.css file.

https://github.com/nolimits4web/Framework7/tree/master/dist/css

[seme1]

Please have a look at the following two links:

This is the kitchen sink for Framewor7
http://www.idangero.us/framework7/kitchen-sink/

This link is for the RTL version of Framework7 (notice how the app layout looks like in the RTL version of the framework)
http://seme1.netai.net/kitchen-sink/

[etodanik]

@drewrygh - If you are using SASS or something similar, you can just make macros for anything that has a left/right orientation (like padding, margin, positioning e.t.c), that makes it easy to write everything once and have it support RTL.

Otherwise, some JS might need to be changed, but nothing too massive usually. I'm pretty sure most of the other problems that arise (like bad UTF8 support) aren't relevant to you since you're already working well with UTF8 stuff.

[drewrygh]

I see, @seme1 thanks for the links.

IMO the CSS additions could be incremental. If the current way to make an Ionic app RTL compatible is to use custom CSS to override everything, we could just add support for individual components / input fields. This way it's easier for us to see each addition is 100% correct and tested. We are also much more likely to merge smaller PR like this over a massive one to add full RTL support.

Anyway, I added this to our feature request board. I'd be happy to continue the discussion there. In general, since we don't have anyone on the core team at the moment that fully understands complete RTL support, incremental improvements will be the way to go.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.