Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
130 Views
