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 \'-\')

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

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.

Answer 3

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