Как заставить фрагмент текста быть «direction ltr» внутри абзаца «direction rtl»

Question

Итак, телефонные номера всегда обозначаются буквами (слева направо).

При работе на многоязычном веб-сайте мне нужно вставить номер телефона (с префиксом «+» и номерами, разделенными «-») внутритекстовый абзац, который имеет направление 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>

Конечно, это не работает, поскольку 'direction' работает только для элементов блока, а 'span' является встроенным элементом.Мне нужно, чтобы номер телефона был внутри абзаца, поэтому я не могу изменить 'span' на 'display:inline'

У меня все понятно?

Как заставить это работать

Answer 1

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

Answer 2

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

Это:

LTR: 0x200E
RTL: 0x200F

Итак:

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

Подробнее см. этот ТА.

Answer 3

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

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

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