feat(rtl): RTL support in one method

[AmitMY]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] feature request

Platform.dir

platform.setDir(direction):

• Current: does html.dir = direction
• Expected: look for menus in the app. If [side] is not explicitly specified, put correct side (right, left)

Button ion-item

• Current: uses background-image for the arrow.
• Expected: use the element's ::after, and for RTL do a transform, for example:

.item-inner::after {
    content: url(data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23c8c7cc'/></svg>);
    width: 12px;
    height: 12px;
}
html[dir="rtl"] {
   .item-inner::after {
      transform: scaleX(-1);
   }
}

Sliding lists

• Current: Same behavior for RTL and LTR
• Expected: Flip sides automatically
  html[dir="rtl"] ion-item-options [side="left"] becomes side="right"
html[dir="rtl"] ion-item-options [side="right"] becomes side="left"

.item-md

• Current: Same behavior for RTL and LTR
• Expected: Flip padding

html[dir="rtl"] .item-md { 
    padding-right: 16px;
    padding-left: 0;
}

Flip icons - Fixed #11121 not merged

• Current: Icons look the same both for LTR and for RTL
• Expected: Add some kind of rule for icon flipping, such that SCSS will generate the following:
  (example: logo-facebook, help are not to be flipped)

html[dir="rtl"] .ion-icon.not([name="logo-facebook"]).not([name="help"]) {
    transform: scaleX(-1);
}

text-right, text-left - Fixed #11121 not merged

• Current: X-right stays right, X-left stays left
• Expected: Add text-start and text-end

padding-right, padding-left

• Current:: padding direction is the same for left and for right
• Expected: padding direction to flip

pull-right, pull-left - Fixed #11121 not merged

• Current: When needing to float something, you must use explicit: float: X
• Expected: Add pull-right, pull-left support, so that it will be easy to flip in RTL mode, for example:
  [pull-right] { float: right }
[pull-left] { float: left }
html[dir="rtl"] [pull-right] { float: left }
html[dir="rtl"] [pull-left] { float: right }

Tabs - Fixed #11121 not merged

• Current: Tabs are opening and closing the other way around
• Expected: Flip :first-of-type and :last-of-type

html[dir="rtl"] .segment-ios .segment-button:first-of-type extend .segment-ios .segment-button:last-of-type
html[dir="rtl"] .segment-ios .segment-button:last-of-type extend .segment-ios .segment-button:first-of-type

item-left/item-right - Fixed #11125 not merged

• Current: item-left/item-right
• Expected: item-start/item-end

icon-left/icon-right

• Current: icon-left/icon-right
• Expected: icon-start/icon-end

---

An important note:
When I say: scaleX(-1) I really mean: extends flipX, and:

flipX {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

---

Yes, I know its a duplicate of:
#5035
#8107
#10074
#9526
#10685

And does not cover:
#9815
#10077
#10147
#10878

[jgw96]

Hello, thanks for using Ionic! We really appreciate this feedback on RTL support. This is not currently high priority for us at the moment, but we are tracking it in #5035. Because of this I am going to close this issue as a duplicate of that issue and ask that you put your feedback on that issue. Please know that by me closing this issue I am not saying that your feedback is not important, or that RTL support is not important, but I am simply closing this issue as we like to keep our issues as organized as possible so things do not get lost in the weeds (which is better said than done haha).

[jlucfarias]

I think that, for menus, the rtl support should be in the component not in the platform.setDir method. The component should "view" the html direction and change itself. Can I help you in that issue?

[AmitMY]

@John-Luke So the menu will check the DOM every time to infer the direction? lots of inefficiency..
Perhaps the menu component could have platform injected, and to register a listener on platform, like:
platform.dirChanged().subscribe((dir) => ...)

Definitely would love some help on that one.
For the UI elements, I have 2 PRs in process, not covering everything, but baby steps :)

[jlucfarias]

For most scenarious, check the DOM one time (when the component init) it's efficient

[AmitMY]

@John-Luke But, here is an example of a use case where it fails:
I have a page, where you can change your application's language. When you choose Hebrew, it also does platform.setDir("rtl")
By your proposal, the menu will stay on the left, while by mine it will immediately move to the right.

[jlucfarias]

I know that use case but the way to do what you want (how I know) I'll use the way that I explained, but let me know how you think to solve this

[AmitMY]

@John-Luke Sure, if you can, create a PR, and Ill have a look to see if it covers my cases as well :)