从右到左显示样式的括号显示错误答案

【问题标题】：brackets displays wrongly for right to left display style从右到左显示样式的括号显示错误
【发布时间】：2011-08-10 03:16:10
【问题描述】：

html代码

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

你会看到这样的页面：

(hello (world

但是，如果我把html代码改成

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

然后文字正常显示：

 hello (world) again

谁能解释为什么会这样？如何修复第一个示例？

我的浏览器是chrome

【问题讨论】：

这个很难……很抱歉这里没有解决方案，但是对于更改阅读方向时可能出现的许多问题有一个很好的概述，我可以推荐这个链接：w3.org/International/tutorials/bidi-xhtml跨度>
Why does "[x]y" display incorrectly in the RTL direction?的可能重复

标签： html google-chrome right-to-left

【解决方案1】：

您只需在最后一个括号后添加 LRM 字符。 HTML 实体：&#x200E;

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

这告诉浏览器将括号解释为从左到右阅读。

【讨论】：

欢迎来到 Stack Overflow！在发布多个问题 (stackoverflow.com/questions/5801820/…) 的复制和粘贴样板/逐字答案时要小心，这些往往会被社区标记为“垃圾邮件”。
当我看到一个答案时，我并不认为它是用户手写的。很多时候它甚至不实用（尽管反向链接可能对更多信息有用）。在使用这个技巧时，我发现它是 Chrome 开发者工具的一个很好的速记 &lrm; - 更容易记住...
我一直在寻找这个解决方案。 &#x200E; 非常适合我。谢谢:)
@freeworlder 这不适用于“输入”标签中的“占位符”属性。
谁能解释一下为什么会这样？

【解决方案2】：

或者更好的是你可以在 CSS 中尝试

*:after {
    content: "\200E‎";
}

【讨论】：

这对我没有任何帮助。括号仍然是错误的，但它确实在各处插入了随机间隙。
是的，在这里工作，我会确保该样式实际上已应用于您的元素
@Adrian 这不适用于“输入”标签中的“占位符”属性。

【解决方案3】：

在元素解决我在 Firefox 和 Chrome 中遇到的所有情况之前和之后在 css 中添加特殊的 rlm 字符：

*:after {
    content: "\200E‎";
}
*:before {
    content: "\200E‎";
}

【讨论】：

就是这样！谢谢！

【解决方案4】：

在( 之前使用&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","/");

【讨论】：

【解决方案5】：

这是从右到左文本的正确括号渲染（显然）。本文提供了更多信息。

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

~~dir 属性现已弃用。~~

【讨论】：

【解决方案6】：

如果有人在 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);

【讨论】：

用大锤敲碎坚果。