<bdi> Tag in HTML
The <bdi> tag stands for "Bidirectional Isolation" and is used to isolate a part of text that might be formatted in a different direction (like when mixing right-to-left and left-to-right text). It helps prevent formatting issues caused by text direction changes.
Key Points on <bdi> Tag:
- The
<bdi>tag isolates a portion of text from the surrounding content, so that the direction of the surrounding text doesn’t affect it. - It is particularly useful when mixing text that has different writing directions (e.g., Arabic and English).
- Commonly used when working with dynamic content such as user input or external data.
Syntax of <bdi> Tag:
Syntax Example
<bdi>Your bidirectional text here</bdi>Example of <bdi> Tag in HTML:
This example demonstrates how the <bdi> tag is used to isolate a segment of text.
Code Example
<html>
<head></head>
<body>
<p>This is a text containing an isolated مرحبا word.</p>
</body>
</html>
Output
This is a text containing an isolated مرحبا word.
The <bdi> tag ensures that the isolated content is not affected by the text direction of the surrounding content. In this case, the Arabic word "مرحبا" is displayed without being impacted by the left-to-right text of the surrounding English sentence.