Question

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

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

Welcome, Generic User. [Logout]

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

Welcome, [tougoL] .resU cireneG

甚至更糟糕，具体取决于上下文，向后显示所有内容（不仅仅是用户名）。

问题是没有浏览器支持<bdi>标签，所以我在徘徊，有没有办法模拟它？什么HTML标签可以隔离它？我知道<span>和<div>没有。

我不想删除所有BIDI字符，但我看到它的方式，我的网站正确显示的重要性＆gt;双向语言用户参与的权利。

Answer 1

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

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

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

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

Answer 2

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

User (N badges) wrote:

会这样做，如果User被阿拉伯字母中的名字替换，比如说أحمد，并且N被一个数字替换，比如3.渲染将是

أحمد（3个徽章）说：

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

字符级别：在字符串之后使用控制字符U + 202B（从右到左嵌入，RLE）和U + 202C（pop方向格式，PDF）。在HTML中，您可以使用‫和‬。这是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:

如何模拟尚未实现的<bdi> HTML标记？</bdi>

2 个答案: