<bdi>
The <bdi> HTML element tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 16 | 79 | 10 | 6 | 18 | 6 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
HTML
<ul>
<li>Username: <bdi>إيان</bdi> — Score: 90</li>
<li>Username: <bdi>John</bdi> — Score: 85</li>
</ul>Live demo
multi-languageyu-za-name
Bdi element in RTLword language. yu-za-name textdirection from separated.
PreviewFullscreen
Bdi with / none. comparison
Bdi(autodirectionseparated) and normaltext. behavior. Difference confirm.
PreviewFullscreen
Use cases
-
Using <bdi>
The <bdi> HTML element tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.