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

Question

I am implementing a RTL interface. All components and texts are RTL but numbers which are LTR.

I use <span dir="ltr"> elements to insert LTR texts into the main RTL texts.

It works in the most of the cases but not for a <option> element:

<div dir="rtl">
  <select>
    <option>One amount <span dir="ltr">15.000</span> coins</option>
    <option>Other amount <span dir="ltr">19،000</span> coins</option>
  </select>
</div>

It is not working.

Here there is a JSfiddle to play with: https://jsfiddle.net/fguillen/2hngzv3d/

Ketron

Do you have to use unicode-bidi: bidi-override;? – Gertrude

@Gertrude you can try to remove it from the JSfiddle.. you will see that the direction:rtl; is ignored without it. Any how.. I don't think this is really relevant for the main problem I am exposing here. – Ketron

Answer 1

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.

Gertrude

Thanks for the extended explanation @Aboodz. Of course I am using RTL languages for the RTL interfaces, I just wanted to make the example simples maybe I screwed up. Removing the unicode-bidi manipulation did the trick. Still I am gonna have the problem when I want to use LTR text that can not be detected by the unicode-bidi algorithm like: "What do you think about the firm CocaCola?" where CocaCola must to remain LTR even in a RTL context. – Ketron

It wont be a problem (see the link). Just make sure to use RTL question mark in the end of the sentence. jsfiddle.net/e6t5wwzo – Gertrude

Answer 2

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>

Supine