| الخاصية أو المفهوم | طريقة العمل والتأثير البرمجي | الاستخدام الشائع وملاحظة الأداء والنظام |
|---|---|---|
| direction | يحدد اتجاه قراءة وتدفق الكلمات وعلامات الترقيم أفقياً داخل الموقع | يقبل القيمة ltr للغات الأجنبية والقيمة rtl لضمان ظهور النصوص العربية والقوائم في أماكنها الصحيحة تماماً ونوفيل |
| الضبط القياسي لـ RTL | يتم من خلال إضافة سمة dir داخل وسم html أو body مباشرة في ملف الـ HTML | الأسلوب الاحترافي والصحيح لتوريث الاتجاه لكل عناصر الصفحة تلقائياً دون الحاجة لتكرار كود الـ CSS |
| writing-mode | يتحكم في اتجاه تدفق خطوط وأسطر النص بالكامل سواء أفقياً أو عمودياً | يقبل horizontal-tb للوضع الأفقي الطبيعي أو الأوضاع العمودية vertical لصنع لمسات إبداعية وتصاميم مميزة |
| mixed | القيمة الافتراضية مع الوضع العمودي حيث تدار الحروف اللاتينية بمقدار 90 درجة | تُستخدم لتنسيق النصوص العمودية التي تحتوي على كلمات أجنبية مدمجة لتسهيل قراءتها عند إمالة الرأس |
| upright | يجبر جميع الحروف اللاتينية والأرقام على البقاء مستقيمة تماماً داخل السطر العمودي | ممتازة لصنع عناوين جانبية عمودية باللغة الإنجليزية تبدو منسقة ومنظمة من الأعلى للأسفل كأعمدة الفنادق |
| sideways | يقوم بإمالة وتدوير كافة الحروف والكلمات بالكامل داخل السطر العمودي | يفيد في محاكاة شكل العناوين المطبوعة على أغلفة الكتب الجانبية أو التبويبات الرأسية المتقدمة |
| unicode-bidi | خاصية متقدمة تُستخدم للتحكم في كيفية دمج وعرض الكلمات عند وجود لغتين مختلفتين في سطر واحد | تحل مشاكل تداخل الكلمات العربية والإنجليزية وعلامات الترقيم في الجمل المشتركة لمنع تشوه النص وفهمه غلط |
**direction:** يحدد اتجاه تدفق النص. - `ltr` — من اليسار لليمين (الافتراضي) - `rtl` — من اليمين لليسار (للعربية والعبرية وغيرها)
**كيفية ضبط RTL:** الطريقة الصحيحة هي إضافة `dir="rtl"` في وسم `<html>` أو `<body>`، ثم يرث كل شيء هذا الاتجاه.
**writing-mode:** يتحكم في اتجاه تدفق الأسطر. - `horizontal-tb` — الافتراضي (أسطر أفقية من الأعلى) - `vertical-rl` — أسطر عمودية من اليمين لليسار (مناسب للياباني/الصيني) - `vertical-lr` — أسطر عمودية من اليسار لليمين
**text-orientation** (مع writing-mode عمودي): - `mixed` — الحروف اللاتينية تُدار 90 درجة - `upright` — الحروف اللاتينية تبقى مستقيمة - `sideways` — كل الحروف تُدار
**unicode-bidi:** للتحكم في النصوص المختلطة (عربي وإنجليزي في نفس السطر).
| 1 | html[lang="ar"] { |
| 2 | direction: rtl; |
| 3 | } |
| 4 | |
| 5 | /* عنوان عمودي للتصميم الإبداعي */ |
| 6 | .vertical-title { |
| 7 | writing-mode: vertical-rl; |
| 8 | text-orientation: mixed; |
| 9 | } |
مثال 1: موقع كامل بدعم RTL
| 1 | /* إعداد RTL على المستوى الأعلى */ |
| 2 | html { |
| 3 | direction: rtl; |
| 4 | lang: ar; |
| 5 | } |
| 6 | |
| 7 | /* مكونات تتكيف تلقائياً مع RTL */ |
| 8 | .nav { display: flex; gap: 16px; } /* يُعكس تلقائياً */ |
| 9 | |
| 10 | /* استثناء لمحتوى LTR داخل RTL */ |
| 11 | .code-snippet { |
| 12 | direction: ltr; |
| 13 | unicode-bidi: embed; |
| 14 | font-family: monospace; |
| 15 | } |