bdo tag in html with examples

Home » HTML » HTML Tags » bdo tag in html with examples

bdo tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The bdo tag is used for overriding the text direction.
bdo stand for Bi-Directional override.
This can be useful when displaying hebrew, arabic, and other languages/scripts that are written from right to left.
dir is used to specify the direction and can be set to ltr (left-to-right) or rtl(right-to-left).
The bdo is supported in all major browsers.

Exmaple 1 :

     <html>
     <head>
     <title>BDO</title>
     </head>
     <body>
     <p><bdo dir="rtl">This is 20Fingers2Brains.</bdo></p>
     <p><bdo dir="ltr">This is 20Fingers2Brains.</bdo></p>
     </body>
     </html>

Demo :

In the above example, we have rendered bdo elements inside paragraph element. We have defined different directions for both the bdo elements.

bdo and Style :

<html>
<head>
<title>BDOStyle</title>
<style type="text/css">
#rtl
{
color:green;
font-famly:comic sans ms;
font-size:30px;
}
#ltr
{
color:red;
font-famly:comic sans ms;
font-size:30px;
}
</style>
</head>
<body>
<p><bdo dir="rtl">This is 99CodingExamples.</bdo></p>
<p><bdo dir="ltr">This is 99CodingExamples.</bdo></p>
</body>
</html>

Demo :

In the above example, we have applied CSS to bdo element.

bdo and Javascript :

<html>
<head><title>BDOJavascript</title>
<style type="text/css">
bdo
{
color:green;
font-famly:comic sans ms;
font-size:30px;
}
</style>
<script type="text/javascript">
function bdo()
{
var element=document.createElement("bdo");
element.setAttribute("dir","rtl");
var text=document.createTextNode("This is 99CodingExamples.");
element.appendChild(text);
document.getElementById("bdo").appendChild(element);
}
</script>
</head>
<body>
<div id="bdo">
</div>
<input type="button" id="b1" value="Press" onclick="bdo()" />
</body>
</html>