支持RTL语言

Question

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

我想要的是，如果在某些元素中加载的文本是RTL，那么将方向切换到RTL。此外，对于输入，当用户输入文本时，如果是RTL，则应触发，并将方向更改为RTL。

例如，Facebook就是这样做的。如果你在搜索中输入一些阿拉伯文本，它会自动将方向切换到RTL

没有找到任何通过谷歌搜索的练习教程，任何脚本或类似的东西。

我只找到了属性dir="auto"，它可以自动触发正确的方向，但看起来像这样，旧浏览器不支持它。

任何建议，教程，脚本如何做到这一点都会有所帮助。

Answer 1

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

但是，您应该注意到，算法并不是那么简单，而且不同的产品工作方式也不同。下面是几个例子：

• Facebook使用了一种算法，在大多数情况下，它会尝试识别第一个“强”字符，所以输入一个希伯来语单词后面跟着很多英语的句子，仍然会显示该段落为RTL对齐。(他们似乎在你输入和发表评论时看到的内容也有区别，但这是一个不同的问题)
• 谷歌hangouts似乎会根据每个方向上的强字符数量来切换其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 online并不是关于键入和文本框的。在LTR和RTL上下文之间切换还涉及UI调整，如镜像内容的对齐和/或菜单和徽标等内容的位置。

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