<bdi>
The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text.
Overview
The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 16 | 79 | 10 | 6 | 18 | 6 | |
Syntax
<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.
Bdi with / none. comparison
Bdi(autodirectionseparated) and normaltext. behavior. Difference confirm.
Use cases
Using <bdi>
The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features