Как заставить часть текста быть «направлением 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>

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

Я ясно?

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


html css multilingual bidi
person Jonathan    schedule 01.12.2010    source источник
comment
Алгоритмы RTL обычно учитывают числа, поэтому вам не нужно ничего делать, чтобы числа отображались правильно, независимо от LTR или RTL контейнера. Вы действительно видите эту проблему или просто пытаетесь упредить?   -  person Oded    schedule 01.12.2010
comment
@Oded: я вижу это. Я думаю, что из-за «+» и «-» между числами это просто сбивает с толку алгоритм...   -  person Jonathan    schedule 01.12.2010
comment
По крайней мере, в арабском языке знак + должен стоять слева от номера телефона, как и в английском. Введите номер телефона так же, как на английском языке, сначала введите символ +, затем первую цифру слева, затем вторую цифру слева и так далее. Возможно, вы пытаетесь исправить что-то, что на самом деле не является проблемой.   -  person Flimm    schedule 09.12.2017

Ответы (3)


arrow_upward
20
arrow_downward

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

Эти:

LTR: 0x200E
RTL: 0x200F

So:

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

Подробнее см. этот ответ SO.

person Oded    schedule 01.12.2010
comment
Я проверил это и могу подтвердить, что это работает, однако в нотации HTML это будут &#x200E; и &#x200F;. - person nikc.org; 01.12.2010
comment
@nikc - Хорошо подмечено. Обновлен HTML. - person Oded; 02.12.2010
comment
ТЫ ЛУЧШИЙ! - person user11247237; 19.01.2021
comment
Вы также можете использовать &rlm; и &lrm; в большинстве современных браузеров. - person Marius; 03.03.2021

arrow_upward
32
arrow_downward

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

person Daniel    schedule 01.12.2010
comment
Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML dir attribute and <bdo> element to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use direction in HTML documents. Источник: w3.org/TR/css-writing-modes- 3/#направление - person dwlz; 22.04.2016

arrow_upward
13
arrow_downward

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

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

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

person Saeed Neamati    schedule 26.12.2011