Scroller inside <ion-select> on RTL isn't positioned correctly.
Demo - https://gyazo.com/d1602f045193380be6d02432a7e61878

Yes indeed, but I had a hard time debugging it to understand what's going on there... I'll just add it to the list then

@Newbie012 I noticed it's only the case with the AlertController interface, and in MD. Can you please verify?

@abennouna True

Thanks @Newbie012, added to the list under the alert component

I updated the original issue to include links to some of the open RTL issues. We can either keep those open for tracking or close them to track here.

@abennouna I notice that dir option is removed form ion-slides in v4 which is supposed to RTL when using slides component. May I know will it be added back or is there any alternative way to achieve it?

@twinssbc slides work in RTL mode out of the box as long as the document is in RTL. Are you referring to something else? PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abennouna I would like to thank you for your effort in making sure that all RTL issues are fixed.
Jazakallahu Khairan

I just want to mention that items inside ion-item-divider in RTL has different margins with both slot="start" and slot="end" than in LTR

@abuassar 🤝don't mention it!

Good call! I see a 2px margin that disappears in RTL mode, only in MD. Can you confirm please?

@abuassar 🤝don't mention it!

Good call! I see a 2px margin that disappears in RTL mode, only in MD. Can you confirm please?

It is not just 2px error, please check the following screen shots:

START uses slot="start"
END uses slot="end"
MIDDLE is without a slot

RTL

LTR

and here is how to recreate the issue
app.component.html:

https://gist.github.com/abuassar/bdee78a37e36cf1c5e7ddc506eed141d

unfortunately I found the same issue with ion-item:

START uses slot="start"
END uses slot="end"
MIDDLE is without a slot

demo:
app.component.html
https://gist.github.com/abuassar/d957e7b6d5079cd7f30550c91b7c4617

@abuassar am I right to assume you're not using the latest master with PR #16987? I updated the issue description to explain the test context. Here's the current render of the issue in item-divider: https://i.imgur.com/4W5TFs2.png

@abennouna you are right, I'm using rc1 as I thought it has the fix.

Would you please guide me how to use latest master with the said PR?

@abuassar I updated the issue description with the following in the "Contributing" part:

If you're not familiar with the included test suite:

1. Fork the Ionic repo;
2. Use the rtl branch (or use the master branch and merge the PR #16987);
3. Setup your local copy;
4. Run the test suite locally;
5. When you navigate to the component you want to test, you can add ?rtl=true to the url in order to check the RTL version;
6. Submit a comment with the issue.

Please let me know if it's unclear.

@twinssbc slides work in RTL mode out of the box as long as the document is in RTL. Are you referring to something else? PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abennouna I can confirm that slides work in the default RTL mode, no extra option is required.

Just adding a comment so no one works on alert too. I started working on alert here: https://github.com/ionic-team/ionic/pull/17129

This will also add some changes to the rtl mixins to account for scoped selectors.

Merged in the changes to fix RTL in alert and released a new dev build: 4.0.0-dev.201901162054.ceae5d2.

This may have fixed some other things in RTL. Please let me know if you notice anything broken after this. Thanks!

I tried the latest dev build: @ionic/angular: 4.0.0-dev.201901162054.ceae5d2

and I noticed this weird scrollbar in the menu:
https://gyazo.com/1d3033c073c854d9e09c89d934ecf50d

gist to reproduce:
https://gist.github.com/abuassar/2ff18008fa3fcf07d4547d766dd24079

the scrollbar only shows in rtl mode

@abuassar Thanks! I think this is similar to the alert issue. 🤔 We'll have to look into it.

using latest dev build also, I noticed this ion-toggle bug while placed in a menu:
https://gyazo.com/b93302e08a9c43f312899736ab26717b

gist to reproduce:
https://gist.github.com/abuassar/86d90fecdd56e686beef19e2e23c8715

thanks for your hard work!

another issue with ion-segment this time:
https://gyazo.com/db945c95b20677a6aca96fde0b1cc458

gist to reproduce:
https://gist.github.com/abuassar/a31a8f823bb7fabd4dcd8cdf581af6a9

this issue appears only in RTL and iOS mode as 'md' doesn't have borders around the segment buttons.

another issue with ion-segment this time:
https://gyazo.com/db945c95b20677a6aca96fde0b1cc458

gist to reproduce:
https://gist.github.com/abuassar/a31a8f823bb7fabd4dcd8cdf581af6a9

this issue appears only in RTL and iOS mode as 'md' doesn't have borders around the segment buttons.

@abuassar this is already in the list, thanks!

using latest dev build also, I noticed this ion-toggle bug while placed in a menu:
https://gyazo.com/b93302e08a9c43f312899736ab26717b

gist to reproduce:
https://gist.github.com/abuassar/86d90fecdd56e686beef19e2e23c8715

thanks for your hard work!

@abuassar thanks, this seems to be a regression, as it affects now also ion-toggle.

@brandyscarney I haven't found the regression source, but on the CSS side, a right position rule is applied to the :host-context([dir=rtl]) .toggle-inner selector, and that rule is not needed: disabling it fixes the issue.

@abennouna Thanks! It was likely my change to the mixin. Before the [dir=rtl] selectors weren't working for scoped components so in places that had existing rules for it they are now applying.

This should be the code that needs to be changed: https://github.com/ionic-team/ionic/blob/master/core/src/components/toggle/toggle.md.scss#L56

Here's how that mixin works:

• padding(): https://github.com/ionic-team/ionic/blob/master/core/src/themes/ionic.mixins.scss#L257
• property(): https://github.com/ionic-team/ionic/blob/master/core/src/themes/ionic.mixins.scss#L237

Here's an example where we apply the position regardless of the dir:

.item-options-start {
  @include multi-dir() {
    /* stylelint-disable property-blacklist */
    right: auto;
    left: 0;
    /* stylelint-enable property-blacklist */
  }
}

If anyone wants to do a PR for this, please let me know! I will help as much as I can. I think it should be just modifying the above line (toggle.md - 56), making sure it works in LTR and RTL, and adding RTL to the e2e test here: https://github.com/ionic-team/ionic/blob/master/core/src/components/toggle/test/basic/e2e.ts

Example rtl e2e test: https://github.com/ionic-team/ionic/blob/master/core/src/components/item/test/basic/e2e.ts#L12

I'm currently working on ionicons, to knock this out:

❓ arrow icons in iOS: should they be inverted?
❓ arrow icons in MD: should they be inverted?

It involves moving the styles for the arrow icons, [flip-rtl] and [unflip-rtl] from here to ionicons:
https://github.com/ionic-team/ionic/blob/master/core/src/components/app/fonts/ionicons.scss#L25-L34

Also, we have some docs on contributing and creating a pull request here: https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#creating-a-pull-request. I'll add this to the original issue as well.

Please let me know if anyone has questions contributing, as I'd like to keep this doc updated! Thank you everyone for the testing and help!!

@brandyscarney

I haven't found the regression source, but on the CSS side, a right position rule is applied to the :host-context([dir=rtl]) .toggle-inner selector, and that rule is not needed: disabling it fixes the issue.

Edit: my diagnostic is wrong, sorry. It's the 3D Translate Transform that is not flipped. In the following generated CSS, the RTL selectors do not target the .toggle-inner element, are they supposed to be the correct ones?

toggle.md.css

:host([dir=rtl].toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 16px),  0,  0);
}

