<bdi> Bidirectional isolate
Isolates text of unknown direction, such as user names.
<bdi> isolates a piece of text so its writing direction cannot disturb the text around it. That helps with content you do not control, like user names that might be in Arabic or Hebrew.
Without it, right-to-left text beside numbers or punctuation can come out in a confusing order. Pages that never mix left-to-right and right-to-left text do not need it.
The bdi element definition (opens in a new tab) targets user-generated text, such as usernames, whose direction is unknown. Compare it with the bdo element.
Syntax
<bdi>text of unknown direction</bdi>When to use it
Wrap <bdi> around text whose direction you cannot predict, usually because users or other systems supply it: names on a leaderboard, comment authors, product titles from a marketplace feed, search results, or chat messages. Each piece then gets its direction detected on its own and cannot reorder the numbers or punctuation next to it.
A span with dir="auto" gives the same isolation in current browsers, because any element with a dir attribute is isolated. bdi is handy because it isolates without needing an attribute. For text whose order you want to force, there is bdo; for a whole paragraph in a right-to-left language, set dir and lang on the paragraph.
Wrap only the unknown part. If you include the label or the number in bdi, those can be pulled into the wrong direction too. And bdi does not set the language: if you know it, add a lang attribute as well.
Live example
Edit the code and watch the preview.
<ul>
<li>User <bdi>jo_smith</bdi>: 12 posts</li>
<li>User <bdi>إيان</bdi>: 7 posts</li>
</ul>More examples
Leaderboard with and without bdi
The same Hebrew name appears in two paragraphs. Without bdi, the score can jump to the wrong side of the name; with bdi, the name is isolated and the score stays where you wrote it.
<h2>Without bdi</h2>
<p>דנה: 3 points</p>
<h2>With bdi</h2>
<p><bdi>דנה</bdi>: 3 points</p>Search results from mixed languages
Search results can come from any language. Each title goes in bdi, so an Arabic title does not disturb the result number after it. A span with dir="auto" does the same job.
<ol>
<li><bdi>Easy pancakes</bdi> (12 reviews)</li>
<li><bdi>فطائر</bdi> (8 reviews)</li>
<li><span dir="auto">فطائر</span> (5 reviews)</li>
</ol>Tip: On multilingual pages, wrap user-generated names in bdi.
Browser support
bdi is supported in current versions of Chrome, Firefox and Safari, and in Edge since version 79. Internet Explorer and the old EdgeHTML-based Edge did not isolate it. See the bdi element support table (opens in a new tab) for details.
Accessibility
When the text direction is right, screen readers read mixed-language content in the right order. If you know the language, add a lang attribute to the bdi as well. The rules underneath all this are in the Unicode Bidirectional Algorithm (opens in a new tab).
Common mistakes
Wrong
<li>User <span>{name}</span>: 3 posts</li>Right
<li>User <bdi>{name}</bdi>: 3 posts</li>A right-to-left name that is not isolated can reorder the number and punctuation after it.
Frequently asked questions
When should I use the bdi tag?
Around text whose direction you cannot know in advance, which mostly means user-generated content: usernames, product names, search terms. Without <bdi>, a right-to-left name such as an Arabic username can rearrange neighbouring numbers and punctuation, and a score may end up next to the wrong name. Why mixed scripts can appear reordered is explained in Wikipedia's article on bidirectional text (opens in a new tab).
What is the difference between bdi and bdo?
<bdi> isolates text and lets the browser detect its direction, leaving the text around it alone. <bdo> overrides the bidirectional algorithm and forces the direction set by its required dir attribute. Reach for bdi with unknown text, and for bdo only when you deliberately need to force character order.