W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

bdo ... ⁄bdo

Share it

bdo intro bdo parents - children bdo syntax

HTML5 bdo element

The bdo element allows you to override the directionality of a text set by the Unicode BIDI algorithm (Unicode Bidirectional Algorithm) »video.

If a span of text, according to BIDI algorithm, is RTL aligned, you can LTR align it through bdo element, dir attribute, value "ltr".

About bdo

Parents, children bdo

Attributes bdo

Observation: dir global attribute on bdo element will override text directionality set by the BIDI algorithm.

Syntax bdo

1<bdo> ... </bdo> »video

Attributes and Values bdo (comma separated)

<bdoattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<bdo accesskey="h"> ... </bdo>
2.class=class name»html »img<bdo class="class_name"> ... </bdo>
3.contenteditable="",  , true, false »html<bdo contenteditable="true"> ... </bdo>
4.contextmenu=menu id value»html<bdo contextmenu="menu_id_value"> ... </bdo>
5.data-*= value -<bdo data-http-error="404"> ... </bdo>
6.dir=ltr, rtl, auto»html<bdo dir="ltr"> ... </bdo>
7.draggable= true,  , false»img<bdo draggable="false"> ... </bdo>
8.dropzone= copy, move, link, string:, file: -<bdo dropzone="copy"> ... </bdo>
9.hidden= "",  , hidden»html »img<bdo hidden="hidden"> ... </bdo>
10.id=id name»html »img<bdo id="unique_id_name"> ... </bdo>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<bdo lang="en"> ... </bdo>
17.spellcheck="",  , true, false»html<bdo spellcheck="true"> ... </bdo>
18.style=CSS property:value»html »img<bdo style="color:red"> ... </bdo>
19.tabindex= integer »img<bdo tabindex="3"> ... </bdo>
20.title=text»html »link»style »abbr»dfn
»img »meter
<bdo title="html page"> ... </bdo>
21.translate="", yes, no»html »img<bdo translate="yes"> ... </bdo>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration bdo element

HTML5 bdo element: override text directionality

min video details
00:00 video tutorial: bdo element
00:01 bdo element allows you to override the directionality of a text set by the Unicode Bidirectional Algorithm (BIDI)
00:09 as result of the BIDI algorithm, this text will be left-to-right aligned (Latin text)
00:11 and this text will be right-to-left aligned (Arabic text)
00:22 thus we have:
- left-to-right (first paragraph) and
- right-to-left (second paragraph)
00:26 with bdo element, we can override these directionalities set by the BIDI algorithm
00:33 dir attribute is required as its value indicates the new directionality: ltr (for left-to-right) or rtl (for right-to-left)
00:53 before adding the bdo element, the arabic text was right-to-left aligned
00:57 after adding bdo dir="ltr", the arabic text is left-to-right aligned
01:03 adding the bdo element to the first paragraph too in order to change text directionality through dir attribute
01:07 so basically if BIDI sets a text as LTR, we can override it like this: bdo dir="rtl"
01:20 before adding bdo, the latin text was left-to-right LTR aligned
01:24 after adding bdo dir="rtl", the latin text is right-to-left RTL aligned

For more information about the bdo element, please see the specs: W3CWHATWG