How do I insert <br> tag in Arabic Left to Right (LTR) text

user_1279151 0
Viewed 488

I have this Arabic sample text:

<span class="message4" id="message4" data-gwd-tl-locked="" data-gwd-tl-hidden="">نص العنوان الرئيسي هنا <br> على سطرين</span>

I managed to copy paste a line break in there. Actually I pasted it in between two other words but it moved towards the right.

I got no clue what is going on, sorry. Is it even possible to get a line break into ARABIC text? And why does it, like a wild chicken, move position when I paste it into a location.

Should I just make my containers reflow text and skip line break for ARABIC?

Thanks in Advance

Thomas

right-to-left arabic line-breaks
2 Answers

Your code is behaving as expected in bidirectional texts. You just need to acclimate your own reading habits to how Arabic is read: whether you create the Arabic string by typing or insertion, the start of the Arabic string lies at its "other end" compared to English. To see how this flows just use the right arrow to skip over the characters from the beginning of your mixed text. In a mono-directional Right-to-Left English (En) text of strings separated by spaces you will have:

Start(En)End Start(En)End Start(En)End Start(En)End...

Whereas in a bi-directional LTR/RTL text of English and Arabic (Ar) strings you will have:

Start(En)End End(Ar)Start Start(En)End End(Ar)Start...

That said, typing the whole multi-lingual string is easier than inserting chunks of them here and there. As you type, you are synchronously aware of the language/display flow and thus less surprised at the "chicken jumps!"

Furthermore, VSCode and most such editors are not designed with RTL languages in mind. To best handle Arabic in bi-directional coding use a Jupyter notebook.

user_51330740

I tried this out in VSCode, and I see what you're seeing, but it seems to mostly be bugs in VSCode. For example, VSCode can get very confused when you select sections of Arabic text and reformat the text as you select. (I can almost picture the mistakes in the code that probably lead to this, I assume by laying out the highlighted text separately from the non-highlighted text rather than laying it all out and then highlighting part of it.)

What I recommend, if you can get away with it, is to put LTR and RTL text on separate lines:

<span class="message4" id="message4" data-gwd-tl-locked="" data-gwd-tl-hidden="">
نص العنوان الرئيسي هنا 
<br/>
على سطرين
</span>

This formatting tends to be easier for bidi (bidirectional text) algorithms to deal with, and makes it more clear that this is "نص العنوان الرئيسي هنا" and then a break, and then "على سطرين". When you put these on a single line, it is very non-obvious, at least to me, what order the phrases are supposed to be. Is this Latin text with Arabic in the middle, or Arabic text with Latin in the middle? Adding newlines makes it much clearer IMO.

user_973370
Related