htmlcssmultilingualbidi

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

Solution

  • 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.