RTL Support

Is there any intention of providing native RTL language support in Ionic 2?

@swarner in app.component.ts you can use this.platform.setDir('rtl', true);

1 Like

@mahmoudismail, I noticed some components do not work well when the direction is set to RTL. (e.g. back button, sliding list items, search box, select list) Have you developed a complete RTL app? Have you met such issues while doing that?

Thank you,
moataz

@moatazelgamal select list styling in RTL app , override it in app.scss

Select Style

.alert-radio-group {
  .button-inner {
    flex-direction: row-reverse;
    text-align: right;
  }
}

.alert-button-group {
  flex-direction: row-reverse;
}

ion-select {
  max-width: 100%;
}

.alert-ios .alert-radio-inner {
  position: absolute;
  top: -7px;
  left: 7px;
  width: 6px;
  height: 12px;
  border-width: 2px;
  border-top-width: 0;
  border-left-width: 0;
  border-style: solid;
  border-color: color($colors, secondary);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.alert-md .alert-radio-inner {
  top: 3px;
  left: 3px;
}

.select-ios .select-icon .select-icon-inner, .select-md .select-icon .select-icon-inner, .select-wp .select-icon .select-icon-inner {
  color: color($colors,secondary);
}

.select-ios .select-icon , .select-md .select-icon, .select-wp .select-icon {
  position: absolute;
  left: 10px;
}
2 Likes

Returns app’s language direction. We recommend the app’s index.html file already has the correct dir attribute value set, such as or .