Angular - Internationalisation - Adding RTL Support
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
Demo code: link
