<html>
<body>
<p>
Student exam results
</p>
<div>
<p><bdi>taylor</bdi>: 84%</p>
<p><bdi>valentine</bdi>: 82%</p>
<p><bdi>اليِناءْ</bdi>: 77%</p>
</div>
</body>
</html>
The bdi element encapsulates a run of text that might have a different directionality from the text surrouding it. E.g. an english languge website displaying user names (read from a local db) in an unknown language.
bdi = bidirectional isolation.
A live example:
Student exam results (with BDI)
taylor: 84%
valentine: 82%
اليِناءْ: 77%
Student exam results (without BDI)
taylor: 84%
valentine: 82%
اليِناءْ: 77%
In the example above, without BDI, the browser is unable to parse the arabic characters in the context of the english text surrouding it, and the text is displayed incorrectly. Note the position of the number 77 and the percent sign.
N of