Add dir attributes to HTML templates/frontmatter

[zkamvar]

This will allow the pages to be internationalized properly for languages that read right to left.

I've reverted some of #136 to show that the effect works. Here's a screenshot of the Arabic page:

I would be especially interested to hear from @BatoolMM if this solution works.

Once merged, this will fix #138

[BatoolMM]

I can’t thank you enough @zkamvar.
As I mentioned in issue #138, the text is partially fixed but as you see part 2 and part 3 are swapped around.

I tried to use the minimal example you used in issue #138 and see how it looks in my browser.

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

produced this text in my browser

I think the work you’ve done will fix the problem if we use a separate line for any English words in the .yml file as you can see in the second and third codes. If the same line contains both English and Arabic words, that line is read from left to right. Also, the English words are distorted in my browser if I don't use <bdi> to only isolate the English words.

Thank you again, I'm very happy with the changes you made 👍

[fmichonneau]

Thank you so much for figuring this out Zhian and for your review @BatoolMM!
I added the <bdi> tag for the English words here