0Pricing
HTML Academy · Lesson

The bdi and bdo Elements

Isolate and override text directionality with bdi and bdo.

Why Bidi Control Elements?

The Unicode Bidirectional Algorithm normally handles mixed-direction text well, but sometimes you need to override it — to isolate a user-supplied name from changing the direction of surrounding text, or to force a specific direction in a code block.

The bdi Element

<bdi> (bidirectional isolation) treats its contents as a separate bidi context. The direction of text inside <bdi> cannot affect the direction of text outside it, and vice versa.

<p>User <bdi>{username}</bdi> posted at 12:34</p>

All lessons in this course

  1. The lang Attribute and Screen Readers
  2. dir=rtl for Right-to-Left Text
  3. The bdi and bdo Elements
  4. charset and Unicode Handling Special Characters
← Back to HTML Academy