AngularJs Meetup South London Collection | this article

In this protip we will implement a basic rtl support. We are going to define a flag to use in our css classes using the same approach used by Modernizr. You can check the previous protip for more details on the initial configuration here.

Creating a RTL flag function

//language module
angular.module('myapp.language', ['pascalprecht.translate'])

.config(function($httpProvider, $translateProvider) {
   ... //seen before
})

// Service definition
.factory('Language', function ($translate) {
    //add the languages you support here. ar stands for arabic
    var rtlLanguages = ['ar'];

    var isRtl = function() {
        var languageKey = $translate.proposedLanguage() || $translate.use();
        for (var i=0; i<rtlLanguages.length; i+=1) {
            if (languageKey.indexOf(rtlLanguages[i])>-1) 
                return true;
        }
        return false; 
    };

    //public api
    return {
        isRtl: isRtl
    };
});

Changes on index.html

We will use the rtl flag to add a class to the html element. This will be used later as part of a css selector.

<html ng-app="myapp" ng-class="{'rtl':Language.isRtl()}">

Changes on app.js

We need to add the language module dependency and expose the service to the page.

angular.module('myapp', [ 
    ... 
    'myapp.language', 
    ...
])
.run(function($rootScope, Language, ...) {
   //make the service available     
   $rootScope.Language = Language;
   ...
});

CSS usage

In order to apply the changes targeting different classes or elements use:

.className img { float:right; }
.rtl .className img { float:left; }

LESS usage

.className { 
     img { float: right; }

     .rtl & { 
       img { float: left; }
     }
}

HTML dir attribute

To help us during the layout for specific texts we can also set the text direction attribute. The syntax is <element dir="ltr|rtl|auto">. We will link it to the previous flag to setup the whole application. By setting this attribute the browser tries to get the desired result on most of the cases.

<html ng-app="myapp" ... dir="{{(Language.isRtl())?'rtl':'ltr'}}">

Resources

Angular supported locales

Demo code: link

AngularJs Meetup South London Collection | this article