Difference between "bdo" element and other elements with "dir" attribute?

bidirectional, html

Solution

Using -

<span dir="rtl">CIBARA english EMOS</span>

Styles applied in Chrome:

span[Attributes Style] {
    direction: rtl;
    unicode-bidi: isolate;
}

Using -

<bdo dir="rtl">CIBARA english EMOS</bdo>

Styles applied in Chrome:

bdo[Attributes Style] {
    direction: rtl;
}

bdo {
    unicode-bidi: bidi-override;
}

So, with the use of `<bdo>` element, the default value `bidi-override` is always applied in most browsers and it should work as intended. The use of attribute `dir` does not seem to be adequate. See below:

<!DOCTYPE html>
<html>
<body>

<p>This paragraph will go left-to-right.</p>  
<p><span dir="rtl">This paragraph will go right-to-left.</span></p>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>  

</body>
</html>

Problem

What is the difference between using `bdo` ``` <bdo dir="rtl">CIBARA english EMOS</bdo> ``` and using most tags with `dir` attribute like ``` <span dir="rtl">CIBARA english EMOS</span> ``` I know this question is similar to should i always use bdo for text direction?, but I still do not understand why the use of the `dir` attribute is "adequate" and `bdo` is not needed. Doesn't the `dir` attribute "override the inherent directionality of letters" anyway? In which instances must I use `bdo`?

Original source

Related problems