{"id":1876,"date":"2017-06-15T19:24:33","date_gmt":"2017-06-15T19:24:33","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1876"},"modified":"2020-09-22T20:56:04","modified_gmt":"2020-09-22T20:56:04","slug":"ionic-and-rtl","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-and-rtl","title":{"rendered":"Ionic and RTL"},"content":{"rendered":"

\n This is a guest post from community member, Amit Moryossef<\/a>. Amit has been working on adding RTL support into Ionic.\n<\/p><\/blockquote>\n

Ionic has always been an awesome framework for creating apps that use left-to-right (LTR) languages<\/a>, because it was designed this way from the beginning. For most people, this works great. The vast majority of languages are LTR, and their users may not know of any other possibility.<\/p>\n

However, there are some languages used by millions throughout the world which are read right-to-left (RTL), such as Hebrew<\/a> and Arabic<\/a>. Ionic’s latest release includes additional support for RTL<\/em> languages enabling developers to easily create a natural reading experience.<\/p>\n

<\/p>\n

Supporting RTL is a challenge because this \u201cfeature\u201d is not a first class citizen everywhere (Apple didn\u2019t even support RTL in iOS until version 9). CSS was also never originally designed for multidirectional support, but this is starting to change as more people request it.<\/p>\n

What Are We Doing About It?<\/h3>\n

The goal is simple. We are committed to supporting RTL applications, or multi-directional applications, as soon as possible, while continuing to support LTR in Ionic.<\/p>\n

To reach this goal, small adjustments are being merged in every release to the current major version of Ionic (3.x.x). With this cadence, the next major version release of Ionic will have complete RTL support.<\/p>\n

<\/p>\n

The Journey<\/h3>\n

The Ionic team has been supportive in adding RTL to the framework. Since Ionic is an open source project, and since the community has much more experience with RTL languages, it became a welcomed community effort.<\/p>\n

First, we tried to handle one component at a time by adding custom CSS selectors<\/a> for RTL. It proved to be possible, but not feasible. Duplicating CSS selectors to make the CSS properties compliant with RTL was not easily maintainable, and we had to find a different way to tackle this problem.<\/p>\n

We decided that we needed to take advantage of Sass mixins<\/a> to compensate for the lack of RTL support in CSS. For example, using the property padding: 1px 2px 3px 4px<\/code> in RTL doesn’t look correct, because CSS uses the format of top right bottom left<\/code> on both LTR and RTL directions.<\/p>\n

We found that the words left<\/code> and right<\/code> do not make sense to use for both directions, and decided on what more progressive CSS already uses:<\/p>\n