HTML <bdi> tag

Use of <bdi> tag

The <bdi> tag stands for Bi-Directional Isolation. It defines a part of text which can be formatted in different directions from the neighboring texts. This is mostly used when a language with right-to-left directionality, such as Arabic or Hebrew, is used inline with left-to-right languages.

For example, in any notepad or text editor, you can not write like الهند:132 without <bdi> tag.
Display: Inline

Example of <bdi> tag

<bdi> الهند </bdi> :132

In any notepad or text editor, you can not write like الهند:132 without <bdi> tag.

Supported Browsers

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<bdi> Yes not supported Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Run Scoreboards in the last ODI match between India (الهند) v/s Pakistan (باكستان). <br>
<bdi> الهند </bdi> :276 runs in 50 Overs with 7 wickets.<br>
<bdi> باكستان </bdi> :250 runs in 50 Overs with 9 wickets.
</p>
<p>
Internet explorer does not support bdi tag and hence the two Arabic Words would come after 276: and 250:
</p>
</body>
</html>

Output

Run Scoreboards in the last ODI match between India (الهند) v/s Pakistan (باكستان).
الهند :276 runs in 50 Overs with 7 wickets.
باكستان :250 runs in 50 Overs with 9 wickets.
Internet explorer does not support bdi tag and hence the two Arabic Words would come after 276: and 250:

More Reference

You might be confuse of this tag. Let me explain more something.
Open your notepad and create an HTML document named as page.html
Write باكستان in page.html within body section. Then write any number like 1243 after the Arabic word, your notepad would automatically force you to write this number before the Arabic Word.