How Tos

Right-to-Left (RTL) Support

Themes (Dark Mode)

Our design system supports right-to-left (RTL) languages. This document provides guidelines for implementing RTL support, enabling the design system to adapt to languages such as Arabic, Hebrew, Persian, and Urdu.

Overview of RTL

When working with RTL languages, the layout direction changes from left-to-right (LTR) to right-to-left. This means all UI elements, text, and interactions should mirror to provide a natural reading and usage flow for RTL languages users. Our design system has built-in RTL support to ease this transition.

Click here to test rtl on this page:

Implementation

Text Direction

Switch the text direction by adding the attribute dir="rtl" to the root HTML element.

<html dir="rtl"></html>

Components

The components automatically switch there behaviour based on the dir attribute of the parent.

CSS/SCSS

If CSS needs to be updated to support RTL layout, you should use logical properties and values. Logical properties allow you to control layout through logical, rather than physical, direction and dimension mappings.

For example, instead of using margin-left in your CSS, use margin-inline-start.

.element {
  /* LTR style */
  margin-left: 10px;


  /* RTL Compatible */
  margin-inline-start: 10px;
}

The rtl and ltr scss helper mixin helps changing the direction in scss. It is used like this:

// Import the entire components library
@use "@wfp/styles/scss/components" as *;


// Or only import the rtl mixin
@use "@wfp/styles/scss/utilities/_rtl.scss" as *;


.element {
  @include ltr {
    color: blue;
  }
  @include rtl {
    color: green;
  }
}

Images and Icons

Icons and images with directional cues should also be mirrored. For instance, an arrow that points to the next item in LTR languages should point to the previous item in RTL languages.

.rtl {
  transform: scaleX(-1);
}

Flex and Grid

For flex and grid layouts, replace row and row-reverse with row and row-reverse, respectively, for the flex-direction property.

.element {
  /* LTR style */
  flex-direction: row;


  /* RTL Compatible */
  flex-direction: row-reverse;
}

References

Further Resources

For further reading on RTL support and the use of logical properties, please refer to these resources:

On this page