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

Question

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 relevant 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?

Answer 1

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.

Answer 2

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

Answer 3

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.