HTML <bdi> tag
The <bdi> tag stands for Bi-Directional Isolation. It defines a part of text that can be formatted in a different direction from the surrounding text. It is mostly used when a right-to-left language, such as Arabic or Hebrew, is used inline with left-to-right languages.
Type: Inline Element
English is left-to-right language whereas Arabic is right-to-left language. Without <bdi> tag, the browsers may reorrange the characters incorrectly.
Example of <bdi> tag
<bdi> الهند </bdi>:132
If you don't use <bdi> tag in the above example, the number (132) might come first before الهند or it will cause punctuation issues.
Supported Browsers
| Tag | Chrome | Internet Explorer | Firefox | Safari | Opera Mini |
|---|---|---|---|---|---|
| <bdi> | Yes | No | Yes | Yes | Yes |
Full code example
<!DOCTYPE html> <html> <head> </head> <body> <p><bdi>الهند</bdi>:275 runs in 50 overs. <br> <bdi>باكستان</bdi>:250 runs in 50 overs. </p> <p>Internet explorer does not support this tag, hence the two Arabic words may come after 275: and 250:</p> </body> </html>
Output on the browser
الهند :275 runs in 50 overs.
باكستان :250 runs in 50 overs.
Internet explorer does not support this tag, hence the two Arabic words may come after 275: and 250:
More reference
You might be confuse of this tag. Open Notepad and create an HTML document named page.html. Write the Arabic word الهندinside the <body> element, then write a number such as 1243 after it. When this file is opened in a browser, the number may appear before the Arabic word due to right-to-left text direction.