Add Right To Left Support #5035

mhartington · 2016-01-18T21:36:36Z

From @mashaly100200 on December 30, 2015 17:24

kindly add support rtl to animation and the components

Copied from original issue: driftyco/ionic2#832

mhartington · 2016-01-18T21:36:37Z

From @adamdbradley on December 30, 2015 17:38

Yes this is on our roadmap to complete and we would love to get more feedback from experienced RTL dev's to help us point out where we need to improve. Would you be able to provide a checklist of certain parts of ionic2 that do not work well with RTL. Our goal would be to provide an additional RTL css file, and have any JS adjust accordingly depending if the html element has dir="rtl" or not. Thanks

mhartington · 2016-01-18T21:36:37Z

From @mashaly100200 on December 30, 2015 18:39

It's my pleasure to help ionic2 team to support RTL
firest it's easy to watch what are the bad effects if we use rtl direction
we can add this attr to html tag that will convert all website to to rtl

or we can use it in the body as a style like this style="direction:rtl"

if ionic team plan to support rtl

thay will need to add the target direction in App configurations , because the application will need to know what is the direction on the start up
, and if the developer need to change the app language to rtl language in runtime then we should refresh all app (like native android,windows phone app , ios need to restart the application to change it's direction)

now when i try to change ionic2 html direction i found that there are things aleady support rtl direction coz pure html konw how to deal with rtl direction
but thare are things need to be support rtl direction
first thing is animation
i donn't know if ionic team do the animation with css or javascript code , in both cases all animation witch have rtl or ltr will need to add another animation direction , not only change varialbe but add another one coz many things will need to change

I would like to provide assistance as i can to ionic team to help in this great library

i know my English is not good , but i hope you understand my words :)

mhartington · 2016-01-18T21:36:38Z

From @mashaly100200 on December 30, 2015 18:44

plz change this goal " Our goal would be to provide an additional RTL css file "
because we need the two direction in the same application , based on the user's choice , some time it will be in runtime

mhartington · 2016-01-18T21:36:38Z

From @adamdbradley on December 30, 2015 18:51

we need the two direction in the same application , based on the user's choice , some time it will be in runtime

Ionic itself will be able to dynamically add this css file for you, depending on the <html dir="rtl">

mhartington · 2016-01-18T21:36:38Z

From @mashaly100200 on December 30, 2015 19:23

these imgs from trying to change direction of onic-conference-app example
if ionic team cover the rtl direction in this example i think it will be not less than 90% of rtl support

mhartington · 2016-01-18T21:36:38Z

From @mashaly100200 on December 30, 2015 19:26

mhartington · 2016-01-18T21:36:39Z

From @mashaly100200 on December 30, 2015 19:27

mhartington · 2016-01-18T21:36:39Z

From @mashaly100200 on December 30, 2015 20:21

