[WORK IN PROGRESS]

...

What was the idea behind the RTL Support?

...

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