Add examples for <bdi> and <bdo>

[Elchi3]

Examples for:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo

For <bdi> it says it "is useful when embedding text whose directionality may not be known" so I've listed a few different languages where some are ltr and some rtl.

I think the <bdo> example demonstrates what it does pretty well, but I had trouble finding a real situation for this that isn't just demoing the behavior.

Fixes:
#765, #766

[wbamberg]

<bdi> is interesting, and I think the MDN page is not very helpful here.

As I understand it, <bdi> is not used just when you have to present, say, some RTL text in some LTR text. In the general case, browsers don't need any help to do this, because Unicode characters have an associated directionality, so text will be ordered based on that, without needing any special markup.

For example, in your example you have:

<li>Arabic: <bdi>السلام عليكم</bdi> (as-salām 'alaykum)</li>

But actually, if you omit the <bdi> tags, it will be rendered the same, because the built-in bidi algorithm can handle that.

But there are times when the bidi algorithm needs help, mostly I think because some characters (for example, "!") are "neutral", so the algorithm tries to figure out the directionality from the surrounding text, and sometimes that doesn't give you the result you want.

w3schools has a good example of this:

<ul>
 <li>User <bdi>hrefs</bdi>: 60 points</li>
 <li>User <bdi>jdoe</bdi>: 80 points</li>
 <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

Without the <bdi>, the ": 90" gets treated as if it were in an RTL context. So given this:

 <li>User <span>إيان</span>: 90 points</li>

...you get:

There's a great article on this here: https://www.w3.org/International/articles/inline-bidi-markup/.

The rules are:

• if you know the directionality of the embedded text, use markup and the dir attribute set to "rtl" or "ltr" as appropriate
• if you don't know the directionality of the embedded text (for example because the text is user-supplied) then if the embedded text is already wrapped in markup, use dir="auto" on the markup. If the embedded text is not already wrapped in markup, use the <bdi> tag. This suggests that the following two are equivalent:

 <li>User <bdi>إيان</bdi>: 90 points</li>
 <li>User <span dir="auto">إيان</span>: 90 points</li>

...although I guess the semantics of the first are clearer.

So <bdi> is used to isolate a run of characters, meaning that its bidi state shouldn't affect the state of any of the characters outside it.

So anyway, if I'm right about any of this, it would be good to have an example showing something like:

• some LTR-only text that it correctly ordered without any markup
• some RTL-in-LTR text without any markup, where the bidi algorithm is confused
• the same RTL-in-LTR text, with <bdi> to fix it
• the same RTL-in-LTR text, with <span dir="auto"> to fix it

[Elchi3]

Wow, thanks Will!

I've not understood <bdi> correctly, until I've read your comment and this article https://www.w3.org/International/articles/inline-bidi-markup/
I will try to dig deeper into this.

[chrisdavidmills]

I've pushed a new set of examples for bdi/bdo in this PR: #1041. Apologies if it wasn't the most elegant way to do this, but I wasn't sure if there was a way to add to Florian's PR.

[wbamberg]

Closed in favour of #1041.