Abdulrahman

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

2026-05-27T00:00:00Z

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

لماذا نحتاج إلى `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 إلى القالب العام بنجاح.

This is my fourth post

2018-09-30T00:00:00Z

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

Section Header

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

This is my first post.

2018-05-01T00:00:00Z

Section Header

 // this is a command
 function myCommand() {
+  let counter = 0;
-  let counter = 1;
   counter++;
 }

 // Test with a line break above this line.
 console.log('Test');

Abdulrahman

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

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

مثال JavaScript

مثال HTML

This is my fourth post

Section Header

This is my first post.

Section Header

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