<bdi>
Isolates a piece of text whose writing direction is unknown, e.g. a username written in Arabic.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>This week's leaderboard:</p>
<ol>
<li><bdi>Karolina</bdi>: 120 pts</li>
<li><bdi>ุณูู
ู</bdi>: 95 pts</li>
<li><bdi>ื ืืขื</bdi>: 80 pts</li>
</ol>
<p>Without isolation: ุณูู
ู: 95 pts</p>In the last paragraph, the point count jumped in front of the name, because the browser treated it as part of the Arabic text.
Definition and usage
#The <bdi> element (from bidirectional isolate) isolates a piece of text whose writing direction isnโt known in advance. A typical example is usernames, product titles, or comments that might be written in English as well as in Arabic or Hebrew, that is, right to left.
Without isolation, the browser treats such a fragment as part of the surrounding sentence, and the direction-resolution algorithm can rearrange neighboring characters. In the example leaderboard, the point count then jumps in front of the Arabic name. <bdi> closes the text in its own "box," so it doesnโt affect its surroundings.
The browser determines the direction of the text inside <bdi> on its own, based on the first character with a defined direction, as if the element had a dir="auto" attribute. If you want to force a specific direction, use <bdo>.
Syntax
#<bdi>text of unknown direction</bdi>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Default CSS
#Most browsers display this element with these default styles:
bdi {
unicode-bidi: isolate;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Wrap all user-supplied data you insert into the middle of a sentence in
<bdi>: names, titles, comments. <bdi>detects the text direction on its own, while<bdo>forces it. With user-supplied content, you almost always need the former.- In form fields, the global
dir="auto"attribute gives a similar effect.
Related entries
#- <bdo>Forces the textโs display direction, bypassing the automatic bidirectional algorithm.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <ruby>Ruby annotations: small text above characters, most often the pronunciation of Chinese or Japanese characters.
- <p>A paragraph of text.
Spotted a mistake or missing an example? Write to us.