any icon which are right,left,back or forward arrow like back-button icon will need this style
{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

mhartington · 2016-01-18T21:36:39Z

From @adamdbradley on December 31, 2015 4:27

So @brandyscarney had a good idea that we create all the RTL scss files within the repo and get them ready to be filled.

I was thinking that instead of dynamically adding another rtl css, we could have a default $rtl-support: false sass variable that can be updated in each app's sass variables. So in most cases the extra rtl css wouldn't be added to apps, but for those who require the rtl css they can set $rtl-support: true.

Then within our new rtl scss files, the css can be wrapped with @if $rtl-support. This way we can keep the css files separated and easier to edit, and provide rtl support out of the box. Think this will work @mashaly100200 ?

mhartington · 2016-01-18T21:36:40Z

From @mashaly100200 on December 31, 2015 11:48

yes load rtl dynamically is a good idea ,

let us start with animation , coz it may be need more effort

i want to know is it possible to add specific page transition animation when do push and pop pages ?
and how developer add this specific animation to the tow pages witch enter and leave ?
can developer watch back event then add his specific animation also to the two pages ?

if your answer are yes for the previous three questions , then i can congratulate my self coz animation topic don't need any effort and full support rtl direction and ionic team deserve a very big thanks :)

mhartington · 2016-01-18T21:36:40Z

From @adamdbradley on January 1, 2016 1:53

This is the transition animation for ios: https://github.com/driftyco/ionic2/blob/master/ionic/animations/ios-transition.ts

Not sure if this should add logic for RTL, or if there should be a new animation instead. You can however add your own transition, and override the pageTransition config: https://github.com/driftyco/ionic2/blob/master/ionic/config/modes.ts#L24

mhartington · 2016-01-18T21:36:40Z

From @mashaly100200 on January 1, 2016 21:55

hi @adamdbradley , merry christmas

i finished a custom animation class which reverse the default animation class behavior depend on documen.dir
https://gist.github.com/mashaly100200/bf713f2b558285322155
i tested it , and i will test it in real projects soon (inshaa allah)

also i finished some of css classes that was need to be reversed
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9

and if i face more classes need to be reversed , i will add it to this file until i finish one or two real project

also rtl need these configurations in app constructor
https://gist.github.com/mashaly100200/692160b036422d7b018c

i was trying to add all configuration in one place so i found that i can add all things in the app contractor

hope these things can help to make ionic2 fully support rtl

Please feel free to add any corrections or suggestions .

mhartington · 2016-01-18T21:36:40Z

From @adamdbradley on January 2, 2016 3:2

Cool, so it looks like the RTL transition is pretty darn close to the LTR transition, which makes me think it should be an isRTL option that gets passed into the transition's options and we only have one transition. I can update ionic so it has a common isRTL property that can be referenced throughout the app (with webworkers we want to avoid doing document reads within ionic's logic).

mhartington · 2016-01-18T21:36:41Z

From @adamdbradley on January 2, 2016 3:36

Added isRTL() to Platform: https://github.com/driftyco/ionic2/blob/0b4b8628bf87cabab92d6563bf9878db8b86c885/ionic/components/modal/test/basic/index.ts#L16

mhartington · 2016-01-18T21:36:41Z

From @adamdbradley on January 2, 2016 3:58

All transitions are now passed isRTL within the opts: https://github.com/driftyco/ionic2/blob/da986a5fb0ee2c7660ad4494731b5fe98b393812/ionic/components/nav/nav-controller.ts#L798

So now the ios-transition can add the logic for RTL transitions.

mhartington · 2016-01-18T21:36:41Z

From @adamdbradley on January 2, 2016 4:38

Added how we can include RTL css so it correctly builds within ionic.css (which includes both md and ios css) and ionic.ios.css (just ios). The thought is that apps which want to include both RTL and LTR css within the same file can set $include-rtl: true in their sass variables, otherwise it'll default to only include LTR css. https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231

mhartington · 2016-01-18T21:36:42Z

From @MatanYed on January 6, 2016 18:14

Just you to know: RTL apps in iOS are partly LTR:
Primary navbar button side is left, side menu is left, transition animation is from left to right.

mhartington · 2016-01-18T21:36:42Z

From @adamdbradley on January 7, 2016 16:41

Added new methods to platform to get and set language and direction: https://github.com/driftyco/ionic2/commit/942bd9b93b97a88554aafc9972c1c2d86de9273f

mhartington · 2016-01-18T21:36:42Z

From @mashaly100200 on January 12, 2016 21:2

update
for anyone flow this topic
replace
config.set('backButtonIcon', 'ion-ios-arrow-forward');
with
config.set('backButtonIcon', 'arrow-forward');

also i update the animation class
https://gist.github.com/mashaly100200/bf713f2b558285322155

mohessaid · 2016-02-15T09:19:08Z

I have been working on this problem on a moodle mobile app for our company and we need the app to support English and Arabic in the same time, so it's not a problem of switching the direction of everything to RTL but it need to be in run time. I used some tweaks at the beginning using ng-if and some broadcasting through the rootscope in the app, but whenever the user change the language, the app needs a reload, things not working at all with this method.
Three days ago, I started fighting with Ionic (it becomes an universal problem :) ), The moodle team open issues at the moment but I don't think they will look at them.
I am not using Ionic 2 but my approach in this problem is very simple, with ionic side attribute in ionic directive (I think most concerned directive with the RTL problem has this attribute) will make the solution easier than it looks.
I am trying to override the directive to add binding to the side attribute because now, it doesn't then add some alignments to the rest of the content using css in the app.scss, and with the help of angular-translate and the current implementation of the moodle app, update the left in word in classes and side to right and vise versa whenever the language change.
I am still implementing it at the moment I hope it will work (it must work anyway).

