How can I automatically set text direction based on input text language?

Question

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

**this link is very good for you :** http://stackoverflow.com/questions/7770235/change-text-direction-of-textbox-automatically/19449332#19449332 — Erfan Safarpoor, Oct 19 '13 at 12:42
Thank you @ErfanSafarpoor, This has been solved long ago BTW ;) — Mostafa Shahverdy, Oct 19 '13 at 16:33

score 21 · Accepted Answer · answered May 16 '19 at 13:50

21

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

answered May 16 '19 at 13:50

Amir Nissim

3,173
2
24
19

Also you may need to add "text-align:justify" to style in order to get right alignment. – Mohammad Etemaddar Jul 18 '21 at 05:38
Wow, is it that easy? – shamaseen Dec 13 '22 at 14:43

score 9 · Answer 2 · answered Nov 22 '16 at 14:01

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

realsarm · Answer 3 · 2022-12-28T17:13:50.273

9

I was having issue with dir=auto sometimes not working.

After digging CSS I found

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

More flexible and universal

edited Dec 28 '22 at 17:13

answered Dec 18 '21 at 12:59

realsarm

583
6
11

score 4 · Answer 4 · answered Mar 16 '13 at 18:16

4

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

https://github.com/twitter/RTLtextarea

answered Mar 16 '13 at 18:16

Amir E. Aharoni

1,308
2
13
25

score 4 · Answer 5 · answered Aug 17 '20 at 01:39

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

Sebas · Answer 6 · 2013-03-15T22:20:07.900

2

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

Or follow this link:

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

edited Mar 15 '13 at 22:20

answered Mar 15 '13 at 21:02

Sebas

21,192
9
55
109

1

Well, As you suggested, I detect characters using RegExp like `ltrChars : 'A-Za-z\u00C0-\u00D6 .....`, and change CSS classes whenever they are needed. – Mostafa Shahverdy Mar 16 '13 at 16:30

score 2 · Answer 7 · answered Jan 13 '23 at 11:00

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>

In Persian, if first sentence starts with an English word like last div, the whole text is placed in LTR mode

How can I automatically set text direction based on input text language?

7 Answers7

Linked