[RFC] RTL support for Ionic

[mhartington]

This issue is to track support for RTL across the framework.

It is a combination of many issues that have existed for some time.

• Back button pointing to opposite side on RTL direction  #10685 | Back button pointing to opposite side on RTL direction
• DateTime rtl view error  #10878 | DateTime rtl view error
• Alerts in RTL apps appears LTR #10147 | Alerts in RTL apps appears LTR
• Ionic 2 Badges space issue (RTL) #10077 | Ionic 2 Badges space issue (RTL)
• feat(rtl): RTL support in one method #11115 | feat(rtl): RTL support in one method
• Ionic 2 menu opens from left instead of right (RTL) #10074 | Ionic 2 menu opens from left instead of right (RTL)
• ion-select style in rtl wrong #9815 | ion-select style in rtl wrong
• dynamically change menu side direction when change document direction #9526 | dynamically change menu side direction when change document direction
• bug: Sliding List buttons not show up in RTL direction #8107 | bug: Sliding List buttons not show up in RTL direction
• When using rtl direction in html tag, the margin between range component and its labels disappears #7488 | When using rtl direction in html tag, the margin between range component and its labels disappears
• blank screen after modal pop up shows from side menu on rtl #6694 | blank screen after modal pop up shows from side menu on rtl

These other issues were difficult to follow as the conversation got derailed.
Here is the branch for testing https://github.com/driftyco/ionic/tree/right-to-left

@theunreal, @John-Luke, and @AmitMY , you have submitted PRs and issues for RTL, we'd like to ask for your help in going over each component for helping us get things in order. Feeling up for it?

[theunreal]

Sure, I'll do my best, I'm already running production RTL Ionic 2 app and I can track most of the issues

[AmitMY]

Same here, glad to help.

[jlucfarias]

I'll do what I can for this

[refaelgold]

In Israel , We cant use this awesome framework because is not fully support to RTL.

Thats the main reason we most of the time developing apps on Native(Swift & Java).

I hope all this bugs will be fixed ASAP.

[AmitMY]

@refaelgold I am a dev from Israel as well.
The only current blockers for rtl, are side menu support (support for changing side in run time), and arrows flipping - #11218
When those are done, it will be possible to have rtl apps in production, because all of the other rtl issues are minor, and probably solvable with just css.

[alaa-alshamy]

@mhartington
also the page transition in ios should be reverse with RTL

and also to be fully support with RTL any thing left should be right and any thing right should be left

i mean for example there's padding-left in ion-item, with RTL should be padding-right , etc.

so every thing should reverse padding , margin, even icon-left or icon-right , menu right or menu left

so every thing with RTL should understand reverse i think, so when i set something left i should expect it will be right with RTL, unless i really need it to be on the left in all cases so should be something like force-left or some thing like this.

with that we can do one code work awesome with the two directions.

it's all just an ideas , what do u think guys ?

[AmitMY]

@alaa-alshamy That is exactly what this thread is about..
About X-left -> The plan is to have X-start in addition, and X-left will always be left. (same for right)
You are welcomed to help on this, if you know where things are wrong. Just create PRs with the correct behavior and the team will review.

[jlucfarias]

@refaelgold if you know about any issue of RTL support in ionic you can get it and open a PR to solve it.
If everybody create a PR to solve RTL issues, the ionic will fully support RTL in some days

[alaa-alshamy]

@AmitMY that's very good

but Unfortunately i don't have enough time to make PRs but i can reference some issues with RTL so if u can make PRs to solve them that's will be great.

the issues i can confirm :
1- side menu
2- page transition in ios
3- toggle buttons
4- ion-searchbar
5- all padding and margins eg: ion-item padding left should be right.
for this point i mean reverse all padding and margins there's framework i used before to reverse padding and margins and right and left css properties in scss with same code it's name "bi-app", u can take some ideas from it

simply it uses mixins in scss so you should replace every padding or margin or left or right with their appropriate mixin and it will automatic reverse it if you in RTL mode

bi-app repo: https://github.com/anasnakawa/bi-app-sass

[sefidary]

temporary add this file to app folder to fix all style problem in rtl project (support v3 grid system)
_rtl.zip
node_modules\ionic-angular\transitions

transition-ios.zip

node_modules\ionic-angular\components\toggle
toggle.zip

to fix toggle and ios transaction