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++

bdi ... ⁄bdi

Share it

bdi intro bdi parents - children bdi syntax

HTML5 bdi element

The bdi element allows you to isolate text from its surrounding content for bidirectional text formatting. »video

About bdi

Parents, children bdi

Attributes bdi

Observation: the default value of the dir global attribute is always auto (let the user agent decide text's directionality based on BIDI algorithm) on this element; it does not inherit the value of dir attribute, if any, from its parent .

Syntax bdi

1<bdi> ... </bdi>» video

Attributes and Values bdi (comma separated)

<bdiattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<bdi accesskey="h"> ... </bdi>
2.class=class name»html »img<bdi class="class_name"> ... </bdi>
3.contenteditable="",  , true, false »html<bdi contenteditable="true"> ... </bdi>
4.contextmenu=menu id value»html<bdi contextmenu="menu_id_value"> ... </bdi>
5.data-*= value -<bdi data-http-error="404"> ... </bdi>
6.dir=ltr, rtl, auto»html<bdi dir="ltr"> ... </bdi>
7.draggable= true,  , false»img<bdi draggable="false"> ... </bdi>
8.dropzone= copy, move, link, string:, file: -<bdi dropzone="copy"> ... </bdi>
9.hidden= "",  , hidden»html »img<bdi hidden="hidden"> ... </bdi>
10.id=id name»html »img<bdi id="unique_id_name"> ... </bdi>
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<bdi lang="en"> ... </bdi>
17.spellcheck="",  , true, false»html<bdi spellcheck="true"> ... </bdi>
18.style=CSS property:value»html »img<bdi style="color:red"> ... </bdi>
19.tabindex= integer »img<bdi tabindex="3"> ... </bdi>
20.title=text»html »link»style »abbr»dfn
»img »meter
<bdi title="html page"> ... </bdi>
21.translate="", yes, no»html »img<bdi translate="yes"> ... </bdi>
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 bdi element

HTML5 bdi element: bidirectional text isolation and formatting

min video details
00:00 video tutorial: bdi element
00:05 the bdi element allows you to isolate text from its surrounding content for bidirectional text formatting: the BIDI algorithm
00:10 bidirectional text = text in both text directionalities:
LTR = left-to-right
RTL = right-to-left
00:14 just like in our paragraph below
00:18 the directionality of this text is left-to-right (LTR): e.g. specific to Latin alphabet
00:22 while the directionality of this text is right-to-left (RTL): e.g. specific to Arabic, Hebrew alphabet and has been isolated with bdi element (the Arabic name is between the start tag and the end tag of the bdi element)
00:41 the browser display is okay: first the code, followed by the name of the person and its phone number
00:46 BUT if we remove the bdi element, and the Arabic name is no longer isolated, the BIDI algorithm still applies taking into account besides the Arabic name the phone number too → the phone number will be RTL aligned, though is not the case, passing in front of the Arabic name ⁄ or after the Arabic name (from an RTL perspective), leading to confusion
01:06 repeating this operation 1 more time: just pay attention to what is happening with the phone number when we remove the bdi element
01:25 it is no longer obvious which one is the phone number → confusion
01:45 example 2:
the whole text of the 2nd paragraph has 1 directionality: left-to-right → the Joe X. name is isolated though is not the case, the browser display is not affected; bdi can be removed
02:01 bdi utility: for user-generated content
if, let's say, you import names from your database into your page and some names have a right-to-left directionality (like Arabic or Hebrew names), in order to avoid a confusion like the one previously illustrated in this video tutorial, you can use the bdi element to isolate all names
02:14 browser display okay, no confusion

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