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?

RTL algorithms normally take numbers into account, so you don't need to do anything for numbers to be rendered correctly, regardless of LTR or RTL of the container. Are you actually seeing this issue or simply trying to preempt? — Oded
@Oded: I'm seeing it. I think because of the '+' and '-' between numbers its just confusing the algorithm... — Jonathan
In Arabic at least, the + sign should go to the left of a phone number, just like it does in English. Type out the phone number just like you would in English, first type the + character, then the first number from the left, then the second number from the left, and so on. You may be trying to fix something which isn't actually a problem. — Flimm

Daniel Daniel · Accepted Answer · 2010-12-01T15:18:33

32

votes

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

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

3 Answers