تجربة الكتابة العربية في 11ty

• 27 May 2026
• arabic

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

لماذا نحتاج إلى dir="rtl"؟

المتصفح يستطيع أحياناً استنتاج اتجاه النص، لكن تحديد الاتجاه في عنصر الصفحة يجعل النتيجة أوضح وأكثر ثباتاً، خصوصاً عندما تحتوي الصفحة على نص عربي وإنجليزي معاً.

مثال على قائمة قصيرة:

• العنوان يجب أن يبدأ من اليمين.
• الفقرات العربية يجب أن تكون مصطفة لليمين.
• مقاطع الكود يجب أن تبقى من اليسار إلى اليمين.

مثال JavaScript

حتى داخل صفحة عربية، يجب أن يبقى الكود باتجاه ltr حتى تكون القراءة والنسخ أسهل:

const greeting = "السلام عليكم";

function sayHello(name) {
	return `${greeting} يا ${name}`;
}

console.log(sayHello("عبدالرحمن"));

مثال HTML

يمكن أيضاً كتابة عناصر HTML داخل التدوينة:

<article lang="ar" dir="rtl">
	<h1>عنوان عربي</h1>
	<p>هذه فقرة عربية داخل عنصر HTML.</p>
</article>

إذا كانت هذه الصفحة تبدو صحيحة، فهذا يعني أن 11ty يمرر بيانات lang و dir من الـ front matter إلى القالب العام بنجاح.