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).
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.
Example screenshot of the page with right-to-left content
The following steps should help manage bi-direction in your HTML document.
If the overall document direction is right-to-left, add the attribute
Create Sass mixings that help manage right-to-left and left-to-right.
@includeSass rule to create block wrapper for specified direction. You can use these mixins to handle CSS properties such as
Which effectively will produce:
Changing the locale in Chromium-based browsers
In all Chromium-based browsers 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
Inspectelement 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.
- Select a predefined city or define your own.
Location unavailableto 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
Tips and tricks
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.
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.
We recommend to read
Structural markup and right-to-left text in HTML by W3C (World Wide Web Consortium).