bdi and bdo interactive examples

[chrisdavidmills]

As part of the final set of HTML interactive examples (#999), I've written some examples for <bdi> and <bdo>.

Note that Florian already attemped these in #880. I wasn't sure if there was a good way for me to add onto his PR, so I've just created a new one.

[wbamberg]

I think this is a bit confusing, because the order in the source is the same as the order in the output, so it's easy to think "so what".

What do you think about enclosing the name in a span, so you can really see the difference? e.g.

<h1>World wrestling championships</h1>

<ul>
   <li><span class='name'>Evil Steven</span>: 1st place</li>
   <li><span class='name'>François fatale</span>: 2nd place</li>
   <li><span class='name'>تیز سمی</span>: 3rd place</li>
   <li><bdi class='name'>الرجل القوي إيان</bdi>: 4th place</li>
   <li><span class='name' dir='auto' >تیز سمی</span>: 5th place</li>
</ul>

(this is probably closer to actual usage, since AFAIK this usually comes up when you want to add a string dynamically and don't know its directionality ahead of time, and in that case you might want a way to target the elements.)

(I've also added a version using dir='auto', and changed the ordering a bit to show the error case before the fixed case. Not sure these are better, that's just how I would have done this.)

To further emphasise it you could add something like:

.name {
    color: #f00;
}

...in the CSS:

[wbamberg]

According to https://www.w3.org/International/articles/inline-bidi-markup/#override, dir is mandatory for <bdo>, and the example accompanying that article uses it: https://www.w3.org/International/articles/inline-bidi-markup/index-data/bdo.html.

(Our docs should say this, too.)

[chrisdavidmills]

I agree with your suggestions on this, so have made the necessary changes. Thanks!

[wbamberg]

Thanks @chrisdavidmills !