Post
Ask Question

Use of BDO Tag in HTML5

Use of BDO Tag in HTML5

 
The <bdo> tag is used to specify the direction that the text is displayed. This tag overrides the current directionality of text. Mostly this tag is used in Hebrew, Arabic and other languages that use the right to left pattern. You can write text whether from right to left or left to right using dir attribute of <bdo> tag. The full name 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
  1. <p>Welcome to CsharpCorner.   
  2.     <bdo dir="ltr">Thank you for visiting site.</bdo>  
  3. </p>  
  4. <p>Welcome to CsharpCorner.   
  5.     <bdo dir="rtl">Thank you for visiting site.</bdo>  
  6. </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
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <link href="bdoTag.css" rel="stylesheet" type="text/css" />  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <p>Welcome to CsharpCorner.   
  9.             <bdo dir="ltr">Thank you for visiting site.</bdo>  
  10.         </p>  
  11.         <p>Welcome to CsharpCorner.   
  12.             <bdo dir="rtl">Thank you for visiting site.</bdo>  
  13.         </p>  
  14.         <p>Welcome to CsharpCorner.   
  15.             <bdo dir="ltr" class="designLTR">Thank you for visiting site.</bdo>  
  16.         </p>  
  17.         <p>Welcome to CsharpCorner.   
  18.             <bdo dir="rtl" class="designRTL">Thank you for visiting site.</bdo>  
  19.         </p>  
  20.     </body>  
  21. </html>  
bdo.css
  1. .designLTR {  
  2.   font-size: 20px;  
  3.   color: Maroon;  
  4.   background-color: Silver;  
  5. }  
  6.   
  7. .designRTL {  
  8.   font-size: 20px;  
  9.   color: Blue;  
  10.   background-color: Aqua;  
  11. }  
Output
 
Internet Explorer
 
bdo tag
 
Chrome
 
bdo tag
 
Safari
 
bdo tag
 
FireFox
 
bdo tag


Similar Articles