[RFC] RTL support for Ionic

mhartington commented 7 years ago

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 commented 7 years ago

Sure, I'll do my best, I'm already running production RTL Ionic 2 app and I can track most of the issues

AmitMY commented 7 years ago

Same here, glad to help.

jlucfarias commented 7 years ago

I'll do what I can for this

refaelgold commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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-angular\components\toggle toggle.zip

to fix toggle and ios transaction

AmitMY commented 7 years ago

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 commented 7 years ago

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

chriswep commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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

alaa-alshamy commented 7 years ago

@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 commented 7 years ago

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

naomipol commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

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

AmitMY commented 7 years ago

iOS animated searchbar moves the entire view
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)
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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@alaa-alshamy Oh ok, added to the list

MatanYadaev commented 7 years ago

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

osman-mohamad commented 6 years ago

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 commented 6 years ago

@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] commented 5 years ago

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!

ionic-team / ionic-framework

[RFC] RTL support for Ionic #11211