jgw96 · 2017-04-07T18:33:01Z

As part of this we should also look into this issue #10685

references #5035

mhartington · 2017-04-13T19:49:48Z

Hey all, we're moving the tracking of RTL support in to this issue
#11211

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

joesleiman · 2017-05-24T09:04:18Z

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 · 2017-05-24T09:09:32Z

@joesleiman There is no solution for you at the moment. A fix is suggested in #11336 and is pending review.

joesleiman · 2017-05-24T09:19:51Z

@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 · 2017-05-24T09:24:11Z

@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 · 2017-05-24T09:24:47Z

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 · 2017-05-24T09:26:50Z

@msoni11 no ionic 3.2.0

joesleiman · 2017-05-24T09:35:15Z

@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 · 2017-05-24T09:44:42Z

@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 · 2017-05-24T09:58:44Z

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

AmitMY · 2017-05-24T10:06:12Z

@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 - #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 · 2017-05-24T10:10:52Z

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

joesleiman · 2017-05-24T10:33:24Z

@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 · 2017-05-24T10:38:37Z

@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 · 2017-05-24T11:15:06Z

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

joesleiman · 2017-05-24T11:55:53Z

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

AmitMY · 2017-05-24T11:58:40Z

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 #11635

joesleiman · 2017-05-24T12:12:29Z

@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 · 2018-09-02T22:54:43Z

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.

mhartington assigned adamdbradley Jan 18, 2016

mhartington added v2 labels Jan 18, 2016

adamdbradley modified the milestones: 2.0.0-beta.9, 2.0.0-beta.12 Feb 10, 2016

adamdbradley added the help wanted a good issue for the community label Feb 11, 2016

brandyscarney mentioned this issue Mar 14, 2016

| RTL Ionic 2 App Nav Animation | #5826

Closed

This was referenced Apr 7, 2017

Back button pointing to opposite side on RTL direction #10685

Closed

ion-select style in rtl wrong #9815

Closed

Ionic 2 Badges space issue (RTL) #10077

Closed

Alerts in RTL apps appears LTR #10147

Closed

DateTime rtl view error #10878

Closed

jlucfarias mentioned this issue Apr 12, 2017

fix(searchbar): better rtl suport #11196

Closed

brandyscarney added a commit that referenced this issue Apr 13, 2017

feat(rtl): add start and end text-align for alert and picker

20c0326

references #5035

brandyscarney added a commit that referenced this issue Apr 13, 2017

feat(rtl): add start and end text-align for alert and picker

cb5707d

references #5035

mhartington closed this as completed Apr 13, 2017

ionitron-bot bot locked and limited conversation to collaborators Sep 2, 2018

Add Right To Left Support #5035

Add Right To Left Support #5035

Comments

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mhartington commented Jan 18, 2016

mohessaid commented Feb 15, 2016

jgw96 commented Apr 7, 2017

mhartington commented Apr 13, 2017

joesleiman commented May 24, 2017

AmitMY commented May 24, 2017

joesleiman commented May 24, 2017 • edited

msoni11 commented May 24, 2017

AmitMY commented May 24, 2017

joesleiman commented May 24, 2017

joesleiman commented May 24, 2017 • edited

Khalid-Nowaf commented May 24, 2017

joesleiman commented May 24, 2017

AmitMY commented May 24, 2017

joesleiman commented May 24, 2017

joesleiman commented May 24, 2017 • edited

AmitMY commented May 24, 2017

joesleiman commented May 24, 2017 • edited

joesleiman commented May 24, 2017

AmitMY commented May 24, 2017

joesleiman commented May 24, 2017 • edited

ionitron-bot bot commented Sep 2, 2018

joesleiman commented May 24, 2017 •

edited

joesleiman commented May 24, 2017 •

edited

joesleiman commented May 24, 2017 •

edited

joesleiman commented May 24, 2017 •

edited

joesleiman commented May 24, 2017 •

edited