Как заставить часть текста быть "направлением ltr" внутри абзаца "направление rtl"

Таким образом, номера телефонов всегда ltr (слева направо).

Работая на многоязычном веб-сайте, мне нужно вставить номер телефона (с префиксом "+" и номерами, разделенными "-" ) внутри текстового абзаца, который имеет направление rtl (для соответствующих языков, конечно)

Итак, у меня есть что-то вроде этого:

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

Ответ 1

Вы можете использовать знак маркера направленности юникода перед знаком +, чтобы дать алгоритму подсказку, в которой он нуждается.

Это:

LTR: 0x200E
RTL: 0x200F

Итак:

<p id="text">Please call to <span id="phone">&#x200F;+44-123-321</span> for some help</p>

Ответ 2

Попробуйте добавить #phone {direction:ltr; display:inline-block}

Ответ 3

Другим вариантом может быть использование атрибута dir='ltr' в вашем встроенном элементе:

<p id="text">Please call to <span dir='ltr'>+44-123-321</span> for some help</p>

Обратите внимание, что включение ‎ в ваш HTML так же плохо, как использование атрибута dir='ltr'.