Search code examples
internationalizationright-to-left

Right-to-left text seems to be displaying out of order

I have the following text:

$3.00 x 2 = $6.00

When I apply direction: rtl; to the body of the page, this text displays as

x 2 = $6.00 $3.00

Can anyone explain why it's displaying this way?

Solution

  • A full answer to your question would have to explain how the Unicode Bidirectional Algorithm works, and it's immensely complicated.

    From my limited understanding, the algorithm has detected that "x 2 = $6.00" and "$3.00" are two separate "runs" of text that should be displayed in left-to-right order. As the whole block is right-to-left, you see the two runs in RTL order.

    It's not clear if your question is trying to solve a problem, or if you're just curious. However, if you need to display your equation fully LTR, but in the middle of some other RTL text you can use Unicode control characters.

    e.g. The text in this RTL block will display the text between the two markers as a continuous run of LTR text. 

    <body dir="RTL">
    &#x202A;$3.00 x 2 = $6.00&#x202C;
</body>

    Simpler in most cases (if you can) is to isolate the LTR text with HTML elements, e.g:

    <body dir="RTL">
    <span dir="LTR">$3.00 x 2 = $6.00</span>
</body>

    As I can't read Arabic or Hebrew I can't tell you how your example text should appear when embedded into RTL script. However, you do have control over the rendering.