2020-10-19: No bidirectional (BIDI) text support

[zkamvar]

As @BatoolMM brought up in #136:

I noticed that adding eng words within any Arabic sentence changes the order of the words when it appears on the site. The order of the words changes in comparison to the one in the glossary.yml. I tried to inspect the site (HTML), found it the same as glossary.yml. So, I tried removing the eng words from the translation. Personally, I think it's better to add some eng terms when explaining or defining the term. For example, when I mention python, I'd write the Arabic translation and between round bracket in English
بايثون (python)

The issue is well described in the w3 page on i18n.

There are resources for HTML and CSS solutions in https://w3c.github.io/typography/#bidi_text and https://drafts.csswg.org/css-writing-modes-3/#text-direction

From a little digging, we might be able to modify the template to use a yaml flag in the language pages to specify which direction the text should go using the <bdo> element.

From the first test, which works in all browsers, using the above text, we can see the difference:

This HTML code:

<blockquote>
<p dir="rtl">
  <bdo dir="ltr">
        التعبير المنطقي عبارة عن تعبير يُستخدم لإنشاء جمل إما
        <b>(true or false)</b> تحمل القيمة صح أو القية خطأ
        تُتستخدم التعبيرات المنطقية مع العبارات الشرطية في محركات البحث والخوارزميات
        وتُسمى التعبيرات المنطقية أيضا تعبيرات المقارنة والتعبيرات الشرطية والتعبيرات العلائقية
  </bdo>
</p>
<p dir="ltr">
  <bdo dir="rtl">
        التعبير المنطقي عبارة عن تعبير يُستخدم لإنشاء جمل إما
        <b>(true or false)</b> تحمل القيمة صح أو القية خطأ
        تُتستخدم التعبيرات المنطقية مع العبارات الشرطية في محركات البحث والخوارزميات
        وتُسمى التعبيرات المنطقية أيضا تعبيرات المقارنة والتعبيرات الشرطية والتعبيرات العلائقية
  </bdo>
</p>
</blockquote>

produces this text:

التعبير المنطقي عبارة عن تعبير يُستخدم لإنشاء جمل إما (true or false) تحمل القيمة صح أو القية خطأ تُتستخدم التعبيرات المنطقية مع العبارات الشرطية في محركات البحث والخوارزميات وتُسمى التعبيرات المنطقية أيضا تعبيرات المقارنة والتعبيرات الشرطية والتعبيرات العلائقية

التعبير المنطقي عبارة عن تعبير يُستخدم لإنشاء جمل إما (true or false) تحمل القيمة صح أو القية خطأ تُتستخدم التعبيرات المنطقية مع العبارات الشرطية في محركات البحث والخوارزميات وتُسمى التعبيرات المنطقية أيضا تعبيرات المقارنة والتعبيرات الشرطية والتعبيرات العلائقية

[BatoolMM]

Brilliant! Thank you so much @zkamvar for doing all this research.
When I tried to inspect few Arabic websites, they seem to use <bdo> and <bdi> elements to fix the direction of the text.
However, in the image you provided, the text is not completely fixed. I used colored boxes and numbers to indicate the order of each part of the text. As you can see, part 2 and part 3 are swapped around.

I’ll make further comments on PR.

[zkamvar]

Oh! Thank you for pointing this out with a clear explanation! I admit that I don't read Arabic, and was just cobbling together the text 😅