HTML textarea中的双向（BiDi）文本不尊重LRM控制字符

Question

我很难让BiDi字符串在HTML textarea中工作，正如我所期望的那样。

此测试字符串包含阿拉伯语和英语，以及伪标签序列（＆lt; 1 /＆gt;，＆lt; 2 /＆gt;），它们由中性方向字符组成（＆lt;，＆gt;，/ ，数字）并且应该通过他们面前的强方向角色继承他们的方向。

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

结果不是我的预期：

请注意，textarea的direction属性设置如下：dir='rtl'

使用Chrome和FF测试，它们似乎都没有按预期工作。我错过了什么吗？

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

Answer 1

不幸的是，如果可能的话，在textarea中显示这些内容将非常困难。

这里有几个问题，其中包括括号和括号在Unicode双向算法中镜像的事实：此<span dir="ltr"><</span>呈现为'＆lt;'，而此{{1} }呈现为'＆gt;'。所有这些都是在我们对RTL和LTR字符串中的“字符串结束”有不同定义这一事实的基础上添加的。

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

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

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