javascript - 支持 RTL 语言

Question

我想让我的网站同时支持 LTR 和 RTL 语言。

我想要的是，如果某些元素中加载的文本是 RTL，则将方向切换到 RTL。同样对于输入，当用户键入文本时，如果它是 RTL 并且将方向更改为 RTL，它应该触发。

例如 Facebook 正在这样做。如果您在搜索中键入一些阿拉伯文本，它会自动将方向切换为 RTL

没有通过谷歌搜索、任何脚本等找到任何练习教程。

我只发现属性 dir="auto" 会自动触发正确的方向，但看起来它不受旧浏览器的支持。

如何执行此操作的任何建议、教程、脚本都会有所帮助。

Answer 1

如果您只想支持在用户键入时将文本框上下文从 LTR 切换到 RTL，那么您将不得不监听输入事件(input、keypress、keydown 等，以最适合您的情况为准)并让代码决定文本框是 LTR 对齐还是 RTL 对齐。

不过，您应该注意，此算法并不是那么简单，而且不同产品的工作方式也不同。几个例子 -

• Facebook 使用的算法在大多数情况下会尝试识别第一个“强”字符，因此键入一个带有一个希伯来语单词后跟大量英语的句子仍会将段落显示为 RTL 对齐。 (他们在您键入时看到的内容与您在发表评论时看到的内容似乎也有所不同，但这是一个不同的问题)
• Google 视频群聊似乎会根据每个方向上强字符的数量来切换其 RTL/LTR 上下文。在您键入时，如果您开始键入一种语言而不是另一种语言，您的上下文可能会从 LTR 切换到 RTL 几次。

这里没有对错之分，只有偏好和最适合您的算法。

您可以在此处阅读 Unicode 双向算法中的“强字符”:http://unicode.org/reports/tr9/

您可以看到一个示例，说明如何识别字符串中的第一个“强字符”以嵌入到 MediaWiki 的语言文件中，使用测试方向性的正则表达式(第 1 组是 LTR，第 2 组是 RTL)您可以使用这些来创建一个 JavaScript 方法，根据您认为合适的方式，根据第一个强字符或大多数字符设置文本区域的 dir=""属性: https://github.com/wikimedia/mediawiki/blob/6f19bac69546b8a5cc06f91a81e364bf905dee7f/languages/Language.php#L174

作为旁注，我只想指出在线支持 RTL/LTR 不仅仅是关于打字和文本框的。在 LTR 和 RTL 上下文之间切换还涉及 UI 调整，例如镜像内容的对齐方式和/或菜单和 Logo 等内容的位置。

如果您希望将页面翻译成 RTL 语言，这就很重要，这意味着您还需要镜像布局。如果您的唯一目标是在文本框中切换上下文，您不必担心这一点，但如果您想确保站点允许翻译，则需要考虑镜像 UI 和整个界面的方法。