الخصائص المنطقية والمواقع العربية — تصميم CSS

الخصائص المنطقية والمواقع العربية (RTL)

كتبت margin-left: 16px لأيقونة قبل النص، ثم صار الموقع عربياً فأصبحت الأيقونة بعد النص والمسافة في الجهة الخطأ. الخصائص الفيزيائية (left/right/top/bottom) ثابتة على الشاشة، أما المنطقية فتتبع اتجاه الكتابة.

المحوران المنطقيان

| المنطقي | المعنى | في العربية (rtl) | في الإنجليزية (ltr) |

|---|---|---|---|

| inline | اتجاه سير النص في السطر | أفقي | أفقي |

| inline-start | بداية السطر | يمين | يسار |

| inline-end | نهاية السطر | يسار | يمين |

| block | اتجاه تتابع الأسطر/الفقرات | رأسي | رأسي |

| block-start / end | الأعلى / الأسفل | أعلى / أسفل | أعلى / أسفل |

جدول التحويل

| فيزيائي | منطقي |

|---|---|

| margin-left / margin-right | margin-inline-start / margin-inline-end (حسب المعنى) |

| margin-left + margin-right | margin-inline |

| margin-top + margin-bottom | margin-block |

| padding-left | padding-inline-start |

| border-left | border-inline-start |

| left / right (مع position) | inset-inline-start / inset-inline-end |

| text-align: left | text-align: start |

| width / height | inline-size / block-size |

| border-top-left-radius | border-start-start-radius |

.quote {
    border-inline-start: 4px solid var(--color-primary);   /* خط على اليمين في العربية */
    padding-inline-start: 16px;
}
.icon {
    margin-inline-end: 8px;     /* مسافة بين الأيقونة والنص الذي بعدها */
}
.badge {
    position: absolute;
    inset-inline-end: 8px;      /* الزاوية في نهاية السطر */
    top: 8px;
}

نفس CSS يعمل صحيحاً في صفحة dir="rtl" وصفحة dir="ltr" دون أي تعديل.

ما ينعكس تلقائياً وما لا ينعكس

ينعكس تلقائياً مع dir="rtl": ترتيب Flexbox (row)، أعمدة Grid، محاذاة start و end، الخصائص المنطقية، مواقع نقاط القوائم.

لا ينعكس (ويجب معالجته):

- left و right وكل الخصائص الفيزيائية.

- transform: translateX(...) — الإشارة لا تنقلب.

- background-position: left.

- الأيقونات الاتجاهية: سهم "التالي" يشير يميناً في الإنجليزية ويساراً في العربية.

[dir="rtl"] .icon-arrow {
    transform: scaleX(-1);      /* اعكس الأسهم فقط — لا تعكس الشعارات أو أيقونات مثل ✓ */
}
.slide-in {
    translate: calc(var(--dir, 1) * 20px) 0;
}
[dir="rtl"] { --dir: -1; }

أو استخدم :dir(rtl) في المتصفحات الحديثة: .icon-arrow:dir(rtl) { transform: scaleX(-1); }

أشياء لا تنعكس في الواقع

- الأرقام: تُكتب من اليسار لليمين حتى داخل النص العربي (2026).

- الشيفرة البرمجية والروابط والبريد: اجعلها dir="ltr":

code, pre, kbd, input[type="email"], input[type="url"] {
    direction: ltr;
    text-align: start;     /* تأخذ بداية سطرها الخاص (يسار) */
    unicode-bidi: isolate;
}

- أزرار التشغيل في الفيديو: ▶ يبقى يشير يميناً عالمياً.

- الرسوم البيانية الزمنية: غالباً تبقى من اليسار لليمين.

النص ثنائي الاتجاه (Bidi)

جملة عربية فيها كلمة إنجليزية في آخرها مع علامة ترقيم قد تظهر بترتيب غريب. الحل في HTML: لفّ الجزء الأجنبي بـ <span dir="ltr"> أو <bdi> للمحتوى غير المعروف (أسماء المستخدمين).

موقع ثنائي اللغة

<html lang="ar" dir="rtl">   <!-- أو lang="en" dir="ltr" للنسخة الإنجليزية -->

إذا كتبت CSS كله بخصائص منطقية، تتبدل النسختان بتغيير هذين الحرفين فقط. هذه أكبر فائدة عملية تحصل عليها.

تمرين

ابحث في ملف CSS الخاص بك عن كل left و right و margin-left و padding-right و text-align: right وحوّلها لمنطقية. ثم غيّر dir في صفحتك إلى ltr وتأكد أن كل شيء انعكس صحيحاً.

/* مكوّن بطاقة يعمل في rtl و ltr دون تعديل */

.card {
    position: relative;
    padding-block: 20px;
    padding-inline: 24px;
    border-inline-start: 4px solid var(--color-primary, #4f46e5);
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    text-align: start;
}

.card .badge {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
}

.card .icon {
    margin-inline-end: 8px;
}

/* الأسهم الاتجاهية فقط تُعكس */
.icon-arrow:dir(rtl) {
    transform: scaleX(-1);
}

/* الشيفرة والبريد والروابط تبقى من اليسار */
code,
pre,
input[type="email"],
input[type="url"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* حاوية متوسطة بهوامش منطقية */
.container {
    max-inline-size: 1100px;
    margin-inline: auto;
    padding-inline: 16px;
}

/* شريط تنقل: Flexbox ينعكس تلقائياً، والهامش التلقائي منطقي */
.navbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar .login {
    margin-inline-start: auto;
}