Bidirectional text and numbers

Question

I have a website that displays in two languages - english and farsi. The title of a list item can be in both languages mixed at the same time. All ok until here as far as you have text only it will render ok using direction:rtl in css.

But the catch is that I can also have a number inside or at the end of title (which in farsi is written and read same as in english - left to right). This ends up with a problem since no matter where I put that number it will mess up the words order in the title (the number is an ad ID at the end of the title).

To solve this issue I use &rlm and &lrm infront of the id - but the catch is that I have to switch this two according which language is choosen.

My correct html is as this (‏ is what fixes the id number issue in farsi):

<h3>
   The name of my خدمات باشد is long
   <span style="color:#999;">&rlm;#89798798</span>
</h3> 

JS FIDDLE: http://jsfiddle.net/WzF2D/

I tried setting direction:ltr on the span wrapping around ID but it still won't work. I also tried to use unicode-bidi:embed on h3 but also no go.

How can I solve this by using css only without having to rely on ‏?

Answer 1

I will assume that the desired rendering uses overall right-to-left writing, even though the text (at least in the example) is mainly English, with some words in Arabic letters inside the sentence. Moreover, I assume that expressions like “#89798798” are to be treated as separate fragments, so that when it appears after an English word, it is not considered as part of English text but set to the left of it, in RTL layout.

Under these (rather astonishing) premises, the CSS solution is to make such a fragment a bidirectionality isolate:

<span style="color:#999; unicode-bidi: embed">#89798798</span>