On this page
Arabic text example

Sass with RTL and LTR support: creating multilingual websites

What would be the best way to implement RTL support in Sass? Methods and examples.

Sass with RTL and LTR support isn’t available out of the box, but it can be done through simple Sass @mixin and @include rules that can be used across all Sass files.

RTL stands for Right-to-Left. It is a writing direction used in languages such as Arabic, Hebrew, and Persian. Supporting both right-to-left (RTL), more often bi-directional (BiDi), and left-to-right (LTR) representations of Web pages can be a challange.

Note that you can also achieve the same with Less (which stands for Leaner Style Sheets).

Understanding Sass with RTL and LTR Support

To enable RTL support in your web page, you need to set the dir="rtl" and appropriate lang attribute to the <html> tag.

Example: <html lang="ar" dir="rtl">.

Key definitions and explanations

Quote from W3C:

Bidirectional text
Text that mixes runs of both LTR and RTL text inline. It is common for right-to-left scripts, such as Arabic and Hebrew, to contain short runs of left-to-right text (most commonly in the Latin script), and several of the scripts that are predominantly right-to-left display numbers from left-to-right. Bidirectional text is the source of many of the difficulties when dealing with RTL scripts.
A short form for ‘bidirectional’.
A short form for ‘right-to-left’.
A short form for ‘left-to-right’.
Base direction
In order for text to look right when an HTML page is displayed, we need to establish the directional context of that text. We refer to that directional context as the ‘base direction’.
It is fundamentally important to establish the appropriate base direction for text so that the bidirectional algorithm produces the expected ordering of the text when displayed. Correct specification of the base direction also establishes a proper default alignment for the text.
In HTML the base direction is either set explicitly by the nearest parent element that uses the dir attribute, or, in the absence of such an attribute, the base direction is inherited from the default direction of the document, which is left-to-right (LTR).
Unicode Bidirectional Algorithm
The Unicode Bidirectional Algorithm (UBA), often referred to as just the ‘bidi algorithm’, is part of the Unicode Standard. It describes an algorithm used when determining the directionality for bidirectional Unicode text and is widely supported by web browsers and other applications. For the details, see Unicode Standard Annex #9.

A screenshot of a page with right-to-left content

visitsaudi.com home page
visitsaudi.com home page screenshot

How to implement RTL and LTR support in Sass

The following steps should help manage bi-direction in your HTML document.

  • If the overall document direction is right-to-left, add the attribute dir="rtl" to the <html> tag.

    Example global right-to-left setting for the HTML page
    <!DOCTYPE html>
    <html dir="rtl" lang="ar">
    <meta charset="utf-8">
  • Create Sass mixings that help manage right-to-left and left-to-right.

    Sass mixing to handle right-to-left (RTL) and left-to-right (LTR)
    @mixin ltr() {
      @at-root & {
      @at-root [dir="ltr"] & {
    @mixin rtl() {
      @at-root [dir="rtl"] & {
  • Use @include Sass rule to create block wrapper for specified direction. You can use these mixins to handle CSS properties such as float, border, justify-content, margin, padding, and text-align.

    Sass mixing to handle right-to-left (RTL) and left-to-right (LTR)
    .example {
      .button {
        text-align: left;
        @include rtl {
          text-align: right;

    Which effectively will produce:

    Sass mixing @mixin rtl() output
    [dir=rtl] .example .button {
      text-align: right;

Changing the locale in Chromium-based browsers

In all Chromium-based browsers First created by Google, Chromium is open-source software that underpins many of the world’s most popular browsers, including Chrome, Opera, and Microsoft Edge. you can override geolocation in order to emulate specific location. You can provide latitude, longitude, timezone ID and locale.

To override your geolocation:

  • Open your developer tools, either by right-clicking the page and selecting Inspect element or using the keyboard shortcut (Ctrl+Shift+I on Windows and Cmd+Shift+I on Mac).
  • To open the last DevTools panel, click the three-dot menu button to the right of the address bar and select More Tools, Sensors. There should be the Sensors panel opened.

    Google Chrome developer tools with Sensors panel
    Google Chrome developer tools with Sensors panel
  • Select a predefined city or define your own.
  • Select Location unavailable to see how your site behaves when the user’s location is not available.
  • In addition, you can change the locale by setting the 1st language which is used to display websites as shown below. You can go to the chrome://settings/languages page.

    Google Chrome Languages settings
    Google Chrome settings languages

Tips and tricks for managing bi-directional text


You do not need to modify the way you display the time. So, do not modify the time from 11:15 to 15:11.


The parenthesis aren’t rendered correctly in RTL mode. The text John Doe (administrator) in RTL mode will be generated as John Doe (administrator(.

To fix the issue, you need to add special unicode characters. So, after opening bracket add LRE unicode (Left-to-Right Embedding, 0x202a) and PDF (Pop Direction Format, 0x202c) after closing bracket.

Example: John Doe (0x202aadministrator)0x202c

Note: There are a few different kinds of brackets: (), [], {}, (angle brackets), and (angle brackets). Angle brackets can be confusing as they look like the less than and greater than signs.

Additional resources for managing bi-directional text

We recommend to read Structural markup and right-to-left text in HTML by W3C (World Wide Web Consortium).

Related posts


Leave a Reply

Real-user monitoring for Accessibility, Performance, Security, SEO & Errors (SiteLint)