How to display user text automatically according to its natural direction - css

Question

I want to support the display of user inputted text in Unicode according to its general direction instead of the default left-to-right direction. For example, in the Arabic text below, the English word (4th) appears to be split apart:
اُردو کا بعض اوقات ہندی کے ساتھ موازنہ کیا جاتا ہے. اُردو اور ہندی میں بُنیادی فرق یہ ہے کہ اُردو نستعلیق رسم الخط میں لکھی جاتی ہے اور عربی و فارسی الفاظ استعمال کرتی ہے. جبکہ ہندی دیوناگری رسم الخط میں لکھی جاتی ہے اور سنسکرت الفاظ زیادہ استعمال کرتی ہے. کچھ ماہرینِ لسانیات اُردو اور ہندی کو ایک ہی زبان کی دو معیاری صورتیں گردانتے ہیں. تاہم، دوسرے اِن کو معاش اللسانی تفرّقات کی بنیاد پر الگ سمجھتے ہیں۔ بلکہ حقیقت یہ ہے کہ ہندی ، اُردو سے نکلی۔اسی طرح اگر اردو اور ھندی زبان کو ایک سمجھا جاۓ تو یہ دنیا کی چوتھی (4th) بڑی زبان ہے۔
Is there a CSS or HTML method that automatically considers the natural direction of the text flow? I read this article from W3C which discusses the way to set text direction, but did not find any solution that does so automatically.

Answer 1

The fact that there is a way to automatically detect the natural direction of text flow is what is causing you trouble: the bidirectional algorithm is not perfect. Sometimes you need to give it some extra hints, as explained in Unicode controls vs. markup for bidi support.
The Unicode bidirectional algorithm determines the directionality of text on the basis of the directional properties of each character. Occasionally the algorithm needs a little help to determine the flow of objects in the text that mixes Arabic or Hebrew characters with those of other scripts. In other cases you might want to override the effect of the bidirectional algorithm altogether.
You can fix this manually by adding U+202A ʟᴇғᴛ-ᴛᴏ-ʀɪɢʜᴛ ᴇᴍʙᴇᴅᴅɪɴɢ and U+202C ᴘᴏᴘ ᴅɪʀᴇᴄᴛɪᴏɴᴀʟ ғᴏʀᴍᴀᴛᴛɪɴɢ characters to the text, as I did below:
اُردو کا بعض اوقات ہندی کے ساتھ موازنہ کیا جاتا ہے. اُردو اور ہندی میں بُنیادی فرق یہ ہے کہ اُردو نستعلیق رسم الخط میں لکھی جاتی ہے اور عربی و فارسی الفاظ استعمال کرتی ہے. جبکہ ہندی دیوناگری رسم الخط میں لکھی جاتی ہے اور سنسکرت الفاظ زیادہ استعمال کرتی ہے. کچھ ماہرینِ لسانیات اُردو اور ہندی کو ایک ہی زبان کی دو معیاری صورتیں گردانتے ہیں. تاہم، دوسرے اِن کو معاش اللسانی تفرّقات کی بنیاد پر الگ سمجھتے ہیں۔ بلکہ حقیقت یہ ہے کہ ہندی ، اُردو سے نکلی۔اسی طرح اگر اردو اور ھندی زبان کو ایک سمجھا جاۓ تو یہ دنیا کی چوتھی‪ (4th) ‬بڑی زبان ہے۔
...‪(4th)‬...
You can also use the <bdi> element in HTML5, or a <span> in HTML4.
...<bdi dir="ltr">(4th)</bdi>...
...<span dir="ltr">(4th)</span>...
For more info about the bidirectional algorithm see What you need to know about the bidi algorithm and inline markup.
If this text comes from the user, I guess there is nothing you can do about it. I would just treat it as any other kind of faulty user input; like a typo.

Answer 2

First of all tricky question, but very well documented and an upvote for that.
I tried the same and faced the same issue. I read in an article that you can do this using dojo. The link I am going to give you is mobile based I guess. Hope this will give a start up to you.
https://dojotoolkit.org/reference-guide/1.9/dojox/mobile/bidi.html

Answer 3

Doesn't the browser decide to use rtl of ltr automatically based on the visitors preference? I'm not quite sure of that, but I think it does.
Not really an answer but this might be interesting for you:
In CSS3 there is a new value for the text-align property, namely start. According to the W3C standards this will 'align to the start edge of the line box'. So if the visitors preference is rtl it will align right, and vica-versa.