bdo ... ⁄bdo

Share it

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".

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

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

<bdo	attribute	=	"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

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: W3C ⁄ WHATWG