RTL text in Facebook posts re-orders words

Question

I am from Tunisia, and am currently developing a PHP script called PHPFOX. In it, I want to integrate an ability to change the text-direction of a TextBox automatically. Specifically, when you go to Facebook and want to leave a comment, the TextBox's input direction will change based on what your chosen keyboard direction is.

In other words, if you have chosen the Arabic language for your keyboard, the TextBox automatically gets set to RTL direction.

Here is the code I'm using so far:

$('input').keyup(function() {
    $this = $(this);
    if ($this.val().length == 1) {
        var x = new RegExp("[\x00-\x80]+"); // ASCII
        //alert(x.test($this.val()));

        var isAscii = x.test($this.val());
        if(isAscii) {
            $this.css("direction", "ltr");
        } else {
            $this.css("direction", "rtl");
        }
    }
});

Everything works fine for input. However, look what happens when I input a mixed LTR and RTL sentence in my site, then post it to Facebook:

Here is what I enter:

Here is what appears on Facebook:

See the difference? How do I solve this?

Answer 1

First off - the approach you're taking is brilliant, and I applaud you for it. Switching the direction of <input> via CSS to allow natural typing makes a huge amount of sense.

The reason your OUTPUT is coming out strangely, though, is due to the generated content which you are sending to Facebook. My guess is that since the last few characters of your text are in RTL, your input's CSS is still set to RTL.

Consider this example (result can bee seen here):

<div>
 <b>LTR:</b> <span dir="ltr">This is some الفبای فارسی text</span>
 <br /><br />
 <b>RTL:</b> <span dir="rtl">This is some الفبای فارسی text</span>
</div>

Because the second <span> is displayed with dir="rtl", the text winds up getting re-ordered, with each LTR phrase treated as a single RTL "word".

What you might consider trying, in your example, is simply making sure that prior to submitting the post, you set your CSS direction back to LTR, which will produce the result I think you're looking for.

If you are interested, here is a blog post discussing the difference between HTML and Plain-Text style rendering of LTR and RTL text. It doesn't provide you any answers, but will point out more details about the problem itself.