direction

خاصية اتجاه الكتابة direction

خاصية direction تقلب اتجاه النص والتخطيط rtl/ltr — لكن الصواب المعماري وضع dir على HTML واستعمال الخصائص المنطقية.

rtl تجعل الكتابة والتخطيط من اليمين (العربية) وltr العكس. لكن أفضل الممارسات تقول: الاتجاه **دلالة مستند لا تنسيق** — يُعلن مرة واحدة عبر خاصية dir="rtl" على وسم html نفسه (كما بهذا الموقع)، وتُترك direction في CSS للاستثناءات الموضعية: كتل الكود والمدخلات اللاتينية داخل الصفحة العربية (dir ltr عليها حصرًا — لاحظها بكل كود بهذه الصفحة!).

ومفتاح الصيانة الحقيقي: الخصائص المنطقية — margin-inline-start وtext-align: start وinset-inline-end — تتبع الاتجاه تلقائيًا فيصير دعم اللغتين مجانيًا.

الصياغة

<html dir="rtl" lang="ar">  <!-- الإعلان الصحيح -->

/* الاستثناءات الموضعية فقط: */
pre, code { direction: ltr; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .ltr-box { direction: ltr; text-align: start; background: #12101a; color: #5ED49A; padding: 10px; border-radius: 8px; font-family: monospace; }
</style>
<p>فقرة عربية ترث rtl الصفحة بشكل طبيعي تمامًا.</p>
<div class="ltr-box">const greeting = "code stays LTR";</div>
<p>جزيرة الكود LTR داخل بحر RTL — النمط الصحيح.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
rtl / ltr	يمين-يسار / يسار-يمين
dir على HTML	المكان الصحيح للإعلان العام — دلالة لا تنسيق
unicode-bidi	الرفيقة الدقيقة لعزل النصوص المختلطة (isolate)

💡 نصائح عملية

قاعدة الموقع العربي الذهبية: dir=rtl على الجذر + منطقيات inline-start/end بكل مكان
أرقام هواتف وأكواد داخل نص عربي تتشوه؟ لفها بعنصر dir=ltr

⚠️ أخطاء شائعة

قلب الموقع بـ CSS فقط دون dir — النسخ واللصق وسلوك المتصفح يتصرفان بغرابة
left/right المطلقة بكل الموقع ثم معاناة دعم لغة ثانية لاحقًا

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs