How to detect text language with jQuery and XRegExp to display mixed RTL and LTR text correctly

Question

I'm trying to display a Twitter feed in a WordPress site. My client tweets in English and in Arabic and sometimes in a combination of the two languages. I need to detect the language and add the class 'rtl' to Arabic tweets and also those tweets where the content is predominately in Arabic. I'm using a plugin which strips the Twitter iso_language_code metadata.

When attempting this on a previous development site a few years ago, I remember successfully using a variation of Tristan's solution found here:

How to detect that text typed in text-area is RTL

Unfortunately it no longer seems to work.

Tristan's jsfiddle no longer works either.

I'm using this resource:

http://cdnjs.cloudflare.com/ajax/libs/xregexp/2.0.0/xregexp-min.js

and this script:

    jQuery(document).ready(function($) {
        $('p').each(function() {
        if(isRTL($(this).text()))
            $(this).addClass('rtl');
    });

    function isRTL(str) {
        var isArabic = XRegExp('[\\p{Arabic}]');
        var isLatin = XRegExp('[\\p{Latin}]');
        var partLatin = 0;
        var partArabic = 0;
        var rtlIndex = 0;
        var isRTL = false;

        for(i=0;i<str.length;i++){
            if(isLatin.test(str[i]))
                partLatin++;
            if(isArabic.test(str[i]))
                partArabic++;
        }
        rtlIndex = partArabic/(partLatin + partArabic);
        if(rtlIndex > .5) {
            isRTL = true;
        }

        return isRTL;
    }

    });

Can anyone help me with where I'm going wrong?

Many thanks,

Phil

Update

I've managed to get a partial solution working:

    jQuery(document).ready(function($) {

    var arabic = /[\u0600-\u06FF]/;

    $('p').each(function() {

        if (arabic.test($(this).text())) {
      $(this).addClass( "rtl" ).attr('style','text-align:right;direction:rtl');
      }

      else {
      $(this).addClass( "ltr" ).attr('style','text-align:left;direction:ltr');
      }

    });

    });

My apologies in advance - I'm very much a beginner at this.

I've done a jsfiddle here:

http://jsfiddle.net/philnicholl/4xn6jftw

This works if the text is all Arabic or all English but a single word of Arabic in an English tweet will mess things up.

Bizarely, when I added this script to a real world WordPress test, it produced exactly the opposite result from what I wanted, as in Arablic paragraphs and tweets were given the LTR class and styling and English text given RTL.

Reversing the if else gives the right result.

Any help would be greatly appreciated.

Thank you again.

Phil

mbadeveloper · Accepted Answer · 2019-10-03T14:20:58.270

1

You can use regular expression to determine if contain only Arabic letters

$('p').each(function() {
    if(isRTL($(this).text()))
        $(this).addClass('rtl');
});

function isRTL(str) {
    return /^[\u0600-\u06FF]/.test(str);
}

p.rtl {
    direction: rtl;
}
p.ltr {
    direction: ltr;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Hello World</p>
<p>مرحبا بالعالم</p>
<p>Hello World مرحبا بالعالم</p>

edited Oct 03 '19 at 14:20

answered Oct 03 '19 at 14:01

mbadeveloper

1,272
9
16

Brilliant! This is working well here: http://3.10.83.162/tweet-test-3/. I had to add text-align to the css as the plugin has some overriding rules. My cumbersome partial solution - see update to my question - was somewhere along these lines but yours is very elegant and also works when English is included in Arabic text. As a beginner, I'd be interested to know why mine didn't work, but that's for another day. Thank you very much! – user3869177 Oct 03 '19 at 14:51
@user3869177 can you please mark the answer as valid :) – mbadeveloper Oct 03 '19 at 15:06
i'd use `[\u0591-\u07FF]` - it includes even more RTL chars – oriadam Apr 13 '22 at 13:58

score 0 · Answer 2 · answered Oct 03 '19 at 13:51

I suggest another solution if you are using wordpress you can assign variable in the head of header.php or at the end of your footer.php file

you can assign new variable by check wordpress function is_rtl()

example: Js code in header.php or footer.php between < script > tag

  <?php if ( is_rtl() ) :?>
    var is_rtl = true
  <php else:?>
    var is_rtl = false;
  <?php endif;?>

Then in your js file use it to check

jQuery(document).ready(function($) {
    $('p').each(function() {
    if(is_rtl)
      $(this).addClass('rtl');
});

Thank you, Ahmed. I'm not sure if I'm doing this correctly. I'm adding the php between — user3869177, Oct 03 '19 at 14:25

How to detect text language with jQuery and XRegExp to display mixed RTL and LTR text correctly

2 Answers2

Linked