The bi-directional text (<bdi>) element

The HTML5 <bdi> element (or Bi-Directional Isolation Element) isolates a span of text that might be formatted in a different direction from other text outside it. It is very useful for embedding user-generated content with not know text direction.

Syntax:

<bdi></bdi>

Attributes:

global attributes
event attributes

Example

The bdi tag basic example:

<!DOCTYPE html>
<html lang='en-us'>
<head><style type='text/css'>
	body{background-color:#343434; color:#ddd;}
	bdi{background:#fff; height:22px; margin:0px; color:red; padding:0px 4px;}
</style></head>
<body>
<ul>
 <li>User abjj: 60 points</li>
 <li>User <bdi>Abh</bdi>: 80 points</li>
 <li>User <bdi>&Oslash;&yen;&Ugrave;&#138;&Oslash;&sect;&Ugrave;&#134;</bdi>: 90 points</li>
</ul>
<p><b>Note:</b> The bdi element is currently supported only in Firefox and Chrome.</p>
</body>
</html>

›› go to examples ››

The bi-directional text (<bdi>) element

Syntax:

Attributes:

Example

The bdi tag basic example:

Comments

About

Contact

Get Connected