Enable RTL (right-to-left) in Ionic

Implementing RTL in Ionic 5 apps is very easy. It can be done in two ways

  • Using dir="rtl" attribute in HTML tags
  • Using direction= rtl in css

Using HTML tag

If you want to convert the complete app into RTL layout, then use dir="rtl" on <html> tag itself.

Using CSS at global level

You can also convert the complete app to RTL using CSS in global.scss

:root {
direction: rtl;