How to fix bi-directional RTL brackets/parenthesis problem?

What is the problem?

So this is the markup:

<div dir="rtl">
    <a href="#">mp4 (21.9 ميغابايت)</a>
</div>

And this is what I see in the browser:

bidi1

As you can see, there are problems with the text ordering and the direction* of the parenthesis.

The browser is detecting what is LTR script and RTL script and displaying the text in the correct direction accordingly.

So therefore, this is actually correct. “mp4 (21.9″ is being detected as LTR, and “ميغابايت)” is being detected as RTL.

* According to the unicode standard, parenthesis are actually neutral, but I’m using “direction” here as the best way to explain open and close parenthesis.

How to fix it?

If I add the HTML character entity &rlm; either before or after the first bracket, this will force the latin script to display RTL.

The markup now looks like this:

<div dir="rtl">
    <a href="#">mp4 &rlm;(21.9 ميغابايت)</a>
</div>

And the browser now displays the whole string correctly flipped:

bidi2

Posted Friday, April 19th, 2013 under BBC.

One comment so far

  1. Great trick, thanks for sharing. I did not know it existed!

Leave a Reply

*