In this post, I show how to render Arabic text correctly, from a text editor to the web.

Arabic in HTML

Template for Arabic documents.

ديباجة الـ HTML العربية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
        <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width" />
                <title>:</title>
        </head>
        <body>
	write your html here  
        </body>
</html>

For parts of documents, such as this HTML page, you can use this on <div> elements.

<div lang="ar" dir="rtl"></div>

Arabic in Unicode

This is better explained with an Arabic text.

دعم اللغة العربية في اليونيكود

لنأخذ برنامج محرر النصوص الايماكس على سبيل المثال، و الذي يتبع معايير اليونيكود (مثل معظم البرامج) بالنسبة للغة العربية. في هذا المثال، لغة النظام انجليزية و لغة الايماكس عربية، حتى نتمكن من استخدام اختصارات الايماكس.

لو أردنا كتابة مفردة انجليزية بجوار النص العربي، مثل heart، ببساطة نغير اللغة داخل الايماكس الى الانجليزية بواسطة الضغط على C-\. هل ترى؟ لم يتم عرض ربط المفتاح بشكل صحيح. هي أشياء لا ترى! تابع القراءة.

لو أخذنا معادلة رياضية مثلًا: 1 + 2 + 3 = 6 (بدون تغيير المفتاح، لا مشاكل). نأخذ نفس المعادلة مرة أخرى لكن دون مسافات 1+2+3=6 (لا توجد مشاكل مرة أخرى).

بدأت أفهم المشكلة. حين كتابة الأقواس أحتاج إلى تغيير لغة النظام إلى العربية، لأن تغيير اللغة داخل البرنامج لا ينطبق على الأقواس!

لنجرب ذلك مع C-\.. لم يتغير شي!!!

طيب ماذا لو قلنا 555555555 966+. جميل، لاحظ أن وضع علامة + جاء بعد كتابة الأرقام، كأنه عملية رياضية كما سبق.

نكتب رقم جوال داخل نص بنفس هذا المنطق، مثل 0555555555 أو 5555-55-0555 أو 5555-55-555 966+. لإضافة أقواس، نتأكذ أن لغة النظام عربية أولًا، 5555-55-55(05) (966+).

بقي أن نكتب \-C داخل نص عربي. كيف كتبت ذلك؟ نعامل علامة - كأنها علامة ناقص، فنكتب \ أولًا.

الخلاصة:

  • التعامل مع علامات + - الخ بنفس الترتيب المتبع مع العمليات الرياضية.
  • تغيير لغة النظام إلى العربية، حتى يتمكن من عرض الأقواس بشكل صحيح.

Arabic in ُemacs

Right to left text

You can set variables in emacs using

M-x set-variable RET var RET value RET

Arabic language is bidirectional. To set the text direction that arabic uses, change the value of the variable bidi-paragraph-direction to the value right-to-left in accordance to the syntax above.

Arabic in Markdown

Use Write Markdown in Arabic to write in markdown and convert the output to html.