Right-to-Left Support with Ionic: Challenges and Solutions
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.
