5

I want imitate google's input, It automatically change input's typing direction based on the language you're typing in.

How can I identify if user is typing in RTL or LTR language? It must work cross-browser.

Ashish Bahl
  • 1,482
  • 1
  • 18
  • 27
Alvarez
  • 1,303
  • 1
  • 10
  • 28
  • What makes you think Google changes input typing direction? Rather, characters entered are automatically displayed left to right or right to left according to their inherent directionality. Please explain what you would wish to change here. – Jukka K. Korpela Oct 25 '12 at 16:03
  • Assume you don't know in what language user will type. I want input's direction to be the same as user's language. If he type in English, the input's direction will be LTR. But if he type in Arabic for example, the input's direction will be RTL. – Alvarez Oct 25 '12 at 17:31
  • When I enter Latin letters in a text input box, they are displayed left to right. For Arabic letters, the visual order is opposite. This is to be expected from any decent implementation. So what is the problem? – Jukka K. Korpela Oct 25 '12 at 18:16
  • 1
    I'll try explain it in other words: if you type in ltr langauge - I want the input to get `text-align: left;`, if you type in rtl language, the input should get `text-align: right;`. – Alvarez Oct 25 '12 at 19:21
  • That makes sense, but then it is a matter of setting alignment, not direction. There is no simple solution, since JavaScript has no direct access to character properties. – Jukka K. Korpela Oct 25 '12 at 19:56
  • It is quite easy actually, check this discussion: http://stackoverflow.com/q/13731909/104380 – vsync Feb 11 '13 at 22:36

4 Answers4

4

You should use the attribute dir="auto"

e.g.

<html dir="auto">

This way the browser will look at the first strongly typed character and adjust the text automatically.

For reference, here is the W3C documentation on this: http://www.w3.org/International/tutorials/new-bidi-xhtml/qa-html-dir

Toby
  • 121
  • 3
1

If you want to mimic Google's directionality recognition algorithm, you will need to listen to input change, recognize whether the character inserted was RTL or LTR (or neutral) and change the textbox's dir="" attribute accordingly.

Google's algorithm, for the most part, seems to calculate the majority of strong characters in the string and decide the directionality from that. If you type RTL it will switch the context to RTL, and if you then switch to LTR for the same paragraph, it may switch the context again to LTR if those characters outnumber the RTL ones.

For comparison, Facebook uses a direction algorithm as well, but it is slightly different - it seems to use the first strong character to decide the direction of the paragraph rather than the overall number.

(For the record, Google also seems to have several algorithms for this; Gmail behaves slightly differently than Google Hangouts which is different than how the input in Google search is aligning itself. In these things, there are mostly no "right" or "wrong" answers but rather what fits your use case)

Whichever method you choose to implement, you first need to identify what the user is typing. There are several ways to do this, but I would recommend the following:

You can create a JavaScript method that listens to the user's input, uses the regex above to identify which strong character is used (either by first character or by counting them all, whichever works best for your use and scale) -- and change the textbox's dir="" attribute accordingly.

Make sure you later display the submitted text with the correct alignment later, so you may have to either use something to store the alignment you picked or to re-recognize whenever you render it. Either way, don't forget that the display needs the same dir="" attribute as well.

mooeypoo
  • 231
  • 2
  • 5
1

Too late but maybe it can help someone one day. This function will add direction attribute to the input field based on the first inputed character, and when user clears input text the function will detect the new language of text again.

$.fn.set_input_direction = function()
{
    $(this).off('keypress').on('keypress',function(e){
        _this = $(this);
        setTimeout(function()
        {
            if(_this.val().length > 1){
                return;
            } else {
                var rtl_regex = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
                var is_rtl     = rtl_regex.test(String.fromCharCode(e.which));
                var direction = is_rtl ? 'rtl' : 'ltr';
                _this.css({'direction' : direction});
            }
        });
    });
};

To use it:

$('input').set_input_direction();
Mohamad Hamouday
  • 2,070
  • 23
  • 20
0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    
    <head>
    
        <script> 
            function checkRTL(s) {
                var ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF' + '\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
                    rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC',
                    rtlDirCheck = new RegExp('^[^' + ltrChars + ']*[' + rtlChars + ']');
    
                return rtlDirCheck.test(s);
            };
    
            // BIND KEYPRESS
            var input = $('input').on('keypress', keypress)[0];
    
            function keypress(e) {
                // need to wait for the character
                setTimeout(function () {
                    var isRTL = checkRTL(String.fromCharCode(e.charCode)),
                        dir = isRTL ? 'RTL' : 'LTR';
    
                    input.style.direction = dir;
                }, 0);
            }
        </script>
    
    </head>
    
    </body>
    
        <h1>Auto Direction
            <sup>(RTL | LTR)</sup>
        </h1>
        <input type="text" onkeypress="keypress()" placeholder="Type something&hellip;" />
    
    </body>
    
    </html>
Khurshid Ansari
  • 4,638
  • 2
  • 33
  • 52