should be:

:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 16px),  0,  0);
}

toggle.ios.css

:host([dir=rtl].toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 19px),  0,  0);
}

should be:

:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 19px),  0,  0);
}

and for iOS, the same logic solves the swipe end issue:

:host([dir=rtl].toggle-activated.toggle-checked) .toggle-inner {
  right: -4px; }

becomes

:host-context([dir=rtl]):host(.toggle-activated.toggle-checked) .toggle-inner {
  right: -4px;
}

@abennouna I agree, we're definitely going to have to take a closer look at the mixins. I think we'll need to go through it with finer detail to catch all of the different use cases.

Here's the icon PR: https://github.com/ionic-team/ionicons/pull/656. Once this is approved and gets merged I'll do a release for ionicons then a new dev release.

another RTL issue but this time it is not in a component, but in a CSS utility:
float-start and float-end

gist to reproduce:
https://gist.github.com/abuassar/b85eddb53eaf8a213e855abdea3716f0

screenshot:

@abuassar can't reproduce with your template in my sample rc.2 app. Please upload a complete repo if the problem persists 🙏

rtl_bug.zip

@abuassar can't reproduce with your template in my sample rc.2 app. Please upload a complete repo if the problem persists 🙏

this issue does not exist in RC2, but it does in latest dev build "4.0.0-dev.201901162054.ceae5d2"
sample demo app attached

I updated the issues that have been resolved by PR #17157 with grey checkmarks :ballot_box_with_check: but I haven't marked them as completed.

I also unchecked previously tested components that have had regressions recently.

@abuassar :wave: can you please test what you can after pulling the PR #17157? Thanks in advance!

@abennouna sure, I'll test it and report back when I get home ISA
thanks for your efforts, much appreciated.

@abuassar 👋 can you please test what you can after pulling the PR #17157? Thanks in advance!

sorry for being late as I finally managed to have some spare time for this task.
I applied the PR against RC3, and so far I found 2 issues with the menu component in md style:

1- the scrollbar bug is not fixed yet

2- the outer shadow is mixed between start menu and end menu,
ie. the start menu has end menu shadow, and end menu has start menu shadow

@abuassar thanks but the PR is not merged yet

@abennouna I know, I merged the PR with my own RC3 based fork
P.S I'd like to use this PR in my test app, but I don't know how to use ionic from source instead of npm packages. any hints are welcome :)

@abuassar sorry I misread that you used only rc.3

Good catch for both issues!

1- like for AlertController rtl scrollbar bug, I couldn't find an explanation for this one. @brandyscarney will probably have to take a look

2- fixed

As for including local build, I'm not sure I have the right solution, but here's what I do:

1- pull what I want locally
2- install (npm install && cd core && npm install && cd ../angular && npm install && cd ..)
3- build (npm run build)
4- in my app, I replace app folders with new folders (maybe npm link can help here):

• local-build/core/css --> my-app/node_modules/@ionic/core/css
• local-build/core/dist --> my-app/node_modules/@ionic/core/dist
• local-build/core/loader --> my-app/node_modules/@ionic/core/loader
• local-build/angular/css --> my-app/node_modules/@ionic/angular/css
• local-build/angular/dist --> my-app/node_modules/@ionic/angular/dist

Fab icon in RTL is not centered horizontally

LTR:

RTL:

@3adeling thank you! This is weird. Which version / build are you using?

@3adeling thank you! This is weird. Which version / build are you using?

4.0.0-rc.3

I see, the bug is fixed by PR #17157

when is the expected date to merge in PR #17157 ?
I was surprised that v4 final was released without fixing the remaining RTL issues

ion-toggle doesn't work correctly on version 4.0.0 (demo - https://gyazo.com/a54a336ff3916b42e897713efa3993fb)

The solution is to flip translate3d from 16 to -16. But it'll be overwritten by :host(.toggle-checked) .toggle-inner

