Bi-Directional Isolation in HTML5

How to display a text in the Bi-Directional way around the remaining text in HTML5?

The BDI Element stands for Bi-Directional Isolation Element, which is one of the best features of HTML5, <bdi> tag is used to embed user generated text whose direction is not known. Like Arabic, Urdu.

<body>
    This is used to embed user generated text whose direction is not known. 
    Like arabic, urdu.<br />
    Name: Age
    <p><bdi>Ram</bdi> : 50</p>
    <p><bdi>Shyam</bdi> : 60</p>
    <p><bdi>??? ?????</bdi>: 70</p>

    If bdi tag is not supported, the last one will appear in browser like 

    <p>: 70 ????? </p>
</body>

In the above there is an Urdu content inside the <bdi> tag.

Output

Notice that the information in <bdi> tag will appear as it is in the browser, if <bdi> tag is not supported it wills appear in the different format as mentioned in the above output.

NOTE

<bdi> tag was only supported by Chrome and Firefox

Views: 6768 | Post Order: 67