bdi tag in html5 with example
- The
<bdi>tag is used on a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. - bdi stands for Bi-directional Isolation.
- This tag is used to embed user generated content which has unknown direction.
Example 1 :
<html>
<head><title>bdi tag in html5</title>
<style type="text/css"">
bdi
{
color:orange;
font-size:20px;
}
</style>
</head>
<body>
<ol>
<li>User <bdi>homerjay</bdi>: 1601 posts</li>
<li>User <bdi>msimpson</bdi>: 335 posts</li>
<li>User <bdi>إيان</bdi>: 195 posts</li>
<li>User إيان: 195 posts</li>
<li>User <bdi>moe</bdi>: 2 posts</li>
</ol>
</body>
</html>
Demo :
In the above example, we have shown how to use bdi element. bdi tag is usually used to embed text which is different in direction to english text. For Example : Arabic text is written from right to left, which is contrary to english text written from left to right. In order to embed Arabic text along with english we can use bdi tag.
In the above example, in third li element we have used bdi element to show arabic text in sam direction to english tag. In 4th li element we have not used bdi element and that is why the arabic text is on right side.
0 comments:
Post a Comment