The HTML <bdi> element is used to isolate text that might be formatted in a different direction from other text in the same block.
The abbreviation “bdi” stands for “Bi-Directional Isolation.”
The <bdi> element was introduced in HTML5 and is a helpful tool for ensuring that text is displayed correctly. It’s particularly useful when dealing with mixed scripts in bi-directional languages, such as Arabic or Hebrew, where text is written from right to left and numbers from left to right.
Syntax
The syntax for the <bdi> element is straightforward:
1 |
<bdi>lorem ipsum</bdi> |
This syntax creates an inline element that can be used to isolate bi-directional text.
Example
Here is an example of how the <bdi> element can be used in an HTML document. This is English content, displayed left-to-right (LTR), but it contains some Arabic script which is read right-to-left (RTL). This can sometimes confuse browsers.
Notice how, when <bdi> isn’t used, owing to the presence of characters with “neutral or weak directionality” (numbers, in this case) the browser doesn’t correctly interpret the combined Arabic and English content:
1 |
<ul>
|
2 |
<li><bdi>ابراهيم</bdi>: 3 days</li> |
3 |
<li><span>Barry</span>: 10 days</li> |
4 |
</ul>
|
Attributes
The <bdi> element does not have any attributes.
Content
The <bdi> element can contain any text or HTML elements.
Related HTML Elements
- The
<bdo>(Bidirectional Text Override) element can be used to isolate text in a similar way to the<bdi>element, the exception being that it forces its contents to display in the opposite direction to the flow of the surrounding content.
Did You Know?
- The
<bdi>element can also be used to isolate text formatted differently, such as text displayed in a different font or size. - The
<bdi>element can be combined with the CSSdirectionproperty to control the direction of the text inside the element.
Learn More
HTML Elements
By
