How to force a piece of text to be 'direction ltr' inside a 'direction rtl' paragraph

So, phone numbers are always ltr (left to right).

Working on a multilingual website I need to insert a phone number (with a '+' prefix and numbers separated by '-') inside a text paragraph that has direction rtl (for re开发者_如何学Pythonlevant languages of course)

So I have something like this:

.ltr #test {direction:ltr}
.rtl #test {direction:rtl}
#phone {direction:ltr}

<div class="ltr"><p id="test">Please call to <span id="phone">+44-123-321</span> for some help.</p></div>
<div class="rtl"><p id="test">Please call to <span id="phone">+44-123-321</span> for some help.</p></div>

Of course this is not working because 'direction' only works for block elements and 'span' is an inline element. I need the phone number to be inside the paragraph so I can't change 'span' to 'display:inline'

I'm being clear?

How to make it work?

Try adding #phone {direction:ltr; display:inline-block}

You can use a unicode directionality marker character just before the + sign to give the algorithm the hint it needs.

These are:

LTR: 0x200E
RTL: 0x200F

So:

<p id="text">Please call to <span id="phone">&#x200F;+44-123-321</span> for some help</p>

See this SO answer for more details.

Another option could be to use dir='ltr' attribute, in your inline element:

<p id="text">Please call to <span dir='ltr'>+44-123-321</span> for some help</p>

Please note that including ‎ in your HTML is as bad as using dir='ltr' attribute.

The suggested solutions won't work if the first character is an LTR character.

<span dir="ltr">&lrm;א + ב = ג</span>

You can force it with ‭ (LEFT-TO-RIGHT OVERRIDE)

<span>&#x202D;א + ב = ג</span>

or by using css unicode-bidi: bidi-override

<span style="unicode-bidi: bidi-override;">א + ב = ג</span>