Как поддерживать элементы HTML dom с языками RTL / LTR?
У меня есть несколько страниц в моей системе, которые включают таблицы (построенные с использованием div), которые могут содержать английский контент с одной стороны и иврит или какой-либо другой язык RTL с другой стороны.
Моя проблема в том, что когда эти столбцы содержат круглые скобки (в основном круглые скобки), они вызывают смесь, например:
)English (EN
עברית (iw_IL)
Пока мне удалось решить эту проблему с помощью этого класса css (когда известен язык содержимого и используется флаг для добавления этого класса в div):
.RTL:after {
content: "\200E";
}
Используя это, скобки показаны правильно и пока все хорошо.
Теперь мне нужно иметь решение для кросс-приложений без использования флага для каждого div, решение css или любые другие технологии приветствуются.
Мне нужно решение, которое может быть применимо для обоих материалов (языки RTL и LTR).
@ johnc.j. теперь вы можете видеть, как отображается английский, добавьте / удалите класс RTL, чтобы увидеть разницу
Я не понимаю. Было бы лучше, если бы вы сделали jsFiddle, который покажет ошибку.
ок .. посмотри на это - jsfiddle.net/6o1nbLda/15
Смотрите обновленный ответ!
Вы имеете в виду, что мне нужно оставить его как есть и просто изменить его на ltr для указанного div, который мне нужен?
Вы заметили элемент bdi?
нет, пришлите мне последний код, который вы сделали
Он размещен ниже. Вот только копия: jsfiddle.net/63ovhkgL
Ответы 1
Вот моя попытка:
Теория: https://www.w3.org/International/articles/inline-bidi-markup/
<body class = "rtl">
<style>
.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table, .tr, .td { border: 1px solid; border-collapse: collapse; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
</style>
<p>עבריתעבריתעבריתעברית</p>
<p>עבריתעברית</p>
<div class = "table">
<div class = "tr">
<div class = "td ltr">
<p>English (EN)</p>
<p>dbdjk dk ddkj ddjh dj dhjd</p>
</div>
<div class = "td">
<p><bdi>(iw_IL) עברית</bdi></p>
<p>עבריתעבריתעבריתעברית</p>
</div>
</div>
</div>
</body>
Еще варианты:
<p><span dir = "auto">(iw_IL) עברית</span></p> <!-- or dir = "ltr" -->
у вас все еще есть различие между каждым полем, мне нужно иметь один и тот же стиль для всех представленных данных
Вот пример: jsfiddle.net/6o1nbLda. Какая у вас с этим проблема? Я не понимаю.