支持RTL语言

Question

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

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

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

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

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

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

Answer 1

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

但是，您应该注意，此算法不是那么直接，并且不同的产品的工作方式不同。几个例子 -

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

这里没有对错，只有偏好，最适合你的算法。

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

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

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

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