6

HTML5 中标签的<bdi>目的是将双向文本与其上下文隔离开来。这正是我正在寻找的。

从左到右的用户名显示如下：

Welcome, Generic User. [Logout]

使用从右到左的用户名，它会变成这样可怕的事情：

Welcome, [tougoL] .resU cireneG

甚至更糟糕的是，根据上下文，向后显示周围的所有内容（不仅仅是用户名）。

问题是目前还没有浏览器支持这个<bdi>标签，所以我在徘徊，有没有办法模拟它？哪些 HTML 标签也可以隔离它？我知道<span>也不知道<div>。

我不想删除所有 BIDI 字符，但在我看来，我的网站正确显示的重要性 > 双向语言用户参与的权利。

4

2 回答 2

4

问题中的字符串不会触发错误的显示顺序，除非用户名字符串中有控制字符，而是例如表单的消息

User (N badges) wrote:

如果将 User 替换为阿拉伯字母的名称，例如 أحمد，并且 N 替换为数字，例如 3，则会这样做。然后呈现将是

أحمد (3个徽章) 说:

从技术上讲，这不是错误。它遵循 Unicode 双向性规则——阿拉伯字母的强从右到左 (RTL) 方向性会影响方向性较弱的字符，如括号。但从实际角度来看，这当然都是错误的。在通常从左到右的上下文中，任何可能包含 RTL 字符的字符串都应该受到保护和隔离。在 HTML 文档中，有三种方法可以做到这一点：

  • 字符级：在字符串之前使用控制字符 U+202B（从右到左嵌入，RLE），在字符串之后使用 U+202C（流行方向格式化，PDF）。在 HTML 中，您可以为它们使用&#x202b;和&#x202c;。IE 9 支持此功能，但大多数其他浏览器不支持。
  • 标记级别：使用<bdi>标记。如前所述，浏览器尚不支持它。
  • 样式表：使用unicode-bidi: embed. 现代浏览器通常支持这一点。

您可以将样式表方法与标记方法结合起来。这样做是合乎逻辑的，在未来的浏览器中，即使禁用样式表，这种双重方法也可以工作：

<script>
document.createElement('bdi');
</script>
<style>
bdi { unicode-bidi: bidi-override; }
</style>
...
<bdi>أحمد</bdi> (3 badges) wrote:

脚本代码用于使旧版本的 IE 识别该<bdi>元素，以便样式对其生效。当脚本被禁用时，这当然会失败，所以<span>与类一起使用会稍微安全一些，你仍然可以将它包装在<bdi>. 所以另一种选择是

<style>
.bdi { unicode-bidi: bidi-override; }
</style>
...
<bdi><span class=bdi>أحمد</span></bdi> (3 badges) wrote:
于 2011-12-17T17:29:41.843 回答
4

使用从右到左的用户名，它会变成这个可怕的东西

它不应该。（例如）阿拉伯语用户名中的文本将从右到左呈现，但不会影响其周围拉丁文本的流动。

您可能会想到的问题是用户名包含 Unicode BDO（双向覆盖）控制字符时。这会影响它后面的所有内联文本，这对于将文本模板化为 HTML 的网站来说通常是一件坏事。

这个问题最简单的解决方案可能是输入过滤以删除控制字符，包括普通的 ASCII 字符 (0x00–0x1F) 和 Unicode 字符。有一组字符被 Unicode 和 W3 指定为不适合在本注释中的标记中使用，Web 应用程序通常希望从数据中删除这些字符。它包括 BDO 字符和其他几个可能导致奇怪效果泄漏到它们自己的文本段之外的字符。

于 2011-11-04T17:00:45.700 回答