Edit - Just saw that there's a PR fixing this issue.

Indeed @Newbie012

Also could you please pull the PR and check all that you can? Having as much input will probably help spot any trailing issues or regressions.

@abennouna another issue related to RTL, is that as you know arabic letters are connected together, and _letter-spacing_ has bad effect on the arabic words.

unfortunately ion-button in md style has a default $button-md-letter-spacing: 0.06em; that makes small notches inside the arabic words.

If there is any way to disable this letter-spacing that'd be great.

@abuassar yes I’ve raised that in https://github.com/ionic-team/ionic/issues/16633

However I understand that the status is "won't fix".

My current workaround is to add this to global.scss:

[dir="rtl"] {
  ion-button {
    letter-spacing: 0;
  }
}

With Ionic v4.0.0 I can't change the direction from LTR to RTL by using platform.sitDir('rtl') as before in ionic 3!!

I have searched a lot and didn't find a replacement for platform.sitDir('rtl') from ionic docs!! or even instructions for RTL support!

I actually have done something with the following code document.documentElement.setAttribute('dir', 'rtl') as an experiment it works but with a lot of issues too like the sidemenu position still on the left side not on the right! as it should.

I'm building a multi-language app ( English, Arabic ) so this a real pain for me!

Is this A BUG? Is there any documentation i can find?

I migrating to ionic 4 and i have RTL issues, I am using multi language application.
I can figure out how to change style based on RTL and LTR. Dynamic change in a variable.

I hope there will be documentation how to set it up in global SCSS.

@abuassar yes I’ve raised that in #16633

However I understand that the status is "won't fix".

My current workaround is to add this to global.scss:

[dir="rtl"] {
  ion-button {
    letter-spacing: 0;
  }
}

### THIS MUST BE A BUG!!

Global.SCSS BASED ON RTL OR LTR DOES NOT WORK!!
In my case it is very simple if i use RTL i would like to have use RTL style located in global.scss.
Like Ionic 3. But this does not work for me. I migrated to ionic 4 and getting stuck with this problem.

[dir="ltr"] {
  ion-button {
    //My style for LTR
  }
}
[dir="rtl"] {
  ion-button {
   //My style for RTL
  }
}

I trying to change the direction based on what i have choice in my language service variable set. (RTL or LTR) in my ion-header or ion-content.
Have tried code above in global.scss. But only work if you have the direction in index.html.

The global style does not care only look at index.html direction it does not care about my home.page.html if i have put dynamic direction

It always look at index.html. and take the direction from there and use that style that is set there.
([dir="rtl"] ); --> look only in index.html can not figure out how to fix this.

Is there no fix for this yet? I would like to have the direction based on what language i choice,
In my case i have 2 diffrent styles one for LTR and one for RTL.

Is there any solution for this?

@heshaShawky

I actually have done something with the following code document.documentElement.setAttribute('dir', 'rtl') as an experiment it works but with a lot of issues too like the sidemenu position still on the left side not on the right! as it should.

RTL is enforced by having a dir attribute with the rtl value: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

document.documentElement.setAttribute('dir', 'rtl') can also be written document.dir = 'rtl' if you prefer

As for the issues you mention, some fixes have been merged, but this very issue lists the remaining problems, and proposes fixes for it.

Please see summary, and:

• please help us test the PR #17157,
• add a comment with any remaining issues (after the PR)

@CreativeArtDesign I'm not sure to understand what exact issue you are trying to explain. Also, if it's not linked to this issue, please open a different issue for it.

RTL is enforced by having a dir attribute with the rtl value: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

document.documentElement.setAttribute('dir', 'rtl') can also be written document.dir = 'rtl' if you prefer

As for the issues you mention, some fixes have been merged, but this very issue lists the remaining problems, and proposes fixes for it.

Please see summary, and:

• please help us test the PR #17157,
• add a comment with any remaining issues (after the PR)

This actually not an efficient solution for an official release! I have tried the following code document.dir = "rtl" or document.documentElement.dir = "rtl"; or the above one and they all the same! just different syntax!!!

Which comes with many and big issues using that approach like :

1. The side menu the position of the opening still on the left ( only the text has change direction )
2. All the sliders on the app not working correctly!
3. the ion-segment on the ios version not looks good need some CSS fixes

I don't know what to do now with my current app? Is using ionic 4 was a mistake or what? and if so why they have officially released a version?

@heshaShawky I can see 3 ways to deal with the current situation:

1. you wait until the PR #17157 is merged into master and a Ionic release includes it
2. you pull the PR in your local dev env, you test if everything’s solved, and you help us have a good RTL support in Ionic
3. you override the needed rules as per your requirement. If you don't know how to do, please ask for help in the appropriate channels (Forum / Slack...)

I'm Okay with option 2

1. you pull the PR in your local dev env, you test if everything’s solved, and you help us have a good RTL support in Ionic

But I'm not so familiar with GIT! So can you tell me what the command line for pulling the PR #17157 and test it out?

Also I have noticed that when changing the dir attribute manully at index.html to RTL no issues at all happens! with my app!

But when switching dir using Javasctipt like document.dir='rtl' everything goes in a wrong way!! I guess that happens because JS not updating the static styling that puted on the intialization of the app!

So another question is the #17157 will fix that ( dynamicly swithching ) issue as this what I'm talking about?!

@CreativeArtDesign I'm not sure to understand what exact issue you are trying to explain. Also, if it's not linked to this issue, please open a different issue for it.

I would like to have a like an if case in my global.scss that can sense if i have rtl or ltr variable in my home.page.html i have in my header or content dir="{{my variable}}"; and depends of what i have set here global.css read if it is rtl or ltr selected. and take that style sheet.

my variable is set to RTL or LTR

In my home.page.html i have this variable set depend what my variable is set use that css set in my global.scss.. Hope you get the point now. This worked in Ionic 3 but not in Ionic 4

<ion-header dir="{{my variable}}">

</ion-header>

My Global CSS

[dir="ltr"] {
  ion-button {
    // If my tags is LTR use LTR STYLE 
  }
}
[dir="rtl"] {
  ion-button {
    // If my tags is RTL use RTL STYLE 
  }
}

@CreativeArtDesign A lot has been changed in ionic 4. Or to be more accurate - everything has changed. Ionic 4 now uses Web Components with Shadow DOM, which makes these things much more complicated, since each web component is entirely separated from the rest. Therefore, it's not as simple as declaring a global variable.

PS - Maybe it's just me, but it feels like you're more demanding than asking for a fix. Please note that @abennouna is helping out from a free will.

@CreativeArtDesign A lot has been changed in ionic 4. Or to be more accurate - everything has changed. Ionic 4 now uses Web Components with Shadow DOM, which makes these things much more complicated, since each web component is entirely separated from the rest. Therefore, it's not as simple as declaring a global variable.

PS - Maybe it's just me, but it feels like you're more demanding than asking for a fix. Please note that @abennouna is helping out from a free will.

I am not demanding anything, i was used this functionality in ionic 3 and migrated to ionic 4, if ionic 4 does not support RTL in that way ionic 3 did. So why migrate to anything that is less better?

PS: I am ready to test it RTL if i got the chance how can i test, i have worked with testing software for about 10 years. So only send me the packed of the new ready code And i will be at your service and other that have the same issue.

Best regards

KA

It's all about *DYNAMIC SWITCHING with separate STYLE SHEET one for LTR and one for RTL*
My issues is only to make it easy to understand. If I switch to RTL dynamic I would like to use other Stylesheet that is different from the LTR. This is to prevent design issues. Because the RTL is other sizes and hight. So need to style it so it look great.

If there are better way to do it you can advice me please.

thanks.

It's all about *DYNAMIC SWITCHING with separate STYLE SHEET one for LTR and one for RTL*
My issues is only to make it easy to understand. If I switch to RTL dynamic I would like to use other Stylesheet that is different from the LTR. This is to prevent design issues. Because the RTL is other sizes and hight. So need to style it so it look great.

If there are better way to do it you can advice me please.

thanks.

@CreativeArtDesign I guess you can solve this by using platform.isRtl on if condition at app.component.ts when is true require() your CSS stylesheet file

Same concept as this here ( read the comments )
https://github.com/angular/angular-cli/issues/4685

This seems to be an issue that need to be fixed. Not only I have the issue.

⁣Get BlueMail for Android ​

On Jan 31, 2019, 22:42, at 22:42, Hesham Shawky notifications@github.com wrote:

It's all about *DYNAMIC SWITCHING with separate STYLE SHEET
one for LTR and one for RTL*
My issues is only to make it easy to understand. If I switch to
RTL dynamic I would like to use other Stylesheet that is different
from the LTR. This is to prevent design issues. Because the RTL is
other sizes and hight. So need to style it so it look great.

If there are better way to do it you can advice me please.

thanks.

@CreativeArtDesign I guess you can solve this by using
platform.isRtl on if condition at app.component.ts when is true
require() your CSS stylesheet file

Same concept as this here ( read the comments )
https://github.com/angular/angular-cli/issues/4685

--
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
https://github.com/ionic-team/ionic/issues/17012#issuecomment-459498477

PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abennouna Thanks a lot for this trick it's fixed almost everything for me!

Just an RTL bug I have noticed the ion-item-sliding with ion-item-option not working correctly, the ion-item-option keep staying on the left side!

@heshaShawky

Just an RTL bug I have noticed the ion-item-sliding with ion-item-option not working correctly, the ion-item-option keep staying on the left side!

the ion-item-sliding bug is already mentioned in the list above

Put dir=and your variable in content ion tag also fix the rest of RTL and also for the footer.

⁣Get BlueMail for Android ​

On Feb 1, 2019, 01:05, at 01:05, Hesham Shawky notifications@github.com wrote:

PS: There is an issue though if you want to switch direction
dynamically: you'd have to reload the document to keep swiper events
working correctly

@abennouna Thanks a lot for this trick it's fixed almost everything for
me!

Just an RTL bug I have noticed the ion-item-sliding with
ion-item-option not working correctly, the ion-item-option keep staying
on the left side!

--
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
https://github.com/ionic-team/ionic/issues/17012#issuecomment-459540772

PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abennouna Thanks a lot for this trick it's fixed almost everything for me!

Please note that this is linked to the Swiper plugin, and not Ionic itself ->
https://github.com/nolimits4web/swiper/issues/2527#issuecomment-373674893

In a specific use case I chose to destroy the swiper and recreate it as the lib author suggests (instead of reloading the page)

In a specific use case I chose to destroy the swiper and recreate it as the lib author suggests (instead of reloading the page)

@abennouna can you tell me how you have done this? I need to do this with the sidemenu and ion-slides if possible

Instead of reloading the whole page as it's kind of a bad user experience approach!

@heshaShawky not sure it's the best, use at your own risk :-)

component

import { ChangeDetectorRef } from '@angular/core';
// ..

export class MyPage {
  public swiperEnabled = true;

  constructor(
    // ...
    private changeDetectorRef: ChangeDetectorRef,
  ) {
    // ..
  }

