Question

您可能知道某些语言是从右到左编写/读取的，我们正在尝试支持某些RTL语言。对于在HTML中使用dir =“rtl”的Web UI，大部分工作都归功于浏览器所具有的算法。但是我在文本中用括号来解决这个问题：

<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>

这里可以看到问题： Screenshot

所以我希望最后一个支架留在最后。你的解决方案是什么？

Answer 1

这里有很多问题。根据unicode标准，括号是中性的，这意味着它们本身并不被视为LTR或RTL。他们采取周围语言的方向。在错误渲染的示例中，假设右括号的方向与英语相同，即LTR。

第一个问题：您告诉浏览器该段落应被视为RTL。浏览器在里面找到英文，即LTR，因此它认为英语嵌入在RTL段落中，最后一个字符“）”被视为RTL。（周围的段落是RTL）。

第二个问题：这里没有问题，只需简单地查看您提供的源代码，就会显示您已正确提供了括号。但实际上，结束括号应该在RTL文本之后和结束之前＆lt; / P＆gt;实际上是在启动RTL文本之前。如果你正确输入它，它看起来会错误（因为你使用的文本编辑器假定结束括号是根据unicode的LTR）。要验证这一点，请将内容复制到编辑器上，将光标放在“问题：”的末尾，然后反复按右箭头并观察最后一个括号的位置。

如果没有提供更多的解释，这里有一些例子可以解决这个问题：

<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”的不同之处在于works和dir =“ltr”有效，所以我给出了两者的例子。另外，因为我认为你基本上需要解决你的第二个问题，你主要在其他LTR文档中有RTL文本，我提供了最后两个例子。

注意：如果最后两个示例是您要查找的，并且您将使用CSS，则需要unicode-bidi属性，这会使工作与不工作之间产生差异。

Answer 2

您只需要在最后一个括号后添加LRM字符。 HTML实体：‎

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

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

Answer 3

silkfield的回答让我进入this页面，其中显示了BiDi布局的许多可能问题，包括括号问题

enter image description here

Answer 4

您可以为您的问题添加以下CSS “ unicode-bidi：embed ”在body标签中，它会正常工作

如何解决BiDi支架问题？

4 个答案: