References

Beginner-friendly references for web development, with live, editable examples.

The HTML <bdi> tag

Element All modern browsers Updated
Quick answer

The HTML <bdi> (bidirectional isolate) element isolates a span of text whose direction is unknown — typically user-generated content — so it cannot disrupt the direction of the surrounding text. Ideal for embedding names or input of unpredictable language.

Overview

The <bdi> (bidirectional isolate) element isolates its contents from the surrounding bidirectional text, so a right-to-left string dropped into left-to-right text (or vice versa) does not scramble the layout around it.

It is the right tool whenever you interpolate text of unknown directionality into a sentence — a username, a search term, or a value pulled from a database. Without isolation, an Arabic or Hebrew name placed next to punctuation and numbers can reorder the surrounding characters in surprising ways; <bdi> contains that effect.

Syntax

<p>User <bdi>إيان</bdi> posted a comment.</p>

Example

Live example 
<p>Top scorer: <bdi>محمد</bdi> — 42 points.</p>

Best practices

  • Wrap user-generated or database text of unknown direction in <bdi> when placing it inside other text.
  • Use it for names, search terms and interpolated values that might be right-to-left.
  • Prefer it over a plain <span>, which does not isolate bidirectional text.
  • For an explicit, forced direction rather than isolation, use <bdo> instead.

Frequently asked questions

What is the bdi element for?
To isolate a span of text from the surrounding bidirectional algorithm, so text of unknown direction does not disrupt the layout around it.
When should I use bdi?
When inserting text of unknown directionality — such as usernames or search results — into a sentence that may be left-to-right or right-to-left.
What is the difference between bdi and bdo?
<bdi> isolates text so its direction does not affect its surroundings; <bdo> forces a specific direction.
Why does my mixed-direction text look scrambled?
Right-to-left text next to numbers or punctuation can reorder surrounding characters. Wrapping the unknown-direction part in <bdi> isolates it and fixes the layout.
base bdo