Français

<bdi>

Bidirectional text (Arabic, Hebrew)

— 1 min read

  • HTML
  • accessibility
  • semantics
  • internationalisation

<bdi> + <bdo> — Bidirectional text

<bdi> (Bidirectional Isolate) isolates a segment of text whose direction may differ from the surrounding text. <bdo> (Bidirectional Override) forces a specific writing direction (ltr or rtl).

When to use it

You are displaying user-generated content or proper names in mixed languages. <bdi> is the default choice: it lets the Unicode algorithm determine direction and prevents inserted text from contaminating the surrounding text. <bdo> is reserved for cases where you want to force a direction — for example, displaying Arabic text left-to-right for a demonstration.

What you gain

Accessibility: without <bdi>, an Arabic name inserted in an English sentence can reverse the order of surrounding words. Both screen readers and visual display are affected. <bdi> ensures each segment is read in the correct order.

Code example

<!-- bdi: isolate user-generated content -->
<p>
  User <bdi>محمد</bdi> posted 3 comments.
</p>
 
<!-- bdo: force direction for demonstration -->
<p>
  The word "hello" reversed: <bdo dir="rtl">hello</bdo>
</p>

Further reading