RTL на веб-странице меняет число с тире - PullRequest
Новая
       6

RTL на веб-странице меняет число с тире

16 голосов
/ 22 ноября 2011

Когда мой веб-сайт отображает текст на иврите, смешанный с цифрами, и есть число с тире в середине, число с тире в середине отображается RTL. Например, с текстом: רמה 4–0, он должен отображать 4-0 вместо 0-4, поскольку это цифровая последовательность, а «4» предшествует «0». Однако в браузерах, которые я проверял, он отображает «0» перед «4».

Так как это может произойти в любом месте, где отображаются системные данные, было бы гораздо предпочтительнее иметь решение CSS, которое не требует чего-то вроде: 

<span style="direction:ltr">4-0</span>

Общее направление для текста должно оставаться RTL, но цифры с тире должны отображаться LTR. Должен корректно отображаться в основных браузерах (IE, Firefox, Chrome).

Ответы [ 6 ]

13 голосов
/ 22 ноября 2011

Вы можете вставить слева направо и справа налево символов маркера (&lrm; и &rlm; соответственно) до и после числовых последовательностей - это не требует дополнительной разметки, разделителей и сохраняет порядок текста в исходном документе.

Альтернативой может быть некоторая разметка для разделения чисел с помощью тире (аналогично тому, что вы сделали), так как алгоритм Unicode BIDI просто не справляется с этим конкретным сценарием без помощи очень хорошо (lrm и rlm).

Нет необходимости, чтобы CSS был встроенным, как вы это сделали, но вам все равно понадобится что-то вроде:

CSS: 

.numdash
{
  direction: ltr;
}

HTML: 

<span class="numdash">4-0</span>

Третий вариант - это поменять местами цифры и просто использовать 0-4 в разметке, чтобы они были перевернуты алгоритмом двунаправленного текста.

11 голосов
/ 12 ноября 2013

Есть еще один способ сделать это, добавив перед цифрами: 

<span>&#x200E;+44 780-780-7807</span>
5 голосов
/ 28 июля 2015

Для меня отлично работает следующий стиль: 

* {
    unicode-bidi: embed;
}

Вы можете проверить этот пример в CodePen (я не знаю иврита, поэтому я скопировал некоторые тексты из здесь )

1 голос
/ 20 июня 2018

используйте этот класс: 

.number_ltr {
    direction: ltr!important;
    unicode-bidi: embed;
}

, поэтому ваш HTML-код должен выглядеть следующим образом: 

<span class="number_ltr">4-0</span>
1 голос
/ 15 апреля 2014

Ответ упоминается и является правильным.Вставка этих невидимых маркеров до или после символа со «слабым» направлением (знаки препинания или цифры, которые не имеют «сильного» направления, такого как латинские буквы или буквы арабского языка / иврита) гарантируют, что слабый символ наследует желаемое направление.

Статья Википедии "BiDi" / Двунаправленный текст содержит отличное описание проблемы и того, как интерпретаторы Unicode должны обрабатывать текст со смешанным направлением.Это помогло мне понять проблему:

http://en.wikipedia.org/wiki/Bi-directional_text

Мое личное решение - избегать использования символов /, потому что я создаю сайт, который должен работать в обоих направлениях, ивставка контента приведет к огромному беспорядку.Вместо этого они могут быть автоматически вставлены с использованием CSS-свойств «до» и «после».Вот пример, использующий обозначение Unicode "\ 200F" для маркера RLM: 

#RIGHT-TO-LEFT-MARKER-CONTENT,
.contributor:after,
/*.contributor:before,*/
.right-to-left-marker-content {
    /*Inserts &rlm; marker to ensure
    the contained content is always 
    displayed RTL*/
    content: "\200F";
}

(Обратите внимание, что CSS находится в формате "СУХОЙ CSS", который позволяет вам добавлять селекторы по мере необходимости, чтобы избежать повторного указанияфактическое объявление стиля снова и снова. Важной частью является только то, что у вас есть содержимое: "\ 200F" и что вы добавляете: before или: after к селектору по мере необходимости.

0 голосов
/ 23 ноября 2011

НЕ рассматривайте обратную последовательность, пожалуйста, так как это также сделает результат обратным, если пользователь попытается скопировать и вставить его в другое приложение.Вместо этого вас могут заинтересовать решения не-css: 

LRM/RLM‍

‍ 

LRE/RLE…PDF
...