RTL in ionic v1.1.1

RTL in ionic v1.1.1

I've started developing an ionic app for one of my moodle application and when I was about to complete my app I realized there is no RTL support in ionic. I know I should have check all the requirements before starting the app but I've trusted moodle since they were also using the same platform for moodlemobile2 app. They've made moodlemobile2 app really powerful and it helped me to get quickly involved to make my own app for my moodle instance.

And the story begins when I started searching for RTL support in ionic and I found this deadly issue on ionic GitHub tracker. The most painful part was only v2 tag applied on this issue. They are actively working on RTL for ionic v2 that is still in beta release.

I've started looking into ionic core code to see how transition and animation works. There was a lot of code and I had limited time so I started looking into main implementation or directive you can say that was mainly used in mobile app.

I've found two important components:

1. The provider $ionicPlatoform
2. The service $ionicHistory

I don't know how others may use it but for my application, these two were major components that were being used in most of places in my app.

Primary requirements for my app in RTL were:

• Support of transition/swipe from right to left.
• Side menu in right side for rtl languages.

I've made these little changes in ionic core and it did work for me

https://github.com/msoni11/ionic/commit/d87c5c8660f98c957e790e1454615da871224909

I've created a tag also for same: https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl

I'm using angular translate in my app for internationalization. I've followed steps described here to add boolean rtl function in rootScope.
https://medium.com/angularjs-meetup-south-london/angular-internationalisation-adding-rtl-support-f767ebe3e13d#.9x3sce5b4

You can use this method in any template to switch rtl and ltr classes i.e.

<i ng-class="Language.isRtl()?'arrow-forward':'arrow-back'"></i>

In app development, you have to add these lines in case to change direction from ltr to rtl.

$ionicPlatform.ready(function(){
    $ionicPlatform.setDir('rtl');
    $ionicHistory.switchDirection();
});

Next, you have to create rtl.scss within your app and add these lines:

/**
 * Stylesheet for RTL handling.
 */
.rtl, html[dir=rtl] {
  direction: rtl;
  text-align: right;
}

/** To fix empty page issue in rtl. **/
.rtl .click-block-hide {
  @include translate3d(9999px, 0, 0);
}

/**
 * It will move sidemenu to right side in RTL.
 * We can improve this by updating core scss but 
 * I was in hurry ;) 
 **/
.rtl .menu-left {
  right: 0;
}

These are very basic changes that can make your app RTL compatible. I know ionic has so many animation methods available and I would be happy to help if someone is stuck at particular area due to RTL issue.



P.S. : My changes are not yet delivered to our QA, I hope everything will go well once I drop RTL release ;)


Thanks for your time. If you've any queries regarding RTL issue in ionic, drop a comment and we will try to solve that together :)

Mahendra Kumar Soni
http://www.taketwotechnologies.com
Email: mmahendra.soni@gmail.com, mahendras@taketwotechnologies.com