Add Right To Left Support

[mhartington]

From @mashaly100200 on December 30, 2015 17:24

kindly add support rtl to animation and the components

Copied from original issue: driftyco/ionic2#832

[msoni11]

@Khalid-Nowaf : I would be happy to help.

[Khalid-Nowaf]

@msoni11 thanks! I will keep you guys posted.

[OmarHassan25]

RTL was present in road map RC 12, i don't know why they dropped it ?!

[AlGantori]

Hello, I don't see ion-slides in this long thread? It too needs support. I have posted here a request http://idangero.us/swiper/forum/#!/general:support-for-pagination-righ

my workaround, not coded yet, would be to populate the slides backwards, and move to last slide upon start. I assume I have the right events to detect end of play, when playback reaches 1st slide :)

A word of caution although I am not an expert. I hope the RTL support is planned at the component level and not only and exclusively at the app level.

I may want my app mostly in English, like tabs/button labels but the actual consumable content in Arabic. For example, like the behavior of a slider/pager desired or configurable to RTL because of its text and graphics RTL orientation.

yup! I already got rid of that nasty scrollbar.

Also I may have a page with 2 lists each in a different language.

<ion-list flow=RTL>....
<ion-list flow=LTR>.... 

[Mohsen7s]

When in rtl mode, there is no margin between range and its labels, hence the icons on both sides are partially not visible.

[jgw96]

As part of this we should also look into this issue https://github.com/driftyco/ionic/issues/10685

[mhartington]

Hey all, we're moving the tracking of RTL support in to this issue https://github.com/driftyco/ionic/issues/11211

Brandy will doing some work to get this going so expect to see it soon.

[joesleiman]

there are lots of messages here , i didn't find the solution as i'm not good at english . can someone lead me to the solution of direction of the menu, because when it changes to left there animation it opens from left to right , and the swipe still from left to right also. please any help.

[AmitMY]

@joesleiman There is no solution for you at the moment. A fix is suggested in https://github.com/driftyco/ionic/pull/11336 and is pending review.

[joesleiman]

@AmitMY ok thank you . i have another problem how to change the direction to rtl from html tag in index.html or ion-app or body because the ion-select it's not under <ion-nav> where i change the direction. can you lead me to a solution if you know ?

[msoni11]

@joesleiman: If you're using ionic1, I've fixed it under this tag https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1

You can review and apply changes.

[AmitMY]

You set your default 'dir' on the HTML tag, and if you want to change it in runtime, you do 'this.platform.setDit('rtl', true)'.

Don't use the dir attribute anywhere else, as nested directions are not supported.

Finally, please use the nightly version, as it is more RTL ready than 3.2.1

If you have any other support questions, please use the ionic forum, and for bugs/features use github

[joesleiman]

@msoni11 no ionic 3.2.0

[joesleiman]

@AmitMY i'm using in all my app in every root tag [att.dir]='isRtl? 'rtl':'ltr'' (in every form : like ion-content) isn't good ?

[Khalid-Nowaf]

@joesleiman for now, I use material design page transition only, which is an alternative to avoid page transition from left to right.

// in app.module.ts
.
.
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
       pageTransition: 'md-transition' // change the page Transition to avoid "LRT" page Transition 
    })
.
.

[joesleiman]

@AmitMY how can i change the back button icon to right arrow instead of left arrow (when change it to rtl)

[AmitMY]

@joesleiman No, having dir="rtl" on ion-content is not guaranteeing support. You should always use this.platform.setDir('rtl', true) and remove all of the dir attributes except the one in the html tag. It also controls direction of ionic components from typescript, such as gestures. (note that setDir with true also updates the html tag with the correct dir)

About the back button, if you use the proper way to set direction, as mentioned above, it will flip your arrows, as done here - https://github.com/driftyco/ionic/pull/11634. It is only available in the nightly version, and a new version (3.3.0) will be released later today.

I ask again, please, for these kind of support questions use the forum. Github is for bugs/feature requests.

You can read more about RTL here - https://github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md This is the official RTL documentation, but it is not yet done so it is not in the website.

[joesleiman]

@AmitMY ok i will do ... thank you so much ,

[joesleiman]

@AmitMy if the user put this.platform.setDir('rtl',true); and close the app and then return to it how can i save for html tag dir='rtl' . so isn't good idea to use it. because it return to dir="ltr"

[AmitMY]

@joesleiman So if your app is multidirectional, and you use the user preferences to decide which side, I would recommend using NativeStorage, and storing for the key "preferences" the object: {lang: "he", dir: "rtl"}, and then in app.component.ts on platform.ready check if the user has preferences. If he does, apply them by setDir.

No other solution for now.

[joesleiman]

@AmitMY when i use setDir : still the ion-select >> ion-alert : have issue in rtl direction on md (android)

[joesleiman]

@AmitMY i solved it by this : html[dir="rtl"] .alert-md .alert-radio-icon { left: 0px; right: 13px; }

[AmitMY]

I think you are not using the nightly version as I suggested (3.2.1-201705231529), and if you are using it, it is a case of overridden style, and it is fixed here https://github.com/driftyco/ionic/pull/11635

[joesleiman]

@AmitMY can you complete the discussion here because i'm finding more and more bugs: https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591

[ionitron-bot[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.