[WORK IN PROGRESS]

Introduction

What was the challenge?

Supporting multiple text directions, specifically RTL and LTR, presented a challenge because most modern web applications are designed with LTR layouts as the default. This creates a hurdle when expanding the user base to regions where languages like Arabic, Hebrew, and Urdu, which use RTL, are commonly spoken. Without proper support, the UX in these regions becomes inconsistent, not intuitive, and potentially unusable.

Why do we want to support multiple text directions?

The primary reason for supporting both RTL and LTR directions is to provide an inclusive and accessible user experience for all users, regardless of the language they speak or the region they are from. This ensures that the OpenLMIS App can cater to a global audience, improving usability for RTL language speakers. By offering a layout that automatically adjusts based on the language, we can provide a more intuitive, user-friendly interface, contributing to better adoption and engagement in international contexts.

Overview

What was the idea behind the RTL Support?

How does the App automatically adjust layouts based on language?

We have managed to implement automatic page orientation change, after the user switches to the RTL oriented language. It is very easy to configure for any OpenLMIS instance. You can do it just by adding the language to the “supportedRTLLanguages" array in the config.json file.
In the example below Arabic language is set as the RTL supported. So if user will switch to this language page will change it’s direction automatically.

Documentation

Introduction

This documentation provides a detailed explanation of various SCSS mixins designed for padding, margin, border, direction handling, and more. Which are basically properties that do not support RTL.
These mixins help ensure consistency across both Left-to-Right (LTR) and Right-to-Left (RTL) layouts.

@mixin direction

This mixin handles text direction based on the dir attribute. It applies ltr (Left-to-Right) or rtl (Right-to-Left) based on the document direction. It is applied to all elements in the application. Thanks to that for example the date picker component is changing it’s direction.

@mixin direction() {
    [dir="ltr"] & {
        direction: ltr;
    }
    [dir="rtl"] & {
        direction: rtl;
    }
}

@mixin translate-x($value)

Translates an element along the X-axis, respecting the dir attribute. If in rtl mode, the translation direction is reversed.

Guidelines