Description
Here I will talk about some problems with RTL Languages and their solutions.
I will explain all the points here, and we can have a discussion about it.
And maybe add a section that talking about these problems & solution in Guidelines in CONTRIBUTING
The base discussion on this issue starts on this PR #6706 and #6715
What is the issue ?
If we have an RTL text here
* [تعلم البرمجة](URL) - Author Name
Note : تعلم البرمجة means that Learn Programming
It will appear on the website like this:
In this case, we can just dir="rtl"
<div dir="rtl">
* [تعلم البرمجة](URL) - Author Name
</div>
Result:
Is that it ?, No! The monster will show up below 😢
Mixing RTL with LRT languages issue !
The real problem is that when mixing RTL with LRT languages
Case 1
<div dir="rtl">
* [تعلم HTML](URL) - Author Name
</div>
Note : تعلم means that Learn.
Result:
Look, he put words in the mixer!
Case 2
If we need to make LTR to go right (both author name and title are LTR)
<div dir="rtl">
* [Learn HTML](URL) - Author Name
</div>
Result:
Both words have been swapped!!
Solution ?
We can solve these two problems with Unicode mark called RLM:
https://en.wikipedia.org/wiki/Right-to-left_mark
By adding ‏ after the LRT word that we need to mark it as RTL (it will pretend as RTL word)
Solve case 1
<div dir="rtl">
* [تعلم HTML‏](URL) - Author Name
</div>
Result:
We added ‏ after HTML
Solve case 2
<div dir="rtl">
* [Learn HTML‏](URL) - Author Name
</div>
Result:
You get the point!
Extra Cases!
Case 1
Try to make C# go to right!
<div dir="rtl">
* C#
* [تعلم لغة C# الرائعة](URL) - إسم المؤلف
</div>
Note: * [تعلم لغة C# الرائعة](URL) - إسم المؤلف means * [Learn the Cool C# Language] (URL) - Author Name
Result:
The Symbols have the same problem when we try to RTL it
And it has the same solution 😉, by LRM Unicode mark:
https://en.wikipedia.org/wiki/Left-to-right_mark
<div dir="rtl">
* C#‎
* [تعلم لغة C#‎ الرائعة](URL) - إسم المؤلف
</div>
We use &lrm not &rlm, why?
The issue with the symbol is that when we try to add a RTL attribute to C# to make it get to right
It will render as a RTL word, so the symbol will reorder to the other side.
By adding ‎ after the C# we mark it as LTR word, so it will render as LTR word
Case 1.1
Both Author Name and Title are LTR and end with a symbol as C#
<div dir="rtl">
* [Learn C#](URL) - Author Name
</div>
Result:
The first here will be simple, just put ‏ at the end of the title
<div dir="rtl">
* [Learn C#‏](URL) - Author Name
</div>
Result:
But note that the symbol # renders as a RTL word, so it will reorder to the other side.
so we must use ‎ after this symbol.
<div dir="rtl">
* [Learn C#‎‏](URL) - Author Name
</div>
Result:
Case 2
If the Title in English and the Author Name in Arabic
* [Learn HTML](URL) - إسم المؤلف
Result:
It is enough to make the direction be RTL only without putting any Unicode mark
<div dir="rtl">
* [Learn HTML](URL) - إسم المؤلف
</div>
Result:
Case 3
Sometimes we add some information like (:construction: *in process*) after the author name
<div dir="rtl">
* [عنوان بالعربي](URL) - Author Name (meta data)
* [Title In LTR‏](URL) - Author Name (meta data)
</div>
Result:
It seems like it is correct, but we read from right to left, so it would be nice if this information was in left to read the author name first then the information
So to solve this, we just put ‏ after the name
<div dir="rtl">
* [عنوان بالعربي](URL) - Author Name‏ (meta data)
* [Title In LTR‏](URL) - Author Name‏ (meta data)
</div>
Result:
