How to mix RTL and LTR text directions in the same <option> element?

At the beginning, I thought it is a bug (something related to unicode-bidi: bidi-override), but when I tried on IE, Edge, and Firefox they all gave kinda the same result. This gave me enough evidence that this is a normal behavior. I Looked around here and there, and found what's wrong.

The <option> tag

The option tag is somehow special. From Mozilla <option> documentation, it states that you can only write text inside it. This means any tag you write inside <option> tag, it will be ignored by the browser parser, and this is exactly why your<span> tag was ignored. See the image below from Firefox DOM inspector. It also worth mentioning that smartphones displays select option in a spinner instead of a combo box (of course you can override this). The means it is really meaningless to have any thing other than text within the <option> tag.

Understanding unicode-bidi Attribute

RTL text, by default, is smart enough to handle embedded LTR text by applying the Unicode Bi-directional Algorithm. If you override the algorithm by using bidi-override, you will be responsible for handling any LTR text within RTL text.

This means that inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. - (Mozilla Documentation)

Now in your case, you cannot place a <span> inside <option> because it is invalid HTML nor use an ‎ character because you disabled bidi algorithm.

The Solution

The only solution I can think of is

• Step 1: Remove bidi-override.
• Step 2: Use RTL text instead of English text.

See this fiddler: https://jsfiddle.net/61dvmsnn/

Moral of the story

Unless you are trying to create a mirror effect, never use bidi-override. Never disable bidi algorithm. Also, always use RTL text (e.g. Arabic, Hebrew, Farsi...) when testing inside RTL elements. Let the bidi algorithm works its magic.

you must use the display:inline-block; property like this:

<span style="display:inline-block !important; direction:ltr !important; text-align:left !important;">content</span>