скобки отображаются неправильно для стиля отображения справа налево

HTML-код

<html dir="rtl">
<p>hello (world)</p>
</html>

вы увидите такую ​​страницу:

(hello (world

Однако, если я изменю html-код на

<html dir="rtl">
<p>hello (world) again</p>
</html>

Затем текст отображается нормально:

 hello (world) again

Кто-нибудь может объяснить, почему это происходит? Как исправить первый пример?

Мой браузер хром


google-chrome html right-to-left
person user607722    schedule 21.04.2011    source источник
comment
это сложно ... извините, что здесь нет решения, но для очень хорошего обзора множества проблем, которые могут возникнуть при изменении направления чтения, я могу порекомендовать эту ссылку: w3.org/International/tutorials/bidi-xhtml   -  person ezmilhouse    schedule 21.04.2011
comment
Возможный дубликат Почему [x]y отображается неправильно в RTL направление?   -  person Roddy of the Frozen Peas    schedule 16.05.2017

Ответы (6)


arrow_upward
42
arrow_downward

Вам просто нужно добавить символ LRM после последней скобки. HTML-объект: &#x200E;

<html dir="rtl">
<body>
<p>hello (world)&#x200E;</p>
</body></html>

Это говорит браузеру интерпретировать скобки как чтение слева направо.

person Colin R. Turner    schedule 28.10.2011
comment
Добро пожаловать в Stack Overflow! Будьте осторожны при публикации копий и вставок шаблонных/дословных ответов на несколько вопросов (stackoverflow.com/questions/5801820/), они, как правило, помечаются сообществом как спам. - person Kev; 29.10.2011
comment
Когда я вижу ответ, я действительно не ожидаю, что он был написан пользователем от руки. Часто это даже нецелесообразно (хотя обратная ссылка может быть полезна для получения дополнительной информации). Используя этот совет, я обнаружил, что инструменты разработчика Chrome - это хорошее сокращение &lrm; - его легче запомнить... - person Fabio Milheiro; 27.06.2014
comment
Я долго искал это решение. &#x200E; работал на меня очень хорошо. Спасибо :) - person Kushal J.; 01.09.2017
comment
@freeworlder Это не работает с атрибутом заполнителя во входном теге. - person Maulik patel; 26.11.2017
comment
Кто-нибудь может объяснить, почему это происходит? - person Karma; 03.01.2018

arrow_upward
17
arrow_downward

Или лучше вы можете попробовать в CSS

*:after {
    content: "\200E‎";
}
person Adrian Ber    schedule 17.05.2013
comment
Это ничего не сделало для меня. Круглые скобки по-прежнему неверны, но они везде вставляли случайные пробелы. - person Nick; 18.09.2014
comment
Да, здесь работает, я бы убедился, что стиль действительно применяется к вашим элементам. - person chrismarx; 16.03.2017
comment
@Adrian Это не работает с атрибутом заполнителя во входном теге. - person Maulik patel; 26.11.2017

arrow_upward
5
arrow_downward

Добавление специального символа rlm в css до и после того, как ваш элемент разрешил все случаи, с которыми я столкнулся в Firefox и Chrome:

*:after {
    content: "\200E‎";
}
*:before {
    content: "\200E‎";
}
person DoPPeS    schedule 31.07.2018
comment
Вот и все! Благодарю вас! - person adripanico; 28.09.2018

arrow_upward
3
arrow_downward

Используйте &rlm; перед (. Бывший:

<html dir="rtl">
<body>
<p>hello &rlm;(world)</p>
</body></html>

если вы используете javascript/svg Dom, то

 aText = $('<span>').html(aText.replace("(","&rlm;(")).text();
 $("<p>").html(aText);

для других особых персонажей

function getRTLText(aText,aChar) {
        if ( aText != undefined && aText.replace){
            aChar = (aChar === undefined )?"(":aChar;
            aText = $('<span>').html(aText.replace(aChar,"&rlm;"+aChar)).text();
        }
        return aText;
}

и функция вызова

getRTLText("March / 2018","/");

person Veer    schedule 06.04.2018

arrow_upward
1
arrow_downward

Это правильный рендеринг скобок для текста справа налево (очевидно). Эта статья дает немного больше информации.

http://www.i18nguy.com/markup/right-to-left.html

Атрибут dir теперь устарел.

person trickwallett    schedule 21.04.2011

arrow_upward
-1
arrow_downward

Если у кого-то есть эта проблема в WordPress, вы можете попробовать это исправление:

https://gist.github.com/dtbaker/b532e0e84a8cb7f22f26

function dtbaker_rtl_bracket_hack($content){
    if(is_rtl()){
        $content = preg_replace('#<p>([^<]+)\)\s*</p>#','<p>$1)&#x200E;</p>',$content);
        $content = preg_replace('#<p>\s*\(([^<]+)</p>#','<p>&#x200E;($1</p>',$content);
    }
    return $content;
}
add_filter('the_content','dtbaker_rtl_bracket_hack',100,1);
person dtbaker    schedule 27.10.2014
comment
Использование кувалды для колки орехов. - person adripanico; 28.09.2018