如何根據輸入文本語言自動設置文本方向？

Question

在 Google plus（以及許多其他地方）中，當我想發布內容時，當我用波斯語（一種從右到左的語言）輸入內容時，文本方向會自動設置為rtl和text-alignment:right ，當我開始輸入英文時，它會自動更改為ltr和text-alignment:left 。 我怎樣才能擁有這樣的功能？ 這與 HTML5 或 Javascript 有什么關系嗎？ 我應該遵循什么線索？

提前致謝

Answer 1

將dir=auto添加到您的輸入元素：

在表單和插入的文本上使用 dir="auto" 以自動檢測運行時提供的內容的方向。

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

Answer 2

我寫了一個 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';
         }
    });
});

Answer 3

還有 Twitter 的庫，這可能會有所幫助：

https://github.com/twitter/RTLtextarea

Answer 4

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

例子：

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

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

Answer 5

1. 列出從右到左的語言典型字符
2. 即時檢測它們（通常的 js 事件）
3. 相應地更改 css 類

或者點擊這個鏈接：

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

Answer 6

 window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')

 <div class="" id="foo"> <div class="English">this is test message</div> <div class="Persian">این یک پیام تستی است</div> <div class="Persian-English">test برای حالت فارسی</div> </div>

在波斯語中，如果第一句話以英語單詞開頭，如 last div ，則整個文本將置於 LTR 模式

Answer 7

我發現dir=auto有時無法正常工作在挖掘 CSS 后我發現問題

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

更靈活和通用