- Trending Categories
- Data Structure
- Operating System
- C Programming
- 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?
59 Lectures 8.5 hours
68 Lectures 8 hours
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.
<bdi> text </bdi>
Following are the examples…
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>
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.
- HTML Text Formatting
- Formatting Text in CSS
- How to set that the text direction will be submitted in HTML?
- Formatting Text Using CSS
- How to handle the error “Text strings must be rendered within a <Text> component” in ReactNative?
- How to add a spellchecker for text in HTML?
- How can Tensorflow text be used to preprocess text data?
- How to center text in HTML?
- How to specify that the element must be filled out before submitting the form in HTML?
- How to change text font for JLabel with HTML in Java?
- How to Create a Multi-line Text Input (Text Area) In HTML?
- How to display deleted text in HTML?
- How to set Text alignment in HTML?
- How to make text bold in HTML?
- How to make text italic in HTML?