  someDetectionMethod() {
    // detect direction changed, rebuild the ion-slides
    this.swiperEnabled = false;
    this.changeDetectorRef.detectChanges();
    this.swiperEnabled = true;
    this.changeDetectorRef.detectChanges();
  }
}

template

<ion-slides *ngIf="swiperEnabled">
  <ion-slide *ngFor="let item of items">
    <!-- slide content -->
  </ion-slide>
</ion-slides>

P.S. I'm not sure what the solution would be for the side menu, I tend not to use those generally :-)

*HI, IONIC TEAM, @abennouna *

I ask you will all respect and understanding
Will it be a solution for RTL Style sheet? With dynamic set variabel for DIR='RTL' or 'LTR',

This how it works in IONIC 3 and worked very good for me.

In variable.scss
$app-direction: multi;

In index.html
<html lang="en" dir="ltr">

In app.scss

.my-headertext{
  @include ltr() { // ENGLISH
    font-family: normal-font;
  }
  @include rtl() { // ARABIC
    font-family: arabiclabel-font;
  }
}

Depend on what choice in my app preferences my variable update {{MyRTLVarable}} MyRTLVarable is set to RTL or LTR depends what i have chosen.

In my code HTML
I put this variable in content header and footer as following:
<HEADER Dir="{{MyRTLVarable}}">

I don't like workarounds, i would like a clean and understandable code. And secure the compatibility of new updates.
If this is impossible i need to return to IONIC v3 where it works.
IONIC TEAM Please give me an answer so i can decide what to do.

Dynamic RTL AND LTR Is an issues that need to be fixed in my view, if IONIC 4 will support RTL in a right way.

If there is anything i can help you with please tell me, i am ready to test, only to get RTL in right path.
You requested this : "please help us test the PR #17157... and above?"

Best Regards

Creative Art Design
Kamal S.

@heshaShawky @CreativeArtDesign

In order to include the not-yet merged fixes in your local app, and test them:

1. Clone the Ionic repo with the PR from my fork
2. Switch to the fix-rtl-host-context branch
3. Setup your local copy
4. Build Ionic npm run build

Or, as command lines:

• git clone https://github.com/abennouna/ionic/ ionic-rtl-fixes-fork
• cd ionic-rtl-fixes-fork/
• git checkout fix-rtl-host-context
• npm install && cd core && npm install && cd ../angular && npm install && cd .. && npm run build

Then you delete then replace the following folders in your app with the ones from the build:

• local-build/core/css --> your-app/node_modules/@ionic/core/css
• local-build/core/dist --> your-app/node_modules/@ionic/core/dist
• local-build/core/loader --> your-app/node_modules/@ionic/core/loader
• local-build/angular/css --> your-app/node_modules/@ionic/angular/css
• local-build/angular/dist --> your-app/node_modules/@ionic/angular/dist

<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
ion-item-options are invisible on <htmldir="rtl"> document.
If I set dir="ltr" on the list the ion-item-options are partially visible

Found it.

Should be:

.item-options-start {
right: 0;
left: auto;
-ms-flex-pack: start;
justify-content: flex-start;
}

.item-options-end {
left: 0;
right: auto;
-ms-flex-pack: start;
justify-content: flex-start;
}

