Dancing with Directions: The RTL Story

January 19

# Tech

# Front-End

What is RTL?

In frontend development, RTL (Right-To-Left) refers to a writing system where text flows from right to left. This layout is primarily used to support languages like Arabic (ar) and Hebrew (he), which naturally follow this direction. In contrast to the familiar LTR (Left-To-Right) layout, implementing RTL ensures that these languages are displayed and structured in a way that aligns with their native reading habits.

RTL layouts come with unique characteristics: paragraphs flow from right to left, the starting point of a document moves to the top-right corner, and even scrollbars might shift to the left side of containers. These nuances demand additional consideration during both design and implementation, presenting specific challenges for developers.

Why Should We Care About RTL?

With globalization accelerating, supporting multi-language and multicultural user interfaces has become increasingly important. Specifically, regions such as the Middle East and North Africa have a significant user base relying on RTL languages. By supporting RTL, you can:

• Enhance user experience and make your product feel localized.
• Expand your user base and tap into new markets.
• Avoid brand perception issues caused by inadequate language support.

Text Direction Basics

Most web pages default to LTR layouts. To enable RTL, developers often use the dir="rtl" attribute to reverse the text flow. But is RTL as simple as flipping text direction? Let’s explore this with the following code snippet:

Observations:

1. First Section (dir="ltr"):
   • English text displays left-to-right (as expected).
   • Arabic text also flows left-to-right, and punctuation aligns to the right side.
2. Second Section (dir="rtl"):
   • English text flows right-to-left, with words in the correct order but punctuation pushed to the beginning of the sentence.
   • Arabic text flows right-to-left naturally, with punctuation aligning to the left side.

Key Takeaways:

• Word Order Remains Intact: Regardless of the dir attribute, the natural word order for both English and Arabic remains unchanged. This is ensured by the Unicode Bidirectional Algorithm (Bidi Algorithm).
• Punctuation Placement Changes: Punctuation is influenced by the dir attribute. When the container’s direction conflicts with the text’s natural direction, punctuation aligns with the container’s flow.

The Unicode Bidirectional Algorithm (Bidi Algorithm)

In mixed-language documents, where LTR and RTL languages coexist, the Unicode Bidirectional Algorithm ensures correct visual arrangement of text. It applies a set of rules to determine the direction of each character based on its context.

Core Concepts of Bidi Algorithm

• Strong Directional Characters
  • Description: Characters with a default inherent direction (LTR or RTL), anchoring the flow of adjacent text.
  • Examples:
    • LTR: Latin letters, Chinese characters.
    • RTL: Arabic, Hebrew letters.
• Neutral Characters
  • Description: Characters without inherent direction, relying on context for placement.
  • Examples:
    • Punctuation (e.g., ., ,).
    • Spaces.
    • Brackets.
• Weak Directional Characters
  • Description: Characters with context-dependent direction, influenced by strong directional characters.
  • Examples:
    • Numbers.
    • Currency symbols (e.g., $123).
    • Separators.
• Directional Runs
  • Description: Sequences of characters with the same direction.
  • Examples: For ABC 123! שלום:
    • ABC (LTR).
    • 123 (LTR).
    • ! (neutral).
    • שלום (RTL).

Text Direction in Nested Contexts

In scenarios where LTR text embeds RTL content, or vice versa, browsers rely on the Bidi Algorithm to ensure proper alignment and reading order.

Examples:

Masked Bank Account Numbers

In an LTR environment:

In an RTL environment:

Here, the masked number aligns with the RTL flow due to its weak directionality and proximity to RTL characters.

Email Addresses

Email inputs in RTL contexts can yield unexpected results:

Breaking Free from Bidi Constraints

Although the Unicode Bidirectional Algorithm (Bidi) ensures proper rendering of mixed-direction text, it doesn't always meet specific layout requirements. Let's revisit the earlier examples.

Bank Account Masked Numbers

Suppose our design team specifies that bank account numbers should not undergo RTL mirroring. For example, in Arabic, the desired output should be:

Email Input

UED also specifies that email inputs should maintain an LTR order, even in RTL contexts. Desired outputs include:

CSS Properties: unicode-bidi and direction

If you need to control text alignment beyond Bidi's default rules—for example, to align parts of the text or the entire text freely based on specific requirements—you can use the unicode-bidi and direction properties.

The unicode-bidi property works in conjunction with the direction property to handle bidirectional text. For instance:

• unicode-bidi: Defines how mixed-direction text interacts with its context (e.g., ignore or isolate).
• direction: Sets the base text direction, similar to the HTML dir attribute, but controlled in CSS.

Bank Account Masked Numbers

To meet design team requirements and keep the LTR order for certain text segments in an RTL context, use one of the following methods:

Explanation:

• Option 1: unicode-bidi: embed;
  • Opens a new embedding level for bidirectional text.
  • Default direction inherits from the external context unless explicitly specified.
  • When combined with direction: ltr;, it ensures internal content flows left-to-right.
• Option 2: unicode-bidi: isolate;
  • Creates an isolated context where the inner text's directionality is fully independent of the outer text.
  • Internal content direction won't affect or be affected by the surrounding text.

Difference Between embed and isolate:

• Both establish a separate bidirectional text context.
• isolate ensures strict isolation, preventing external Unicode directional characters (e.g., LRE, RLE, PDF) from influencing inner content.

Email Input

To meet UED's requirement for LTR emails in RTL contexts, apply:

Explanation:

• direction: ltr;: Ensures internal text flows left-to-right.
• text-align: right;: Keeps text visually aligned to the right.

Alternatively, to reverse the email order (e.g., 1234@bd.com → moc.db@4321), use:

Explanation:

• unicode-bidi: bidi-override;: Forces text reordering based on the direction property, overriding implicit Bidi rules.

Using the <bdi> Element

The <bdi> (bidirectional isolate) element automatically detects and isolates its content's directionality. Unlike CSS, <bdi> provides semantic meaning that persists even if styles are disabled. This makes it ideal for dynamically inserted text with unknown directionality.

Example:

Difference Between <bdi> and unicode-bidi: isolate:

• unicode-bidi: isolate;: Requires explicit direction to define the inner text's flow.
• <bdi>: Automatically detects and applies the content's natural directionality.

With these tools, you can tailor bidirectional text layouts to meet specific needs while maintaining accessibility and usability.