Summary -

In this topic, we described about the <bdi> tag along with detailed example.

The <bdi> tag is new in HTML5. bdi stands for Bi-directional Isolation. Bidirectional isolates text from its current environment where bidirectional formatting required.

The <bdi> tag used to create a 'Bi-Directional Isolation'. The <bdi> tag isolates a part of text in a different direction from other text around to it. The importance of bdi is that to change the directionality of text.

The <bdi> tag can be useful specially when displaying right-to-left text inside left-to-right text. The text should be specified in between the opening and closing tags <bdi></bdi> to apply Bi-directional Isolation. The <bdi> element allows to the correct directionality of text when this is unknown.

Syntax -

<bdi>.. text here.. </bdi>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>bdi text example.. </title>
	</head>
	<body>
		<p> This text is normal left to right 
		(<bdi> English</bdi>) text</p>
		<p> <bdi> यह हिंदी पाठ छोड़ दिया करने के लिए सामान्य सही है </bdi></p>
		<p> This text is normal right to left 
		(<bdi> Hindi</bdi>) text</p>
	</body>
</html>

Output -

This is normal left to right ( English) text

यह हिंदी पाठ छोड़ दिया करने के लिए सामान्य सही है

This is normal right to left ( Hindi) text