如何根据输入文本语言自动设置文本方向？答案

【问题标题】：How can I automatically set text direction based on input text language?如何根据输入文本语言自动设置文本方向？
【发布时间】：2013-03-04 17:28:08
【问题描述】：

在 Google plus（和许多其他地方）中，当我想发布内容时，当我用波斯语（一种从右到左的语言）输入时，文本方向会自动设置为 rtl 和 text-alignment:right，当我开始输入英文时，它会自动变为 ltr 和 text-alignment:left。我怎样才能拥有这样的功能？这与 HTML5 或 Javascript 有什么关系吗？我应该遵循什么线索？

提前致谢

【问题讨论】：

这个链接非常适合你： stackoverflow.com/questions/7770235/…
谢谢@ErfanSafarpoor，BTW 早就解决了；)

标签： javascript html css bidi

【解决方案1】：

列出从右到左的语言典型字符
动态检测它们（通常的 js 事件）
相应地更改 css 类

或点击此链接：

http://www.i18nguy.com/temp/rtl.html

【讨论】：

好吧，正如你所建议的，我使用 RegExp 检测字符，例如 ltrChars : 'A-Za-z\u00C0-\u00D6 .....，并在需要时更改 CSS 类。

【解决方案2】：

还有 Twitter 的库，可能会有所帮助：

https://github.com/twitter/RTLtextarea

【讨论】：

【解决方案3】：

我为此编写了一个 JQuery 代码。只需将类“checkRTL”添加到要设置其方向的元素即可。

var rtlChar = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
$(document).ready(function(){
    $('.checkRTL').keyup(function(){
        var isRTL = this.value.match(rtlChar);
        if(isRTL !== null) {
            this.style.direction = 'rtl';
         }
         else {
            this.style.direction = 'ltr';
         }
    });
});

【讨论】：

【解决方案4】：

将dir=auto 添加到您的输入元素中：

在表单和插入的文本上使用 dir="auto" 以便自动检测运行时提供的内容的方向。

https://www.w3.org/International/questions/qa-html-dir#quickanswer

【讨论】：

另外，您可能需要在样式中添加“text-align:justify”以获得正确的对齐方式。

【解决方案5】：

将dir="auto" 添加到您的元素，然后使用window.getComputedStyle(element).getPropertyValue('direction')

例子：

<div id="foo" dir="auto">نے والے ہیں۔<div>

// returns rtl
window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')

【讨论】：

【解决方案6】：

我遇到了dir=auto 有时无法正常工作的问题挖掘CSS后我发现

#container > * {
    text-align: start;
    unicode-bidi: plaintext;
}

更灵活、更通用

【讨论】：