支持 RTL 语言

Question

支持 RTL 语言

javascripthtmlcssright-to-left

3

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

我希望的是，如果某个元素加载的文本是RTL的，则将其方向切换为RTL。对于输入框，当用户输入文本时，它应该触发RTL并将方向更改为RTL。

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

通过谷歌搜索，我没有找到任何实用的教程、脚本或其他方法，只发现了一个属性dir="auto"，它可以自动触发正确的方向，但看起来这不适用于旧浏览器。

请问有什么建议、教程或脚本可以帮助我完成这个功能吗？

- carpics

1

dir="auto" 是 HTML5 的一部分（正如您所说，不受旧版浏览器支持）。 - Dekel

@Dekel 关于你的第一条评论。是的，我看到了那个选项，但有没有JS的示例或其他东西呢？我很惊讶我找不到任何示例或任何东西。 - carpics

@Dekel 没有，我不是很擅长正则表达式，但我认为只能用正则表达式来编写。这意味着需要列出所有的RTL语言，然后编写正则表达式来检查文本中是否包含任何该语言。 - carpics

1

你已经很接近了。有几种方法可供选择。你的方法是其中之一（但你不需要RTL语言，而是需要这些语言的实际字符）。学习一些正则表达式，开始做些事情，然后你就可以得到帮助 :) - Dekel

我建议深入研究 https://github.com/cssjanus/cssjanus 以进行CSS镜像处理，MediaWiki在其i18n支持中使用了类似的解决方案。 - Ebrahim Byagowi

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mooeypoo · Accepted Answer

如果您只想支持在用户输入时从LTR切换到RTL的文本框上下文，那么您将不得不侦听输入事件（输入，keypress，keydown等，哪个对您的情况最好）并让代码决定文本框是LTR对齐还是RTL对齐。

但需要注意的是，这个算法并不是那么直截了当，而且不同的产品工作方式也不同。以下是一些例子：

- Facebook使用一个算法，大部分时间会尝试识别第一个“强”字符，因此输入一个希伯来语单词后跟很多英语的句子仍将显示为RTL对齐。（他们似乎还有一个区别，即在键入时看到的内容与发布评论时看到的内容不同，但这是另一个问题） - Google 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不仅仅涉及键入和文本框。在LTR和RTL上下文之间切换还涉及UI调整，例如镜像内容的对齐方式和/或菜单和标志等位置。

如果您希望允许页面翻译成RTL语言，则需要镜像布局。如果您的唯一目标是在文本框中切换上下文，则无需担心此问题，但如果您想确保网站允许翻译，则需要考虑镜像UI和整个接口的方法。