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, Dec 01 '10 at 15:04
@Oded: I'm seeing it. I think because of the '+' and '-' between numbers its just confusing the algorithm... — Jonathan, Dec 01 '10 at 15:05
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, Dec 09 '17 at 11:19

score 36 · Answer 1 · answered Dec 01 '10 at 15:18

36

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

answered Dec 01 '10 at 15:18

Daniel

2,331
3
26
35

1

`Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML dir attribute and element to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use direction in HTML documents.` Source: http://www.w3.org/TR/css-writing-modes-3/#direction – Dan Loewenherz Apr 22 '16 at 16:29

score 27 · Accepted Answer · edited Dec 09 '17 at 11:15

27

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.

edited Dec 09 '17 at 11:15

Flimm

136,138
45
251
267

answered Dec 01 '10 at 15:18

Oded

489,969
99
883
1,009

6

I tested this and can confirm it to work, however in HTML notation it will be `‎` and `‏`. – nikc.org Dec 01 '10 at 20:03
@nikc - Well spotted. Updated HTML. – Oded Dec 01 '10 at 22:00
YOU'RE THE BEST! – user11247237 Jan 19 '21 at 13:10
You may also use `‏` and `‎` in most modern browsers. – Marius Mar 03 '21 at 15:53

score 15 · Answer 3 · answered Dec 26 '11 at 09:14

15

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.

answered Dec 26 '11 at 09:14

Saeed Neamati

35,341
41
136
188

score 0 · Answer 4 · answered Jul 17 '22 at 15:46

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>

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

4 Answers4

Linked