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 &LRM;
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>