Monday, 23/Sep/2019

Blog entry
Design systems
Right to left

Right-to-left languages in design systems

Photo by Pablo García Saldaña ⇥ on Unsplash

RTL (Right-to-left) languages tend to slightly complicate design systems. The rule of thumb is to mirror most of the UI so design elements implying direction are reversed to make sense to someone reading everything from right to left.

But alas, as with everything there are always exceptions. For example, a circular progress indicator needs to be the same as in LTR systems (clockwise) as the design is mimicking physical clocks.

Simple enough so far. It all starts to get rather complicated when the UI is set for an RTL language, but some content need to be in LTR. I know, right?

Imagine someone using an RTL app. More specifically, imagine someone typing in an input field using an RTL app. An LTR sentence of 6 words with a syntax of 1 2 3 4 5 6, where a number corresponds to a word, when in an RTL language should show with the order of 6 5 4 3 2 1.

But what should happen when you mix the two systems? What if someone writing in Arabic wants to add a term in English within a sentence? Languages retain directionality. So the above syntax would be 6 5 3 4 2 1, where 3 and 4 are in an LTR language, and the rest of the words in RTL.

previous blog entry

Component vs pattern libraries

Design systems  •  Component library  •  Pattern library  •  Taxonomy