Teach with us

How to represent text that must be isolated from its surrounding for bidirectional text formatting in HTML?

The <bdi> HTML element instructs the bidirectional algorithm of the browser to treat the text it contains independently of the content around it. It's very helpful when a website dynamically adds some text without knowing which direction it should go.

For example, few languages like Arabic, Urdu or Hebrew are written in the right – to – left direction instead of the usual left – to – right. We use the <bdi></bdi> tag before and after the text that goes in the opposite direction of the script to rearrange it.

However, if there is confusion about the text direction or we do not know which direction the text goes in, apply the dir = auto tag to any markup wrapping the text location. But if there is no markup present, wrap the text with the bdi tag again.

Syntax

<bdi> text </bdi>

Following are the examples…

Example

In the following example we are using bdi element to represent a span of text to get isolated from its surroundings. Here, we are wrapping one line in Arabic using the bdi tag and another line with the span markup using the dir = auto tag.

<!DOCTYPE html>
<html>
<body>
   <h1>World wrestling championships</h1>
   <ul>
      <li><bdi class="name">Akshay</bdi>: 1st place</li>
      <li><bdi class="name">Balu</bdi>: 2nd place</li>
      <li><span class="name">Mani</span>: 3rd place</li>
      <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
      <li><span class="name" dir="auto">تیز سمی</span>: 5th place</li>
   </ul>
</body>
</html>

Output

On executing the above script, the output window opens up consisting of different wrestling champions added with <bdi> along with their position to make our text in the right way.

Updated on 05-Sep-2022 12:26:38

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements