06.06.2018 in entwicklung

Right-to-Left Support with Ionic

Challenges and Solutions

RTL Support with Ionic

All apps that we have developed and released until today are mostly built for a German or English-speaking audience. Thus, there has never been a reason for us to think about supporting languages that are based on a right-to-left script. However, one of our recent apps targets users from the the arabic language area, too. So for the first time we were facing the challenge to build an app that supports a fully bidirectional User Interface (UI).

#What to consider when implementing right-to-left support

There are several things that have to be taken into account when it comes to the implementation of a right-to-left UI. The most obvious difference is that most of the UI needs to be mirrored along the y-axis. The text in general should be right-aligned. Components like a sidebar must be placed opposite to their original position on a left-to-right interface. Sliders and page transitions have to be inversed, too. Icons should only be mirrored if they indicate a certain direction, e.g. a back-button. Nevertheless, digits like dates, times or phone numbers should not be flipped, as they are read identically in both LTR and RTL. The same rule is applied for untranslated text and data visualizations like charts or graphs. Furthermore UI elements like audio controls and video progressbars should not change, because they depict the direction of the tape, not the direction of the time.

#Built-in Ionic features

Luckily, Ionic comes with built-in RTL support. The app direction can be set to ltr, rtl or multi according to your requirements. This direction defines the start and end properties of the UI. For ltr the UI will start to build up from the left. The same applies vice-versa for rtl. In addition, Ionic enables the developer to switch the direction of the app at runtime. In order to handle styling consistently without confusing too much about the current app direction, SASS mixins are at hand. Those mixins get rid of the traditional CSS left and right approach and always use the current start and end properties instead. Other mixins handle direction specific styling or automatic mirroring of SVG-Icons.

#Review of the implentation

In retrospect we could implement the RTL support for our Ionic app quite seamlessly. When changing the app's direction at runtime the UI updates accordingly like a charm. There were some tricky parts with the image sliders, directional animations and getting the punctuation right for bidirectional texts. But nothing, that we were not able to solve. In the end it was a nice experience to see how easy it is to provide the best user experience for different directional language scripts.

Weitere Beiträge

Alle Artikel lesen
15.01.2016

Happy Birthday Hybrid Heroes

In eigener Sache
lesen
22.12.2015

Der schnellste Weg zum App Store Account

Anleitung für Android, iOS und Windows Phone
lesen

Wir helfen Ihnen gerne

Wir sind gespannt auf Ihr Projekt! Schreiben Sie uns eine Nachricht und wir melden uns innerhalb weniger Stunden zurück. Oder rufen Sie uns einfach an!

hello@hybridheroes.de
+49 30 23390434
Sprechen Sie uns an!