1. Home
  2. Lessons
published
30 December 2024
by
Ray Morgan
updated
9 January 2025

Text Directionality

Text directionality is crucial when designing multilingual and bi-directional web content. In most languages, text flows left-to-right (LTR). In a few, like Arabic, Hebrew, and Persian, it flows right-to-left (RTL). (Some may flow flow vertically; we'll deal with that later in this chapter.) Some circumstances involve text that combines LTR and RTL scripts, such as an Arabic word or sentence within English phrases.

Handling these differences effectively involves more than might be apparent, but getting it right ensures your web pages are accessible, visually coherent, and functional in all languages.

Key Aspects of Directionality in Web Design

Text directionality impacts various elements of a web page:

  • Text Flow and Layout: Affects alignment, padding, and positioning.
  • Input Fields: Directionality settings for labels, text entry fields, and other form controls.
  • Interactive Elements: Menus, buttons, and navigation.
  • Icons and Symbols: Adjust placement to match text flow (e.g., arrows, progress bars).
  • Mixed Text: Managing segments of text with different directionalities (e.g., user-generated content or multilingual titles).

HTML and CSS for Managing Text Directionality

The dir HTML Attribute

The dir attribute specifies the text direction for an element. It is global and can be applied to any HTML element.

Values:

ltr: Left-to-right (default).

rtl: Right-to-left.

auto: Browser determines direction based on content.

Example:

<html lang="ar" dir="rtl">
    <body>
        <p>مرحبا بالعالم</p>
    </body>
</html>

The lang HTML Attribute

The lang attribute specifies the language of an element's content, improving accessibility and helping browsers and assistive technologies interpret the text correctly.

Example:

<p lang="en">Hello, world!</p>
<p lang="ar" dir="rtl">مرحبا بالعالم</p>

The <bdo> HTML Element

Use <bdo> (Bi-Directional Override) to force a specific text direction, overriding the default or contextual directionality.

Example:

<p>
    English text <bdo dir="rtl">مرحبا</bdo> more English text.
</p>

The <bdi> HTML Element

The <bdi> (Bi-Directional Isolation) element isolates a span of text with a different directionality to prevent it from affecting the surrounding content.

Example:

<p>
    User input: <bdi>مرحبا</bdi> appears within English text.
</p>

CSS Properties for Text Directionality

The direction Property

The direction property is analogous to the dir attribute in HTML; it specifies the text flow direction within an element.

Values:

ltr: Left-to-right.

rtl: Right-to-left.

Example:

.rtl {
    direction: rtl;
}

The text-align Property

The text-align property handles horizontal alignment of text.

Named Values:

start: Aligns based on text direction (left for LTR, right for RTL).

end: Opposite of start.

left, right, center, justify, justify-all, etc.

Example:

.text {
    text-align: start;
}

The unicode-bidi Property

The unicode-bidi property works with direction to control embedding and isolation of bi-directional text.

Values:

normal: Default behavior.

embed: Embeds text in the specified direction.

bidi-override: Forces text in the specified direction, overriding the bidirectional algorithm.

Example:

.override {
    direction: rtl;
    unicode-bidi: bidi-override;
}

Practical Use Cases

  1. Mixed Text Directions:

    <p dir="ltr">
    English text with <bdo dir="rtl">مرحبا</bdo> Arabic phrase.
</p>

  2. Input Fields: Ensure input fields respect text directionality:

    <input type="text" dir="rtl" placeholder="اسم المستخدم">

  3. Complex Layouts: Embed directional content into a larger layout:

    <div class="embedded">
    <p>LTR text with <span class="override">RTL content</span>.</p>
</div>

    .embedded {
    direction: ltr;
}
.override {
    direction: rtl;
    unicode-bidi: bidi-override;
}

Best Practices

  1. Start with Semantics: Use the dir and lang attributes correctly to define directionality and language.

  2. Isolate Unknown Content: For dynamic or user-generated text, use <bdi> to prevent layout issues.

  3. Avoid JavaScript for Directionality: Rely on semantic HTML and CSS instead of dynamically setting directions via JavaScript.

  4. Design for Mirroring: Ensure your layout can adapt to both LTR and RTL text flows.


← Back Next →
✕