RTL support

[djabif]

Are you planning to support RTL so we can determine if the text direction is RTL or LTR depending on the selected language? Thanks.

[ocombe]

Well I was just talking about it with @ceolter. I've never worked on RTL support before, so I have no idea what it implies, do you have some experience on the question ? I don't mind adding it, it would be a great feature to add.

[djabif]

It implies that texts should go from right to left and aligned to the right 😉 There is a html attribute dir that allows the values "rtl" or "ltr" and aligns its content accordingly.

I'm working on an Ionic2 app and currently we found a workaround by listening to the onLangChange event from the TranslateService in the app.component.ts and inside that we check if the default Lang is Arabic and then set an attribute to "rtl":

//this is to determine the text direction depending on the selected language
      this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
      {
        if(event.lang == 'ar')
        {
          this.textDir = 'rtl';
        }
        else
        {
          this.textDir = 'ltr';
        }
      });

Then in the container of the app (app.html file) we set the dir="{{textDir}}": <ion-nav [root]="rootPage" dir="{{textDir}}"></ion-nav>

It works fine, but it would be great if this awesome library could support this 😃

Hope I have been of some help. Please let me know if you need more details.

[emoralesb05]

Just my 2 cents but to me that seems like a proper solution since you can have an array with the rlt languages

let rtlLangs = ['ar','morelangs'];

this.translate.onLangChange.subscribe((event: LangChangeEvent) => { 
  this.dir = rtlLangs.indexOf(event.lang) > -1 ? 'rtl' : 'lrt';
});

This way ngx-translate stays agnostic of what dir is but you can still use leverage it.

[shangab]

@djabif Thanks for the tips: I modified your solution to cope with Angular 6+ web applications: Put the below code in the constructor of app.component.ts:

this.translate.onLangChange.subscribe((event) => { this.lang=event.lang; if (event.lang == 'ar') { this.ltrrtl = 'rtl'; } else { this.ltrrtl = 'ltr'; } document.getElementsByTagName("html")[0].setAttribute('lang', this.lang); document.getElementsByTagName("body")[0].setAttribute('dir', this.ltrrtl); });

[MedHassona]

thank you very much @djabif this really hilped me and made the way much shorter for this "Text direction stuff", god bless you always.

[orhanbhr]

Thanks @djabif Good works.

[shalini-github]

@djabif hi how to use these lines ngx translate latest version. it gives Cannot find name LangChangeEvent error in editor.

[viveksai26]

<div [dir]="'direction' | translate">
Code to be inverted
</div>