HTML / تحديد اتجاه المحتوى
مشاكل عرض محتوى باللغة العربية
عند العمل مع المحتوى المكتوب باللغة العربية، قد تواجه بعض التحديات المرتبطة بعرض هذا المحتوى بشكل صحيح. بشكل افتراضي، يتوقع المتصفح عرض النصوص من الجهة اليسرى إلى الجهة اليمنى، كما هو الحال في النصوص المكتوبة باللغة الإنجليزية أو الفرنسية.
لذا، يجب علينا استخدام خاصية dir لتحديد اتجاه الكتابة في الصفحة. هذه الخاصية يمكن أن تأخذ القيم التالية:
ltr: تعني "من اليسار إلى اليمين".rtl: تعني "من اليمين إلى اليسار"، وهي المناسبة للنصوص العربية.auto: تسمح للمتصفح بتحديد الاتجاه المناسب تلقائياً.
أمثلة على تحديد اتجاه المحتوى
المثال الأول: فقرة نص باللغة العربية
في هذا المثال، سنعرض فقرة نصية باللغة العربية مع تحديد الاتجاه إلى rtl لضمان عرضها بشكل صحيح:
<!DOCTYPE html> <html> <body> <!-- الفقرة التالية لن يتم عرضها بشكل جيد لأننا لم نحدد إتجاه الكتابة في الصفحة هو من اليمين إلى اليسار --> <p>مرحباً بك في موقع هرمش.</p> </body> </html>
المثال الثاني: قائمة نصوص باللغة العربية
في المثال التالي، سنعرض قائمة نصوص باللغة العربية. سنحدد الاتجاه إلى rtl لضمان عرض القائمة بشكل صحيح:
<!DOCTYPE html>
<html>
<body>
<!-- القائمة التالية لن يتم عرضها بشكل جيد لأننا لم نحدد
إتجاه الكتابة في الصفحة هو من اليمين إلى اليسار -->
<ul>
<li>احمد مجدى</li>
<li>انس عبده</li>
<li>محمد ايمن</li>
</ul>
</body>
</html>
تحديد إتجاه محتوى الصفحة
إفتراضياً، إتجاهالكتابة في الصفحة هو من اليسار إلى اليمين كما هو الحال حين نكتب باللغة الإنجليزية أو الفرنسية.
لتحديد جهة الكتابة في كامل الصفحة يجب إضافة الخاصية dir لوسم الصفحة الأساسي <html> مع تمرير إحدى القيمة التالية لها:
- ltr :لإظهار محتوى الصفحة من اليسار إلى اليمين و هذه هي القيمة الإفتراضية.
- rtl :لإظهار محتوى الصفحة من اليمين إلى اليسار و هذا الأمر تحتاجه في حال كان محتوى الصفحة بالعربية.
- auto :لإظهار محتوى الصفحة بشكل تلقائي من الجهة المناسبة للمحتوى الصفحة مع الإشارة إلى أنه يفضل عدم اعتماد هذا الخيار.
<!DOCTYPE html>
<!-- هنا قمنا بتحديد أن إتجاه الصفحة الأساسي هو من اليمين إلى اليسار -->
<html dir="rtl">
<body>
<h2>تسجل الدخول</h2>
<form action="/tryit/submitted" method="post">
<label for="username">إسم المستخدم</label>
<input type="text" id="username" name="username">
<br><br>
<label for="password">كلمة المرور</label>
<input type="password" id="password" name="password">
<br><br>
<input type="submit" value="دخول">
</form>
</body>
</html>
في المثال التالي قمنا بعرض صفحة أغلب محتواها عربي و تتضمن أيضاً محتوى إنجليزي.
<!DOCTYPE html> <!-- هنا قمنا بتحديد أن إتجاه الصفحة الأساسي هو من اليمين إلى اليسار --> <html dir="rtl"> <body> <h2>دورة تعلم الإنجليزية للمبتدئين</h2> <p>فيما يلي قمنا بذكر بعض الجمل التي نستخدمها في الحياة اليومية:</p> <br> <!-- هنا قمنا بتحديد أن إتجاه الفقرة هو من اليسار إلى اليمين --> <p dir="ltr">Good morning, how are you today?</p> <p>صباح الخير، كيف حالك اليوم؟</p> <br> <!-- هنا قمنا بتحديد أن إتجاه الفقرة هو من اليسار إلى اليمين --> <p dir="ltr">I am sorry for late.</p> <p>أعتذر على التأخير.</p> </body> </html>