Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html

What is the <bdi> element in HTML?

Muhammad Ashir

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The bi-directional isolate <bdi> element tells the browser to treat the encapsulated text separately from its surroundings.

<bdi> is useful when the website needs to insert text dynamically and does not know the direction of the given text. For example, the given text can be in Arabic script, in which case not using the <bdi> tag would change the direction of neutral characters (like the period or the exclamation mark) depending on the directionality of the text.

Attributes

<bdi> supports all global attributes except the dir attribute (in its case, the dir element defaults to auto).

Code

Here, if the <bdi> tag is not used around the names, then the text in Arabic script would not be rendered correctly. In the following line, the browser would change the direction of the neutral characters (: 5’11) to “right-to-left” because of the direction of the adjacent name which is in Arabic script.:

 <li><bdi>أسد</bdi>: 5'11 ft</li>

RELATED TAGS

html

CONTRIBUTOR

Muhammad Ashir
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring