Ionic-framework: [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.

• [x] https://github.com/driftyco/ionic/issues/10685 | Back button pointing to opposite side on RTL direction
• [x] https://github.com/driftyco/ionic/issues/10878 | DateTime rtl view error
• [x] https://github.com/driftyco/ionic/issues/10147 | Alerts in RTL apps appears LTR
• [x] https://github.com/driftyco/ionic/issues/10077 | Ionic 2 Badges space issue (RTL)
• [ ] https://github.com/driftyco/ionic/issues/11115 | feat(rtl): RTL support in one method
• [x] https://github.com/driftyco/ionic/issues/10074 | Ionic 2 menu opens from left instead of right (RTL)
• [x] https://github.com/driftyco/ionic/issues/9815 | ion-select style in rtl wrong
• [ ] https://github.com/driftyco/ionic/issues/9526 | dynamically change menu side direction when change document direction
• [ ] https://github.com/driftyco/ionic/issues/8107 | bug: Sliding List buttons not show up in RTL direction
• [x] https://github.com/driftyco/ionic/issues/7488 | When using rtl direction in html tag, the margin between range component and its labels disappears
• [x] https://github.com/driftyco/ionic/issues/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 - https://github.com/driftyco/ionic/pull/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-angularcomponents\toggle
toggle.zip

to fix toggle and ios transaction

[AmitMY]

This repo has some of the RTL problems, and proposed fixes:
https://github.com/AmitMY/ionic-rtl
So hopefully the team (who are ltr people, and rtl is not something they know) will see some issues a bit more visually and see the problems.

Currently it only has problems with open PRs fixing them.

[mhartington]

@AmitMY and @John-Luke would you both mind sending over an email?
mike at ionic dot io

[chriswep]

I am developing a multi-language app, including both LTR and RTL languages. Right now i can't go into this more detailed but maybe my scss file with RTL fixes is of help here. It fixes the segment bar, back button and (i think) the arrows in list-items.

html[dir=rtl] {
    .segment-ios .segment-button {
        &:last-of-type {
            margin-right: 0;
            border-left-width: 1px;
            border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
        }
        &:not(:last-of-type) {
            border-left-width: 0;
        }
        &:first-of-type {
            margin-left: 0;
            border-left-width: 0;
            border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
        }
    }
    [ion-item] .item-inner {
        @include svg-background-image("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}' transform='rotate(180 6 10)'/></svg>");
        background-position: left 0px center;
        padding-left: 32px;
        padding-right: 0;
    }
    .back-button-icon:before {
        content: '\f3d1';
    }
}

it is possible that some of this is already fixed, this code is a few month old already.
feel free to ask if something is unclear.

[AmitMY]

@metzc Thanks for the code.
Segment - done and merged - https://github.com/driftyco/ionic/pull/11215
Input arrow icon - done and waiting for review - https://github.com/driftyco/ionic/pull/11247
Back button - done and waiting for review - https://github.com/driftyco/ionic/pull/11218

If you have any other custom RTL support, we would love a pull request, or if you don't have the time, even an issue describing the problem, so someone will make a PR fixing it.

[sijav]

one thing is about the slides,
I could manage to make it just work with folowing scss but it's still ltr and not rtl ...

html[dir=rtl] {
  ion-slides {
    direction: ltr;
  }
  ion-slide {
    direction: rtl;
  }
  ion-slide p {
    text-align: right;
  }
}

and about Floating Labels there's another scss

html[dir=rtl] {
  .label-md[floating] {
    -webkit-transform-origin: right top;
    transform-origin: right top;
  }
}

[AmitMY]

@sijav The floating code looks alright, can you create a PR?

[alaa-alshamy]

@sijav About slides it already has RTL support man, as mentioned in ionic slides doc:
http://ionicframework.com/docs/api/components/slides/Slides/

there's "dir" input, so ur code should be something like this:

\

or i misunderstood what do u mean?

[sijav]

@AmitMY sure added,
@alaa-alshamy Oops, my bad, didn't know, Thanks.

[naomipol]

@sefidary I used your ios-transition.js file - it works like a charm!
Is there a way to configure the transition direction - to support both rtl and ltr?

[osamaalsabbagh]

reorder button in reorder list does not work for rtl direction list because of -100 in this code:

private itemForCoord(coord: PointerCoordinates): HTMLElement {
const x = this.offset.x - 100;
const y = coord.y;
const element = this.plt.getElementFromPoint(x, y);
return findReorderItem(element, this.reorderList.getNativeElement());
}

we should add 100 for rtl and subtract 100 for ltr
because the reorder button in the right for rtl list
if someone can make this pull request I will be so happy 💯

[alaa-alshamy]

swipe to go back not working as expected with RTL

the swipe gesture reverse correctly so it become on the right side while RTL, but the page sliding still left to right

so when u swipe from right to left nothing will happen but if u swipe from right to left and while u r swiping, swipe back from left to right the page will slide back

so i think it related with page transition also, and i think it should solve together

but it's so important feature and i hope it got fixed very soon

[sijav]

I went through the whole UI Components test, the only RTL problems that I could see were:

1. Range slider problem (fixes with this PR #12004)
2. Item icons (fixes with this PR #11352 though we have to use a border mixin that's why this PR is waiting)
3. DateTime picker problem which invert the places of time or dates.
4. this one #11865

[AmitMY]

1. iOS animated searchbar moves the entire view
2. Menu sides full support in run time (and support for menuToggle=start/end https://github.com/ionic-team/ionic/pull/11336 (the most needed fix there is at the moment)
3. Slides suck https://github.com/ionic-team/ionic/pull/12026

@sijav About DateTime, this is a step in the right direction but not full support - https://github.com/ionic-team/ionic/pull/11992

[AmitMY]

Everyone on this thread, please try out v3.4.0
Here is a post describing the changes: http://blog.ionic.io/ionic-and-rtl/

Please comment here if there are any more issues other than described in the 2 comments above

[alaa-alshamy]

@AmitMY first of all nice job and thanks for ur awesome PRs

but i have some issues:
1- labels flushing (disappear a while and back again) in the android with RTL when u focus the input or click on it
2- border need to be reverse in RTL i mean border right and left

[AmitMY]

1 - Khalid fixed labels flashing in 3.4.0. Can you set to 3.4.2, and set "$app-direction: multi" in your scss? If you still have the problem, it would be awesome if you could create a new issue with a video showing what happens
2 - borders are fixed in a PR. It will be reviewed on Monday, I can definitely see it going in for next minor (3.5.0)

[alaa-alshamy]

@AmitMY actually i already on 3.4.2 and i configured the "$app-direction" so yea it still appear

and i noticed the labels flashing in his videos in android before and after the fix, and he fixed the ios issues only as he mentioned there in this PR https://github.com/ionic-team/ionic/pull/11817

[AmitMY]

@alaa-alshamy Oh ok, added to the list

[MatanYadaev]

https://github.com/ionic-team/ionic/issues/12799

[osman-mohamad]

is all ionic styles in one file when deployed ? if that is the case you can use "rtlcss" postcss plugin to change the direction for all css rules . I used it with many frameworks like "bootstrap", "bulma", "quasar framework" . if any one has tested it before with ionic . I want his advice about it .

thank you

[AmitMY]

@osman-mohamad Currently the build process generates 1 file, but it is going to change soon.
Creating an RTL file I think is less maintainable than the current solution, as some styles must not change because they are live changed from TS and that creates problems
We are in the home stretch for full support.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!