The direction of embedded text and how to verify what’s contains string

When you are working on internationalization of HTML inline element then you can use dir attribute or you may use special Unicode characters to achieve multiple embedded direction changes. However, sometimes there could be a bugs in your translated strings and when you use Unicode characters then debugging is little bit tricky. You may think that maybe your code is somewhere broken.

To illustrate the problem let’s say you have a string that is encoded in ar-SA (Arabic (Saudi Arabia)) language, but for some unknown reason one of character (parenthesis) is not in a right place while in other string they were in the right place. See example wrong string which I had:

So, what I did?

What I did in this case was to check what’s really string contains. Strictly thinking we need to split the string char by char and get the numeric Unicode value of every character in the string. Method charCodeAt can help us. Example:

var elm = document.getElementById('example'),
    str = '';
if (elm) {
    str = elm.innerText || elm.textContent;
    str = str.split('').map(function(t) {
        return t.charCodeAt(0) < 128 ? t : ('\\x' + t.charCodeAt(0).toString(16)) }).join('');
}

About above code: any character with a character code equal or higher than 128 will be escaped using its hex-encoded character code, prefixed with \x. Let's see how it works using string "test 這是一個考驗。". The result will be: "test \x9019\x662f\x4e00\x500b\x8003\x9a57\x3002".

So, using above trick I've got the conclusion that string doesn't contains Unicode character U+202C before parenthesis which restores the bidirectional state to what it was before the last LRE, RLE, RLO, or LRO (see more details about codes: Controlling the Text Direction Using the Unicode Direction Formatting Codes) like other properly encoded strings.

Now, having this small solution you can find out which string what's contains, compare good with bad string and catch the error.