How can I automatically set text direction based o

问题:

In Google plus (and a lot of other places), when I want to post something, when I type it in Persian, which is a right-to-left language, text direction is automatically set to rtl and text-alignment:right, and when I start to type in English it changes automatically to ltr and text-alignment:left. How can I have such functionality? Is this anything with HTML5 or Javascript? What clues should I follow?

Thanks in advance

回答1:

1. list the right to left languages typical characters
2. detect them on the fly (usual js events)
3. change css classes accordingly

Or follow this link:

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

回答2:

I wrote a JQuery code to do this. Just add class "checkRTL" to the element you want to set its direction.

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';
         }
    });
});

回答3:

There's also Twitter's library, which may help:

https://github.com/twitter/RTLtextarea

回答4:

Add dir=auto to your input elements:

Use dir="auto" on forms and inserted text in order to automatically detect the direction of content supplied at run-time.

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

回答5:

Add dir="auto" to your element and then use window.getComputedStyle(element).getPropertyValue('direction')

Example:

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

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