All geek questions in one place

How to determine if a user enters RTL or LTR?

I want to imitate google input, It automatically changes the direction of input input based on the language you enter.

How can I tell if a user is entering RTL or LTR? It should work cross browser.

+4
source share
4 answers

You must use the dir = "auto" attribute

eg.

<html dir="auto">

Thus, the browser will look at the first strongly typed character and automatically adjust the text.

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

+3
source 

 <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>
+1
source

If you want to imitate Google’s directional recognition algorithm, you will need to listen to the input change, find out if the inserted RTL or LTR character (or neutral) was changed and change the textbox dir="" attribute accordingly.

The Google algorithm, for the most part, seems to calculate most of the strong characters in a string and determine the direction from this. If you type RTL, it will switch the context to RTL, and if you then switch to LTR for the same paragraph, it can switch the context to LTR again if these characters exceed the number of RTL.

For comparison, Facebook also uses a directional algorithm, but it is slightly different - it seems that the first strong character determines the direction of the paragraph, and not the total number.

(For writing, Google also has several algorithms for this: Gmail behaves slightly different than Google Hangouts, which is different from how Google’s search input is aligned. These things basically don’t have “right” or “wrong” answers, but rather what suits your use)

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

You can create a JavaScript method that listens for user input, uses the regular expression above to determine which strong character is used (either by the first character, or by counting all of them, depending on what works best for your use and scale) - and change the textbox attribute dir="" accordingly.

Make sure you see the presented text later with the correct alignment later, so you may have to either use something to save your alignment or re-recognize it when you render it. In any case, do not forget that the same dir="" attribute is required for display.

0
source

Too late, but maybe it will help someone once. This function will add a direction attribute to the input field based on the first character entered, and when the user deletes the entered text, the function will again detect the new text language.

 $.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 isRTL = RTL_Regex.test(String.fromCharCode(e.which)); var Direction = isRTL ? 'rtl' : 'ltr'; _This.css({'direction' : Direction}); } }); }); };

To use this:

 $('input').Set_Input_Direction();
0
source

Source: https://habr.com/ru/post/1442093/

More articles:


All Articles