RTL support IONIC V4? Seems no one can answer this question?

Ionic Framework ionic-v3
1

No body answers? Are this not possible? Or is there no one who can answer?

I wounder about Ionic V4 in the manual i can not see how to use RTL in my CSS…

in version v3 it works like this, but in version how will it work Ionic v4?
I can not find it in the new documentation.

Please help I am new at IONIC. i used Ionic v3 before and will start to migrate to V4. But i get stuck to this type of problem. Can anybody help me to give me a hint how to use it in IONIC V4?

.my-label{
    @include ltr() { // ENGLISH
      font-family: active-font;

    }
    @include rtl() { // ARABIC
      font-family: arabiclabel-font;
    }
}

I wonder how it works in IONIC Version 4…

I get this error:

No mixin named mixin in /user/…

1 Like
2

Are u tried without mixin or creating your own mixin?

like


:root[dir="rtl"] {
 .my-label {
   background: red;
  }
}

P.S.: Isn’t that post a duplicate of a post you created earlier this week?

3

Like i said i am new at this … I put this code you send me in my global.scss

I dont get any error messages, atlast but it does not take the formating.

here is my code in Global.scss

:root[dir="rtl"] {
 .my-label {
 
  color: red;
  }
}

:root[dir="ltr"] {
 .my-label {
    color: blue;
  }
}

In my HTML FILE…

<ion-content padding dir="rtl">
<div class="my-label" >Bönlista</div>
</ion-content>

No error but not working?

What do i do wrong?

4

My above code maybe work if you set the direction on the root aka on the html tag

<html dir="rtl">
</html>

src: https://tympanus.net/codrops/css_reference/dir/

2 Likes
5

Thank you verymuch so the index is where i put it … Thank you very much it is working now thank you again…

Thanks thanks thanks!!!

:slight_smile:

6

Coolio :+1:

There is probably other ways, like using the css attribut direction: rtl but I don’t know spontaneously how to select it

Also I think there are still 2 or 3 improvements to be done in Ionic itself if I reckon correctly

But still, happy to hear it work for the time being

P.S.: You could now close this issue and other issues you opened previously on the forum related to that subject if its ok for you then

1 Like
7

We’re currently working to fix outstanding RTL issues. We have run into a lot of technical issues with the implementation because of Shadow DOM.

We’re still working on RTL issues but once we’re happy with it we will include some updated documentation on it. If you’re interested in following along and testing as we fix RTL issues, please follow this issue:

Thanks!

2 Likes
8

can we use ‘’?

where direction may ‘rtl’ and ‘ltr’ both? runtime?