Search code examples
htmlcssright-to-leftbidi

Number and punctuation rendering in bidirectional text

I am working on web application which deals with multi lingual text. It can have a mix of LTR languages like English and RTL languages like Arabic.

Below is my code

Case 1

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span>1234  5678</span>
</span></div></div>

Expected output

                                             1234 5678 تتتتتتتتت   يصيصيصيي

Actual output

                                               تتتتتتتتت يصيصيصيي 1234 5678

case 2

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span>abc</span>
    <span>1234  5678</span>
</span></div></div>

Expected output

                                           1234 5678 abc تتتتتتتتت   يصيصيصيي

Actual output

                                            abc 1234 5678 تتتتتتتتت يصيصيصيي

To fix the issue, I added dir="auto" tag to span with number".It gets correctly rendered. I do not understand why is this working and will it work in all the cases.

case 1

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span dir="auto">1234  5678</span>
</span></div></div>

Case 2

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span>abc</span>
    <span dir="auto">1234  5678</span>
</span></div></div>

Now my question is , Since number has weak directionality ,how does adding auto tag solves this problem ? I will not know the span corresponding to number at run time. Can I add dir="auto" to all the spans ?

What is the correct solution to this problem. Inner text of span can be in any language (not necessarily english numbers ).

Solution

  • By default, <span> and <div> inherit their dir attribute from the parent. This means that dir="auto" will change the behavior of these spans. As for numbers-only, the separate span with dir="auto" in Chrome resets the layout direction, and the (weak) LTR is used. Note that on Edge, the this weakness is accounted for, and the numbers-only span is layed out RTL even with dir="auto".

    I could not find an ultimate source that could say which implementation is correct. Possibly, this niche case is not defined officially, and the two implementations chose legitimate but different ways to handle the ambiguity.