#html #css #rendering #bidi
#HTML #css #визуализация #bidi
Вопрос:
Как вы, возможно, знаете, некоторые языки записываются / читаются справа налево, и мы пытаемся поддерживать некоторые языки RTL. Для веб-интерфейса использование dir=»rtl» в html выполняет большую часть работы благодаря алгоритмам, которые есть в браузерах. Но я столкнулся с этой проблемой со скобками в тексте:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bracket problems with BiDi</title>
</head>
<body>
<p style="direction: rtl;">Bracket problem: hello (world):</p>
<p style="direction: rtl;">No bracket problem: hello (world) something:</p>
<p style="direction: rtl;">Bracket problem: (السلام (عليكم </p>
<p style="direction: rtl;">No bracket problem: السلام (عليكم) عليكم </p>
</body>
</html>
Проблему можно увидеть здесь:
Итак, я хочу, чтобы последняя скобка осталась в конце. Каким было бы ваше решение?
Ответ №1:
Здесь много проблем. Согласно стандарту Unicode, скобки являются нейтральными, что означает, что они изначально не обрабатываются как LTR или RTL. Они принимают направление окружающего языка. В примерах, где это отображается неправильно, предполагается, что направление закрывающей скобки такое же, как в английском, т.е. LTR.
1-я проблема: вы сообщаете браузеру, что абзац должен быть обработан как RTL. Браузер находит внутри английский, который является LTR, поэтому он думает, что английский встроен в абзац RTL, а последний символ «)» обрабатывается как RTL. (окружающий абзац RTL).
2-я проблема: Здесь нет проблем, при простом взгляде на предоставленный вами исходный код выясняется, что вы правильно расставили скобки. Но на самом деле, закрывающая скобка, которая должна быть после текста RTL и перед закрывающей </P>, на самом деле находится перед начальным текстом RTL. Если вы введете это правильно, это будет выглядеть неправильно (поскольку используемый вами текстовый редактор предполагает, что конечная скобка равна LTR в соответствии с Unicode). Чтобы убедиться в этом, скопируйте содержимое в свой редактор, наведите курсор в конце «проблема:» и несколько раз нажмите стрелку вправо и обратите внимание на расположение последней скобки.
Не вдаваясь в дополнительные объяснения, вот несколько примеров, чтобы заставить это работать:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bracket problems with BiDi</title>
</head>
<body>
<p style="direction: rtl;"><span dir="ltr">Bracket problem no more: hello (world):</span></p>
<p style="direction: rtl;"><span style="direction: ltr; unicode-bidi: embed">Bracket problem no more: hello (world):</span></p>
<p style="direction: rtl;">Bracket problem no more: السلام (عليكم)</p>
<!-- style for p tag below is ltr by default -->
<p>Bracket problem no more: <span dir="rtl">السلام (عليكم)</span></p>
<p>Bracket problem no more: <span style="direction: rtl; unicode-bidi: embed">السلام (عليكم)</span></p>
</body>
</html>
Существуют различия в том, как работает style=»direction: ltr;» и dir =»ltr», поэтому я привел примеры обоих. Кроме того, поскольку я предполагаю, что вам в основном нужно решить вашу вторую проблему, когда у вас в основном есть текст RTL в документе LTR, я привел последние два примера.
ПРИМЕЧАНИЕ: Если последние два примера — это то, что вы ищете, и вы собираетесь использовать CSS, свойство unicode-bidi обязательно, и это определяет всю разницу между работой и неработоспособностью.
Комментарии:
1. Спасибо за подробное объяснение; было действительно полезно… В качестве ссылки для остального мира эта ссылка тоже хороша: w3.org/International/questions/qa-bidi-controls
2. Ничто из этого не работает в сценарии, где у вас есть выпадающий список, и ltr изменяет не только скобки, он отображает выпадающий список в обратном порядке. Я ищу решение, в котором выпадающий список по-прежнему rtl, но текст внутри — ltr или просто любое решение, которое не испортит скобки.
3. Сам выпадающий список должен отображаться как LTR, а затем каждый элемент внутри <option> — как RTL? Если это не исправит проблему, вам следует опубликовать вопрос. Я уверен, что кто-нибудь сможет вам помочь.
Ответ №2:
Вам просто нужно добавить символ LRM после последней скобки. HTML-объект: amp;#x200E;
<html dir="rtl">
<body>
<p>hello (world)amp;#x200E;</p>
</body></html>
Это указывает браузеру интерпретировать скобки как чтение слева направо.
Ответ №3:
ответ silkfield привел меня на эту страницу, на которой показаны многие возможные проблемы с макетами BiDi, включая проблему со скобками
Комментарии:
1. Вау! Я использую Windows в течение десятилетия, но я не заметил, чтобы я мог вставить эти символы, просто щелкнув правой кнопкой мыши. Большое спасибо за изображения.
Ответ №4:
вы можете поместить следующий css для вашей проблемы «unicode-bidi: embed» в тег body, он будет работать нормально
Комментарии:
1. Я не знаю, как, но unicode-bidi: plaintext; у меня сработал
2. unicode-bidi: открытый текст должен быть лучшим вариантом. Особенно для случаев, когда у вас могут быть оба направления rtl и ltr