javascript - 使从左到右的语言写成从右到左的 html

Question

在我的 html 页面中，我需要让我的文本输入接受一组特定的字母。我通过捕获按键事件并检查输入的字符是否有效来做到这一点。

这些允许的字符既取自从左到右书写的英语，也取自从右到左书写的一些其他语言。输入的每个单词可以是英语和阿拉伯语、希伯来语字母的混合。

我需要让文本框显示从右到左书写的文本(希伯来语或阿拉伯语的相同行为适用于英语)- 例如，如果我写下 -

一个

乙

C

D

是

我希望它完全按照从右到左的顺序呈现。

设置"style:dir=rtl"并不能解决问题，它只是从右到左呈现要写的文本，但实际上并没有改变英文字符的顺序根据我的需要呈现。

rtl 结果是这样的:

B

一个

是

D

C

最好的方法是什么？

编辑:

这似乎解决了我的问题:Right to left Text HTML input 尽管没有像我希望得到的那样详细解释解决方案。

Answer 1

将您的文本框样式设置为:

style="direction:rtl; unicode-bidi:bidi-override;"

为什么？

当您只是设置方向性(使用 direction: rtl)时，您仍然在该长文本中有单独的“方向运行”，每个都有自己的呈现行为。 “AB”部分是从左到右的排列，这就是为什么您会看到它呈现为英语单词，B 在 A 的右侧。

添加 unicode-bidi: bidi-override 告诉浏览器忘记那些单独的运行并简单地从右到左一个接一个地渲染所有字符。

[添加以解决使用数据的潜在客户端应用程序]

对于使用此数据的客户端应用程序，您可以以某种方式提供字符串本身，以强制它们正确显示它，即使这些客户端应用程序不在您的控制范围内也是如此。

假设客户端应用程序使用 API 或某种服务访问数据(意味着您不让它们直接访问您的数据库)，那么您可以添加一个名为 Right-to-Left Override (RLO) 到字符串的开头，然后再将其发送给客户端。

RLO 字符代码是 \u202E 因此按照上面的示例，返回给客户端的结果字符串将是:

\u202E

一个

B

C

D

是

大多数网络浏览器和操作系统尊重 BiDi 控制字符并应用正确的 BiDi 呈现逻辑。因此，当客户端应用程序将该字符串输出到 UI 时，底层渲染引擎应该按照您的预期显示该字符串。

注意:根据您的平台和编程语言，将十六进制代码添加到字符串中的 unicode 字符可能会有所不同。