Как смешать текстовые направления RTL и LTR в одном элементе <option>?

Я реализую интерфейс RTL. Все компоненты и тексты RTL, но цифры, которые являются LTR.

я использую <span dir="ltr"> элементы для вставки текстов LTR в основные тексты RTL.

Это работает в большинстве случаев, но не для <option> элемент:

<div dir="rtl">
  <select>
    <option>One amount <span dir="ltr">15.000</span> coins</option>
    <option>Other amount <span dir="ltr">19،000</span> coins</option>
  </select>
</div>

Это не работает.

Здесь есть JSfiddle для игры: https://jsfiddle.net/fguillen/2hngzv3d/

Источник

2 ответа

Решение

Сначала я думал, что это ошибка (что-то unicode-bidi: bidi-override), но когда я попробовал IE, Edge и Firefox, все они дали примерно одинаковый результат. Это дало мне достаточно доказательств того, что это нормальное поведение. Я посмотрел вокруг здесь и там, и нашел, что не так.

<option> тег

option тег какой-то особенный. В документации Mozilla < option> говорится, что вы можете писать только текст внутри нее. Это означает, что любой тег, который вы пишете внутри <option> тэг, он будет игнорироваться парсером браузера, и именно поэтому ваш<span> тег был проигнорирован. Смотрите изображение ниже от Firefox DOM инспектора. Также стоит упомянуть, что на смартфонах опция выбора отображается в счетчике вместо поля со списком (конечно, вы можете переопределить это). Означает, что на самом деле бессмысленно иметь что-либо кроме текста внутри <option> тег.

понимание unicode-bidi атрибут

Текст RTL по умолчанию достаточно умен, чтобы обрабатывать встроенный текст LTR, применяя двунаправленный алгоритм Unicode. Если вы переопределите алгоритм с помощью двунаправленного переопределения, вы будете нести ответственность за обработку любого текста LTR в тексте RTL.

Это означает, что в элементе переупорядочение строго в последовательности в соответствии со свойством direction; неявная часть двунаправленного алгоритма игнорируется. - (Документация Mozilla)

Теперь в вашем случае вы не можете разместить <span> внутри <option> потому что это недопустимый HTML, ни использовать &LRM; символ, потому что вы отключили алгоритм двунаправленного текста.

Решение

Единственное решение, которое я могу придумать,

  • Шаг 1: удалите двунаправленное переопределение.
  • Шаг 2: Используйте текст RTL вместо английского текста.

Смотрите этот скрипач: https://jsfiddle.net/61dvmsnn/

Мораль истории

Если вы не пытаетесь создать зеркальный эффект, никогда не используйте переопределение двунаправленного текста. Никогда не отключайте алгоритм двунаправленного текста. Кроме того, всегда используйте текст RTL (например, арабский, иврит, фарси...) при тестировании внутри элементов RTL. Пусть алгоритм биди работает своим волшебством.

Источник

Вы должны использовать display:inline-block; свойство как это:

<span style="display:inline-block !important; direction:ltr !important; text-align:left !important;">cntent</span>
Источник
Другие вопросы по тегам