@abennouna Seems like your repo has solved most of my RTL issues (haven't found a bug yet).

Is there any way to set RTL dynamically?

I have an RTL app, but I want a specific popover to animate in from the left (because the button is on the left), how can I achieve this?

@abennouna

Hello,
I'm trying to include your branch according to your instructions here, but when I get to the npm run build, I'm getting lots of errors:

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:24:0
           Definitions of the following identifiers conflict with those in
           another file: describe, fdescribe, xdescribe, it, fit, xit,
           beforeEach, afterEach, beforeAll, afterAll, expect, clock,
           CustomEqualityTester, CustomMatcherFactory, DEFAULT_TIMEOUT_INTERVAL

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:24:12
           Duplicate identifier 'beforeAll'.

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:25:12
           Duplicate identifier 'beforeEach'.

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;
     L26:  declare var afterAll: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:26:12
           Duplicate identifier 'afterAll'.

     L25:  declare var beforeEach: jest.Lifecycle;
     L26:  declare var afterAll: jest.Lifecycle;
     L27:  declare var afterEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:27:12
           Duplicate identifier 'afterEach'.

     L26:  declare var afterAll: jest.Lifecycle;
     L27:  declare var afterEach: jest.Lifecycle;
     L28:  declare var describe: jest.Describe;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:31:12
           Duplicate identifier 'it'.

     L30:  declare var xdescribe: jest.Describe;
     L31:  declare var it: jest.It;
     L32:  declare var fit: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:32:12
           Duplicate identifier 'fit'.

     L31:  declare var it: jest.It;
     L32:  declare var fit: jest.It;
     L33:  declare var xit: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:33:12
           Duplicate identifier 'xit'.

     L32:  declare var fit: jest.It;
     L33:  declare var xit: jest.It;
     L34:  declare var test: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1009:45
           Generic type 'ArrayContaining<T>' requires 1 type argument(s).

   L1008:  function anything(): Any;
   L1009:  function arrayContaining(sample: any[]): ArrayContaining;
   L1010:  function objectContaining(sample: any): ObjectContaining;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1010:44
           Generic type 'ObjectContaining<T>' requires 1 type argument(s).

   L1009:  function arrayContaining(sample: any[]): ArrayContaining;
   L1010:  function objectContaining(sample: any): ObjectContaining;
   L1011:  function createSpy(name?: string, originalFn?: (...args: any[]) => any): Spy;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1036:14
           All declarations of 'ArrayContaining' must have identical type
           parameters.

   L1036:      interface ArrayContaining {
   L1037:          new (sample: any[]): any;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1042:14
           All declarations of 'ObjectContaining' must have identical type
           parameters.

   L1042:      interface ObjectContaining {
   L1043:          new (sample: any): any;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1170:8
           All declarations of 'message' must have identical modifiers.

   L1169:      pass: boolean;
   L1170:      message: string | (() => string);
   L1171:  }

[ ERROR ]  TypeScript: src/utils/focus-visible.ts:18:42
           Property 'key' does not exist on type 'Event'.

     L17:  doc.addEventListener('keydown', ev => {
     L18:    keyboardMode = FOCUS_KEYS.includes(ev.key);
     L19:    if (!keyboardMode) {

[ ERROR ]  TypeScript: src/utils/overlays.ts:51:13
           Property 'key' does not exist on type 'Event'.

     L50:  doc.addEventListener('keyup', ev => {
     L51:    if (ev.key === 'Escape') {
     L52:      const lastOverlay = getOverlay(doc);

[39:32.9]  build failed in 18.50 s

I'm assuming I'm doing something wrong here. Can someone point me in the right direction? Thanks!

@sndwav not sure what happens there -- could you try again making sure each step succeeds?

@abennouna I will try again on a new project to eliminate any other issues, but just to be sure: I cloned the repo into a folder inside the existing project. Is that the correct way to do it, or should I have cloned it to a completely separate folder? Thank you.

(I'm cloning it to a separate folder this time)

@sndwav I'm not sure of the results if you clone inside an existing project. Please clone as a separate folder.

@abennouna It's working, thank you! I cloned it as a separate folder and the build succeeded. Then I copied the folders, and now the detail arrows are facing the correct way when in RTL. I'll do some more tests later, but so far it looks great!
Thanks for all your effort.

@sndwav please note that the detail arrows are fixed in master: you shouldn't need the host-context fixes for that aspect.

split-pan border of menu disaper in rtl mode
.split-pane-side{ border-right: 0 !important; border-left: var(--border) !important; }
ion-menu panle not show at right from menu-toggle button
ion-lable floating not set at right
-webkit-transform-origin: right top !important; transform-origin: right top !important;

Hi there

In the ionic 3 we had the: platform.setDir
There we can set the direction of the platform.

But now on the ionic 4 is is not there.

Hi there

In the ionic 3 we had the: platform.setDir
There we can set the direction of the platform.

But now on the ionic 4 is is not there.

you can simply use:

document.documentElement.setAttribute('dir', 'rtl');

or

document.documentElement.setAttribute('dir', 'ltr');

Hi there
In the ionic 3 we had the: platform.setDir
There we can set the direction of the platform.
But now on the ionic 4 is is not there.

you can simply use:

document.documentElement.setAttribute('dir', 'rtl');

or

document.documentElement.setAttribute('dir', 'ltr');

Not working right! Sliders and the navigation get corrupted using this method! is there a way to make these components to refresh to get the right RTL style values

Not working right! Sliders and the navigation get corrupted using this method! is there a way to make these components to refresh to get the right RTL style values

I tried the slider with a fresh ionic installation and it is working fine
but what do you mean by "Navigation"? if you mean side menu it is working fine too

my code:

rtl switch button:

  changeLang() {
    if (this.translate.currentLang === 'en') {
      localStorage.setItem('lang', 'ar');
      document.documentElement.setAttribute('dir', 'rtl');
      document.documentElement.setAttribute('lang', 'ar');
      this.translate.use('ar');
    } else {
      localStorage.setItem('lang', 'en');
      document.documentElement.setAttribute('dir', 'ltr');
      document.documentElement.setAttribute('lang', 'en');
      this.translate.use('en');
    }
  }

in app.component.ts constructor (after initializeApp() ):

    this.initializeApp();

    if (localStorage.getItem('lang') === 'ar') {
      localStorage.setItem('lang', 'ar');
      document.documentElement.setAttribute('dir', 'rtl');
      document.documentElement.setAttribute('lang', 'ar');
      this.translate.use('ar');
    } else {
      localStorage.setItem('lang', 'en');
      document.documentElement.setAttribute('dir', 'ltr');
      document.documentElement.setAttribute('lang', 'en');
      this.translate.use('en');
    }

note: I am using ngx-translate

Not working right! Sliders and the navigation get corrupted using this method! is there a way to make these components to refresh to get the right RTL style values

@heshaShawky https://github.com/ionic-team/ionic/issues/17012#issuecomment-459670351

Not working right! Sliders and the navigation get corrupted using this method! is there a way to make these components to refresh to get the right RTL style values

@heshaShawky #17012 (comment)

That works great with sliders but not the menu unfortunately or maybe I have mistaken so if you have a code for the menu will be great!

Thanks for your help.

Floating Input problem in RTL

Tested on ionic CLI 4.12.0

Hi there,
When we set:

document.documentElement.setAttribute('dir', 'rtl');

There is a problem with: ion-input floating position
As documented: input Usage floating

When we add:

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

On input focus the text is transformed to the left instead to the top.

To fix this I added this class in the global.scss:

.label-floating.sc-ion-label-md-h,
.label-floating.sc-ion-label-ios-h {
    -webkit-transform-origin: right top;
    transform-origin: right top;
}

Hope this helps !

any help with ion-menu rtl/ltr switching as it's not working using [side]='side' where i change side when user toggl the ion-toggl
and i also tried using
document.documentElement.setAttribute('dir','rtl');
&
document.documentElement.setAttribute('dir','ltr');
when toggling mostly all components switched direction successfully except for the ion-menu

any news about complete the list ?

Found it.

Should be:

.item-options-start {
right: 0;
left: auto;
-ms-flex-pack: start;
justify-content: flex-start;
}

.item-options-end {
left: 0;
right: auto;
-ms-flex-pack: start;
justify-content: flex-start;
}

i added another modification to a class as the upper one adjusted only the UI view but pressing the buttons not working well(as one of the item-sliding-option containers tooks 100% which overrides the other)

.item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start),
.item-sliding-active-slide.item-sliding-active-options-start .item-options-start {
width: auto;
}

hello @abennouna, I have an issue with the icon in the ion-list, there is no margin like in ltr.
do you have any idea how to fix it?

 <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item [routerLink]="p.url">
              <ion-icon slot="start" [src]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

How come there is no update in v4 for all things that where fixed ?

any help with ion-menu rtl/ltr switching as it's not working using [side]='side' where i change side when user toggl the ion-toggl
and i also tried using
document.documentElement.setAttribute('dir','rtl');
&
document.documentElement.setAttribute('dir','ltr');
when toggling mostly all components switched direction successfully except for the ion-menu

any help ?

any help with ion-menu rtl/ltr switching as it's not working using [side]='side' where i change side when user toggl the ion-toggl
and i also tried using
document.documentElement.setAttribute('dir','rtl');
&
document.documentElement.setAttribute('dir','ltr');
when toggling mostly all components switched direction successfully except for the ion-menu

any help ?

Add this to your global.scss file:
.label-floating.sc-ion-label-md-h, .label-floating.sc-ion-label-ios-h { -webkit-transform-origin: right top; transform-origin: right top; }

Any update on item-sliding RTL issue?

Fixes!

I've merged the following fixes for RTL that will make it into the release tomorrow (4.4.1):

• floating/stacked labels are now positioning properly
• range pin has the arrow on the bottom instead of on the right like previously
• searchbar buttons are positioning properly
• tab badge is positioning properly (in Chrome only at the moment)
• fab buttons are positioning properly
• toggle icon is in correct place and not going out of bounds
• segment border is flipped so that it targets the proper first and last buttons in iOS

Latest Dev Build

I released a dev build if you'd like to try it sooner: 4.5.0-dev.201905212141.24e9cf0

Known Bugs

I went through all of this list and I found the following are absolutely still bugs:

• tab-button badges (broken in Safari)
• item sliding direction
• button in item (slot end in item is broken by the margin-left unset, likely in the padding-horizontal mixin)
• datetime text is not aligning with the label

Need Verification

I did not get a chance to check the following:

• datetime multiple columns
• menu / menu-toggle

If anyone could please let me know if there is something I've missed or if you have done any debugging and might know where the problem is for some of these it would be very helpful. Thank you!

@brandyscarney
swiping to go back direction is wrong it should be reverse

this is very important issue i hope u can fix it with this release :)

@brandyscarney

Known Bugs

...

• button in item (slot end in item is broken by the margin-left unset, likely in the padding-horizontal mixin)

FYI, I can't reproduce in the "item/buttons" test.

• datetime text is not aligning with the label

--> PR #18340

Need Verification

I did not get a chance to check the following:

• datetime multiple columns

Width still broken --> PR #18339

• menu / menu-toggle

not sure about this one.

Awesome thank you @abennouna! I merged your fixes. 🙂

I'm not able to reproduce the following:

Float Elements: float-start, float-end, & their responsive versions (regression: #17012 (comment))

| ltr |rtl |
| ---| ---|
| | |

I'm not able to reproduce the following:

Float Elements: float-start, float-end, & their responsive versions (regression: #17012 (comment))

Sorry @brandyscarney you're right, I think I tested that before pulling from master 🤨🤦

Thanks @alaa-alshamy! I've added it to the issue. There won't be a fix for it in the release today as it still needs investigation, debugging and a solution found. 🙂

Fixes!

I've merged the following fixes for RTL that will make it into the release tomorrow (4.4.1):

* **floating/stacked labels** are now positioning properly

* **range** pin has the arrow on the bottom instead of on the right like previously

* **searchbar** buttons are positioning properly

* **tab** badge is positioning properly (in Chrome **only** at the moment)

* **fab** buttons are positioning properly

* **toggle** icon is in correct place and not going out of bounds

* **segment** border is flipped so that it targets the proper first and last buttons in iOS

Latest Dev Build

I released a dev build if you'd like to try it sooner: 4.5.0-dev.201905212141.24e9cf0

Known Bugs

I went through all of this list and I found the following are absolutely still bugs:

* tab-button badges (broken in Safari)

* item sliding direction

* button in item (slot end in item is broken by the margin-left unset, likely in the padding-horizontal mixin)

* datetime text is not aligning with the label

Need Verification

I did not get a chance to check the following:

* datetime multiple columns

* menu / menu-toggle

If anyone could please let me know if there is something I've missed or if you have done any debugging and might know where the problem is for some of these it would be very helpful. Thank you!

Seems like the segment border fix doesn't work on iOS. I have updated to @ionic/angular 4.4.2.

Thanks @loopezz! I added it to the original issue.

I just submitted a PR to fix the item sliding gesture / open method here: https://github.com/ionic-team/ionic/pull/18366

I published a dev build if anyone would like to test it out: 4.5.0-dev.201905231504.7ab9479

Ionic 4.4.2 issue:
ion-item-sliding doesn't work correctly in rtl mode,
When index.htlm direction is dir"rtl"
Buttons is not appeared in RTL mode.
Please let me know if there is any workaround.
Thanks

I'm not able to reproduce the following:

Float Elements: float-start, float-end, & their responsive versions (regression: #17012 (comment))

@brandyscarney I can reproduce now in Safari.

Also, not sure if it helps: take float-start, the generated rules are grouped and it appears Safari ignores rules that it can't parse:

.ion-float-start,
[float-start] {
  float: left !important;
}
[dir=rtl] .ion-float-start,
:host-context([dir=rtl]) .ion-float-start,
[dir=rtl] [float-start],
:host-context([dir=rtl]) [float-start] {
  float: right !important;
}

(Safari needs the non-:host-contextones)

Stylesheet

Actually parsed CSS

Thanks @abennouna! Can you update the issue for this? Maybe we need to update the add-root-selector to return them as two separate selectors?

@brandyscarney issue updated. Returning 2 selectors in add-root-selector solves this issue. Hopefully no breaking-changes 😅

@abennouna What about ion-item-sliding RTL issue?

@shahramSo The fix is part of the 4.4.2 release. Can you share a minimal repo to reproduce your issue?

Sorry for that, see Brandy’s comment below 👇

@shahramSo The item sliding issue is fixed, it just hasn't been in a release yet. It will be in the 4.5.0 release today if all goes well, but if you need it urgently see my comment here for the dev release: https://github.com/ionic-team/ionic/issues/17012#issuecomment-495259725

@brandyscarney Is there any way I can re-use the same SCSS written in ionic 3 app ?
@include padding(10px, 5px, 8px, 10px)

It throws me an error "No mixin named padding"

The menu works when set on startup (opens up from the right). But when it is set/changed dynamically it will open from the left. Is this a known issue?

See: https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50/

Is there any development/progress regarding RTL (when is it planned to be included in Ionic4)? Or is this community driven effort?

@abennouna

this issue: https://github.com/ionic-team/ionic/issues/17012#issuecomment-456785167

still exist in real ios device/simulator but not in browser !

ionic version: 4.7.1

this is happening because of the following style:

:host( .fab-horizontal-center) {
margin-left: unset;
}

removing unset will solve the problem but I am not sure how to override/cancel it
I tried all other values for margin but they didn't work
only removing it will fix the issue!

Not sure if this will work, I don't have access to test it, but maybe you
can try

:host( .fab-horizontal-center):lang(en) {
margin-left: unset;
}

https://www.w3schools.com/cssref/sel_lang.asp

On Tue, Aug 6, 2019 at 10:37 PM Adel Ali notifications@github.com wrote:

this is happening because of the following style:

:host( .fab-horizontal-center) {
margin-left: unset;
}

removing unset will solve the problem but I am not sure how to
override/cancel it
I tried all other values for margin but they didn't work
only removing it will fix the issue!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/17012?email_source=notifications&email_token=AAHJ3YMNSR6XM3ETE5RWV7LQDHHIHA5CNFSM4GO4IEF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3WHJHA#issuecomment-518812828,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAHJ3YPFJSDPK4KG7ZKD7BLQDHHIHANCNFSM4GO4IEFQ
.

thanks @mrahmadt but that didn't work

the solution is:

in global.scss

.fab-horizontal-center {
    margin-left: -28px !important;
}

also I notice that fab start position is not changing direction in RTL mode in ios simulator/device

ion-slides rtl is not working properly ?
any help

Hello, i have a problem with side menu in real IOS devices
Its open from left to right in RTL mode!!
Can any one help me with that or any one has fixed this issue

@brandyscarney
any updates regarding ion-slides rtl

any update on the RTL support for ion-slides if I changed document dir to RTL the ion-slide stop sweeping between slides

any update on the RTL support for ion-slides if I changed document dir to RTL the ion-slide stop sweeping between slides

It swipes but in the wrong direction

@abennouna i still see the issue "select icon in iOS: fix position of the inner element" on the current version, although its supposed to be fixed according to the issue description.

@abennouna It looks like columns in ion-picker do not switch position based upon LTR vs RTL mode: https://github.com/ionic-team/ionic/issues/21205.

Previous work seems to indicate this is intentional:

datetime
☑️ picker in iOS/MD: fix start/end columns’ horizontal positioning when there are 2 or 3 picker columns (PR #18339)
☑️ with floating or stacked label: the datetime text should stay in the document flow (regression) (PR #18340)
✅ picker in iOS/MD: keep the order of columns as in LTR when using time and/or DD/MM/YYYY date format (see #16294) (PR: #17018)

Do you recall the reasoning behind this?

Hello Everyone,
I discovered some issues with ion-item-sliding component in RTL (Ionic 5):
First:
the ion-item-options doesn't open correctly especially in iOS
I fixed it with css:
ion-item-options {
width: unset !important;
}
it fixed the problem and the option appears correct in both LTR and RTL

Second:
when I'm trying to open it programmatically with .open('end') method, it opened in LTR but with RTL it activating the class named: item-sliding-active-options-start but the side is end so it doesn't open:
To fix it I added a second ion-item-options with side="start" and after opening it and do what I want I'm removing it. It's not a good solution but It solve my problem right now.

Hey. I wonder if swipe to go back direction is already solved or not. Because the direction is not changing right now.

https://github.com/ionic-team/ionic-framework/issues/19488

<ion-list> detail icon is showing wrong direction when changing direction in the same page (without reloading) using: document.documentElement.setAttribute('dir', 'ltr');

Hello, i have a problem with side menu in real IOS devices
Its open from left to right in RTL mode!!
Can any one help me with that or any one has fixed this issue

this is not working for me too..

@ChiragPrajapat, I recently reported a bug for this issue and show a walkthrough about that, check it and hope, it is useful for you.
https://github.com/ionic-team/ionic-framework/issues/22116