HTML5 Bdo Tag

You can override current directionality of text from right to left or left to right using HTML5
  • 2073
 

This <bdo> tag is used to specifies the direction of text displaying. This tag override current directionality of text. Mostly this tag used in Hebrew, Arabic and other language those use right to left pattern. You can write text weather from right to left or left to right using dir attribute of <bdo> tag. Full form of bdo is Bidirectional Override.

Syntax

<bdo
    class="class name(s)"
    dir="ltr | rtl"
    id="unique alphanumeric identifier"
    lang="language code"
    style="style information"
    title="advisory text">
</bdo> 

Example

<p>Welcome to CsharpCorner. <bdo dir="ltr">Thank you for visiting site.</bdo></p>
<p>Welcome to CsharpCorner. <bdo dir="rtl">Thank you for visiting site.</bdo></p>

Attributes Introduced by HTML5
Attributes Values
accesskey spaced list of accelerator key(s)
contenteditable true | false | inherit
contextmenu id of menu
data-X user-defined data
draggable true | false | auto
hidden hidden
itemid microdata id in URL format
itemprop microdata value
itemref space-separated list of IDs that may contain microdata
itemscope itemscope
itemtype microdata type in URL format
spellcheck true | false
tabindex number

 
Attributes Defined by Internet Explorer
Attributes Values
accesskey key" (5.5)
contenteditable inherit | false | true" (5.5)
disabled false | true" (5.5)
hidefocus true | false" (5.5)
language javascript | jscript | vbs | vbscript | xml" (5.0)
tabindex number" (5.5)
unselectable off | on" (5.5)

 
HTML5 Event Attributes
onabort onblur oncanplay oncanplaythrough
onchange onclick oncontextmenu ondblclick
ondrag ondragend ondragenter ondragleave
ondragover ondragstart ondrop ondurationchange
onemptied onended onerror onfocus
onformchange onforminput oninput oninvalid
onkeydown onkeypress onkeyup onload
onloadeddata onloadedmetadata onloadstart onmousedown
onmousemove onmouseout onmouseover onmouseup
onmousewheel onpause onplay onplaying
onprogress onratechange onreadystatechange onscroll
onseeked onseeking onselect onshow
onstalled onsubmit onsuspend ontimeupdate
onvolumechange onwaiting    

 
Events Defined by Internet Explorer
onactivate onafterupdate onbeforeactivate onbeforecopy
onbeforecut onbeforedeactivate onbeforeeditfocus onbeforepaste
onbeforeupdate onblur oncellchange oncontextmenu
oncontrolselect onclick oncopy oncut
ondblclick ondeactivate ondrag ondragend
ondragenter ondragleave ondragover ondragstart
ondrop onerrorupdate onfilterchange onfocus
onfocusin onfocusout onhelp onkeydown
onkeypress onkeyup onlosecapture onmousedown
onmouseenter onmouseleave onmousemove onmouseout
onmouseover onmouseup onmousewheel onmove
onmoveend onmovestart onpaste onpropertychange
onpropertychange onreadystatechange onresizeend onresizestart
onscroll onselectstart  
 

Code:

HTMLpage.htm

<!
DOCTYPE html>
<
html>

<
head>
    <link href="bdoTag.css" rel="stylesheet" type="text/css" />
    <title></title>

</
head>
<
body>
<
p>Welcome to CsharpCorner. <bdo dir="ltr">Thank you for visiting site.</bdo></p>
<
p>Welcome to CsharpCorner. <bdo dir="rtl">Thank you for visiting site.</bdo></p>

<!--Using Style Sheet-->

<
p>Welcome to CsharpCorner. <bdo dir="ltr" class="designLTR">Thank you for visiting site.</bdo></p>
<
p>Welcome to CsharpCorner. <bdo dir="rtl" class="designRTL">Thank you for visiting site.</bdo></p>
</
body>
</
html>

bdo.css

.designLTR
{
    font-size: 20px;
    color: Maroon;
    background-color: Silver;
}

.designRTL

{
    font-size: 20px;
    color: Blue;
    background-color: Aqua;
}

Output

Internet Explorer

1.gif

Chrome

  bdo tag

Fire fox

3.gif

Safari

4.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.