html - HTML 文本区域内的双向 (BiDi) 文本不遵守 LRM 控制字符

Question

我很难按照我的预期让 BiDi 字符串在 HTML 文本区域内工作。

这个测试字符串包含阿拉伯语和英语，加上由中性方向字符(<、>、/、数字)组成的伪标签序列(<1/>、<2/>)，应该继承他们的方向是由他们面前的强方向角色决定的。

鉴于这些伪标签位于 RTL 和 LTR 文本之后，我需要强制文本的方向放置一个 LRM (U+200E, ‎) char before 每个伪标签。

结果不是我所期望的:

请注意，文本区域的方向属性设置如下:dir='rtl'

同时使用 Chrome 和 FF 进行了测试，它们似乎都无法按预期工作。我错过了什么吗？

Jsfiddle 上的结果甚至不同:https://jsfiddle.net/o7d2ymdc/1/

Answer 1

不幸的是，如果可能的话，在文本区域内显示这些内容将非常困难。

这里有几个问题在起作用，其中一个是方括号和圆括号在 Unicode 双向算法中是镜像的:这 <span dir="ltr"><</span>呈现为“<”，而此 <span dir="rtl"><</span>呈现为“>”。所有这些都是在我们对 RTL 和 LTR 字符串中的“字符串结尾”有不同定义这一事实之上添加的。

您最好的选择可能是使用 ContentEditable。您可以显示可编辑的富文本——实际上是 html 节点——并且基本上将您的 RTL 片段与带有跨度的 HTML 标记隔离开来，就好像您会静态显示它一样。但是，如果此文本框允许自定义用户生成的文本，您可能需要想出一个好的算法，在用户键入时自动换行双向文本，这可能是一个相当大的挑战。

如果这有帮助，那么您不是唯一一个处理这个问题的人。例如，如果您在阿拉伯语维基百科中编辑 HTML block ，您将看到完全相同的问题(这使得编辑 HTML 和 wikitext 成为一个相当大的挑战)

这个问题也是人们更喜欢所见即所得编辑器的原因之一——它在标记/样式和文本本身之间有适当的上下文和概念分离。