قلب الواجهة: الخصائص المنطقية في CSS
لماذا لا يكفي dir=”rtl” وحده؟ دليل مبتدئ لفهم الفرق بين الخصائص الفيزيائية والمنطقية في CSS، مع مثال عملي لبطاقة مستخدم تنقلب بشكل صحيح، وجدول الدعم الكامل للمتصفحات.
عدد الكلمات: ~٢١٠٠ · مدة القراءة: ١١ دقيقة
خصائص CSS المنطقية لبناء واجهات RTL
الجذر الأول في سلسلة هندسة واجهات اليمين — لماذا يفشل dir=”rtl” وحده، وكيف تحل الخصائص المنطقية المشكلة من أساسها
ملاحظةٌ للقارئ: هذه السلسلة تبدأ حيث انتهى مقالنا الخصائص المنطقية في CSS: هندسة الواجهات ثنائية الاتجاه دون انحياز من سلسلة معالجة النصوص الهجينة. ذاك المقال ركّز على حماية النص داخل العنصر. هذه السلسلة الجديدة تتناول طبقةً أعمق: هندسة الواجهة الكاملة، كمواضع الأزرار، واتجاهات الظلال، وأنماط القراءة البصرية، وما لا يكفي فيه كودٌ واحد.
في هذا المقال من منصة ذي يزن، نبدأ رحلتنا مع سلسلة “دليل هندسة واجهات اليمين” بسؤالٍ يبدو بسيطاً ثم يكشف عن نفسه كمشكلةٍ هندسيةٍ حقيقية: لماذا تبدو مواقعٌ كثيرةٌ “مقلوبة” بعد إضافة dir="rtl" عليها؟ ولماذا تظهر الأيقونة في المكان الخطأ، والهامش في الجهة الخاطئة، والحد على الحافة الخاطئة؟
الجواب في جملةٍ واحدة: لأن الكود وُلد وهو يظن أن “اليسار” حقيقةٌ كونية، لا مجرد اتفاقٍ ثقافي. والخصائص المنطقية في CSS هي الأداة التي تكسر هذه الوهم.
لماذا لا يكفي dir=”rtl”
حين تضيف dir="rtl" على وسم <html> أو <body>، تطلب من المتصفح شيئاً واحداً بالضبط: أن يعكس اتجاه تدفق النص. يصبح العنوان في اليمين، وتبدأ الفقرة من اليمين، وتتوضع القوائم من اليمين. إلى هنا والمتصفح يفي بوعده.
لكن ما الذي لا يتغير؟ كل خاصية CSS كتبتها بيدك وفيها ذكرٌ لليمين أو اليسار: margin-left، padding-right، border-left، left: 20px، text-align: right. هذه الخصائص مكتوبةٌ بالحرف وتعني الجهة الفيزيائية من الشاشة بغض النظر عن اتجاه القراءة. لا يستطيع dir="rtl" أن يعكسها.
النتيجة الكلاسيكية: واجهةٌ تبدو وكأن أحدهم أمسك بها من الطرفين وشدّ في اتجاهين متعاكسين. النص يجري من اليمين إلى اليسار، لكن أيقونة السهم تشير إلى اليسار أيضاً، فيصبح “التالي” متوجهاً نحو الوراء. أو تكون الحاشية الديكورية على يسار البطاقة بينما كل بقية المحتوى يبدأ من اليمين.
لنعبّر عن هذا بكودٍ صريحٍ حتى تتضح الصورة:
/* ماذا يفعل dir="rtl" ؟ */
/* يعكس هذا ✓ */
p { /* النص يبدأ من اليمين تلقائياً */ }
ul { /* القوائم تتوضع من اليمين */ }
table { /* أعمدة الجدول تبدأ من اليمين */ }
/* لا يعكس هذا ✗ */
.card { margin-left: 20px; } /* يبقى على اليسار */
.icon { border-right: 2px solid; } /* يبقى على اليمين */
.tooltip { left: 0; } /* يبقى على اليسار */
.label { text-align: right; } /* يبقى يميناً حتى لو المعنى يتطلب يساراً */
الفرق بين إضافة dir="rtl" وبناء واجهةٍ يمينيةٍ حقيقيةٍ هو الفرق بين تعليم لافتةٍ “محلٌ عربي” على واجهة محلٍ مصممٍ للغرب، وبين بناء محلٍ صُمّم من البداية لزبونٍ عربيٍ يعرف ماذا يريد وأين يجد كل شيء.
الخصائص الفيزيائية مقابل المنطقية
كل خاصية CSS تضع “يساراً” أو “يميناً” في اسمها تُسمى خاصية فيزيائية (Physical Property): فهي تصف موضعاً ثابتاً على الشاشة كما لو أنها تنظر إلى لوحةٍ قماشيةٍ جامدة. الجهة فيزيائية، مطلقة، لا تعرف شيئاً عن لغة المستخدم.
الخاصية المنطقية (Logical Property) تبدّل هذه الزاوية كلياً: بدلاً من “اليسار” و”اليمين”، تتحدث بلغة التدفق، أي البداية والنهاية. لا تسأل: أين على الشاشة؟ بل تسأل: أين في سياق القراءة؟ وعندما يتغير هذا السياق (بتغيير dir أو writing-mode)، تتغير تلقائياً.
لفهم هذا بشكلٍ ملموس، تخيّل خاصيتين:
margin-left: 16px— تعني دائماً: هامش من الجهة الغربية للعنصر. في العربية أو الإنكليزية، الجواب واحد: إنها الجهة اليسرى.margin-inline-start: 16px— تعني: هامشٌ من جهة البداية. في الإنكليزية (LTR) هذه هي اليسرى. في العربية (RTL) هذه هي اليمنى. كودٌ واحد، سياقان، نتيجتان صحيحتان.
المحور الذي تعمل عليه هذه الخصائص يُسمى المحور المضمن (Inline Axis)، وهو محور تدفق الكلمات في السطر. ويقابله محور الكتلة (Block Axis)، وهو محور تتالي الفقرات عمودياً، وهذا المحور لا يتغير مع dir في اللغات الأفقية كالعربية.
جدول الخصائص الأكثر استخداماً
هذا ليس جدول مرجع شامل، فذاك موجودٌ على توثيق MDN. هذا جدول العمل اليومي: الخصائص التي ستصطدم بها في كل مشروع واجهةٍ وتحتاج أن تعرف بديلها المنطقي فوراً.
| الخاصية الفيزيائية | البديل المنطقي | المجال |
|---|---|---|
margin-left / margin-right |
margin-inline-start / margin-inline-end |
الهوامش الجانبية |
padding-left / padding-right |
padding-inline-start / padding-inline-end |
الحشوة الداخلية الجانبية |
border-left / border-right |
border-inline-start / border-inline-end |
الحدود الجانبية |
text-align: left / right |
text-align: start / end |
محاذاة النص |
left / right (تموضع مطلق) |
inset-inline-start / inset-inline-end |
إحداثيات position: absolute |
margin-top / margin-bottom |
margin-block-start / margin-block-end |
الهوامش العمودية (محور الكتلة) |
width |
inline-size |
العرض على محور التدفق |
height |
block-size |
الارتفاع على محور الكتلة |
لاحظ السطرين الأخيرين: margin-top وmargin-bottom لهما أيضاً بدائل منطقية، لكنها نادراً ما تحتاجها في واجهات اللغات الأفقية كالعربية والإنكليزية، لأن المحور العمودي لا يتغير باختلاف الاتجاه. ذُكرت هنا للاكتمال، لكن استبدالها اختياري في الغالب.
مثالٌ عملي: بطاقة مستخدمٍ تنقلب بشكل صحيح
نبني الآن بطاقة مستخدمٍ بسيطةٌ: صورةٌ على اليمين، واسمٌ ووصفٌ على اليسار منها، ونريدها أن تعمل في الإنكليزية والعربية بكودٍ واحد. سنبدأ بالطريقة القديمة لنرى المشكلة، ثم نعيد بناءها بالطريقة الصحيحة.
الطريقة القديمة — كودٌ يكسر في RTL
/* ❌ الطريقة القديمة: خصائص فيزيائية */
.user-card {
display: flex;
align-items: center;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
}
.user-card .avatar {
width: 64px;
height: 64px;
border-radius: 50%;
margin-right: 16px; /* ← مثبّت على اليمين دائماً */
border-left: 3px solid #c0392b; /* ← حد على اليسار دائماً */
}
.user-card .name {
font-weight: bold;
text-align: left; /* ← يسار دائماً */
}
/* وعندما نضيف العربية نضطر لهذا: */
[dir="rtl"] .user-card .avatar {
margin-right: 0; /* تصفير */
margin-left: 16px; /* عكس */
border-left: none; /* تصفير */
border-right: 3px solid #c0392b; /* عكس */
}
[dir="rtl"] .user-card .name {
text-align: right; /* عكس */
}
هذا الكود يعمل، لكنه يتضاعف مع كل عنصرٍ جديد. ويتطلب منك أن تتذكر تصفير كل خاصيةٍ قبل عكسها، وإلا ظهرت الأولى والثانية معاً وكسّرتا التصميم.
الطريقة الصحيحة — كودٌ واحدٌ لكل الاتجاهات
/* ✅ الطريقة المنطقية: كود واحد لكل لغة */
.user-card {
display: flex;
align-items: center;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
}
.user-card .avatar {
width: 64px;
height: 64px;
border-radius: 50%;
margin-inline-end: 16px; /* بعد الصورة في اتجاه القراءة */
border-inline-start: 3px solid #c0392b; /* حد عند بداية الصورة */
flex-shrink: 0;
}
.user-card .name {
font-weight: bold;
text-align: start; /* يتبع اتجاه القراءة */
}
/* لا يوجد كود إضافي. هذا هو الملف كاملاً. */
في LTR (الإنكليزية): الصورة تظهر يساراً، والهامش يُبعدها عن النص من الجهة اليمنى، والحد يقع على يسار الصورة. في RTL (العربية): الصورة تظهر يميناً، والهامش يُبعدها من الجهة اليسرى، والحد يقع على يمين الصورة. كل ذلك من نفس الكود تماماً.
وإليك HTML الهيكل الكامل للبطاقتين جنباً إلى جنب لترى الفرق:
<!-- نسخة LTR -->
<div class="user-card" dir="ltr">
<img class="avatar" src="avatar.jpg" alt="User photo" />
<div class="info">
<p class="name">Ahmed Hassan</p>
<p class="role">Frontend Developer</p>
</div>
</div>
<!-- نفس الكود، اتجاه مختلف — لا تغيير في CSS -->
<div class="user-card" dir="rtl">
<img class="avatar" src="avatar.jpg" alt="صورة المستخدم" />
<div class="info">
<p class="name">أحمد حسن</p>
<p class="role">مطور واجهات أمامية</p>
</div>
</div>
الفكرة هنا جوهرية: HTML لا يعرف CSS، وCSS لا يعرف اللغة. ما يجعل النظام يعمل هو أن dir في HTML يُخبر CSS بسياق التدفق، والخصائص المنطقية تستجيب لهذا السياق. الثلاثة يعملون معاً كمنظومة متكاملة.
سبب نجاح هذا بعمق هو أن مجموعة الخصائص المترابطة Flexbox — كما أشارت سلسلة معالجة النصوص الهجينة — صُمّمت أصلاً بمنطق تدفقٍ لا منطق جغرافي. flex-start وflex-end يتبعان dir تلقائياً دون حاجة لأي تدخل. لذا فإن دمج Flexbox مع الخصائص المنطقية ينتج بنيةً تتكيف مع أي اتجاهٍ بشكلٍ كامل.
دعم المتصفحات — الصورة اليوم
السؤال الذي يتوقف عنده كثير من المطورين: هل يمكن استخدام هذه الخصائص في مشاريعٍ إنتاجيةٍ الآن، أم لا تزال “مستقبلاً”؟ الجواب منذ ٢٠٢٣ واضح: نعم، بشكلٍ كامل.
| المتصفح | الإصدار الأول مع الدعم | الدعم الكامل اليوم |
|---|---|---|
| Chrome / Edge | الإصدار ٨٧ | ✓ كامل |
| Firefox | الإصدار ٦٦ | ✓ كامل |
| Safari | الإصدار ١٤.١ | ✓ كامل |
| Samsung Internet | الإصدار ١٤ | ✓ كامل |
| Internet Explorer | — | ✗ لا دعم |
إنترنت إكسبلور لا يدعمها، لكن إذا كان مشروعك لا يزال يستهدف IE فهذا سؤالٌ منفصلٌ يتعلق بميراثٍ مختلفٍ تماماً. لأجل الويب الحديث — وهو ما يستخدمه ٩٩٪ من مستخدمي المواقع العربية اليوم — الخصائص المنطقية آمنة ومستقرة للاستخدام الفوري.
ملاحظة: خاصية inset-inline-start لا تزال تحتاج إلى الاختبار في Safari الإصدارات الأقدم من iOS 14.5. إذا كنت تستهدف هذه الشريحة، أضف قيمة left/right احتياطية قبلها.
إذا كان مشروعك يستهدف بيئات Enterprise مقيدةٌ بمتصفحاتٍ قديمة، فأدوات البناء مثل PostCSS قادرةٌ على توليد كودٍ احتياطيٍ تلقائياً، وهذا مسارٌ منفصلٌ عن هندسة الواجهة ذاتها.
الانتقال التدريجي: كيف تبدأ في مشروع قائم
أكثر سؤال عملي يطرحه المطور الذي اقتنع بالفكرة: لدي موقع قائم بآلاف الأسطر من CSS القديم. من أين أبدأ؟ والجواب ليس “أعد الكتابة من الصفر”.
الانتقال التدريجي يعني: لا تُصلح ما لا ينكسر، وأصلح ما ينكسر أولاً. هذه الخطوات الثلاث تعمل مع أي مشروع:
الخطوة الأولى — حدّد الكسر الفعلي
قبل تغيير أي سطر، أضف dir="rtl" على الصفحة وافتحها. كل عنصر يبدو غريب الموضع أو مقلوب التناسق هو مرشح للإصلاح. صوّر هذه العناصر أو دوّنها. الكسر البصري هو خارطة عملك.
الخطوة الثانية — العناصر الجديدة تولد منطقية
من الآن، أي مكوّنٍ جديدٍ تكتبه يُكتب بالخصائص المنطقية من البداية. لا ترجع للفيزيائية أبداً في الكود الجديد. بهذا تمنع تراكم الدين التقني بدلاً من علاجه.
الخطوة الثالثة — حوّل العناصر التي تكسر التصميم
الآن ابدأ بإصلاح العناصر المكسورة التي رصدتها. الاستبدال مباشر في الغالب: كل margin-left تُقرر إصلاحه يصبح margin-inline-start، وكل border-right يصبح border-inline-end. لا تحتاج تصفير القديمة لأنك ستحذفها كلياً.
/* مثال على الاستبدال المتدرج */
/* قبل */
.sidebar-link {
padding-left: 12px;
border-left: 2px solid #c0392b;
text-align: left;
}
/* بعد */
.sidebar-link {
padding-inline-start: 12px;
border-inline-start: 2px solid #c0392b;
text-align: start;
}
أداةٌ مفيدة: البحث في ملفاتك
إذا أردت أن تعرف كم خاصيةً فيزيائيةً تحتاج مراجعةً في مشروعك، يمكنك في أي محرر كودٍ أو من الطرفية (Terminal) البحث عن هذه الأنماط:
# في الطرفية (Linux / Mac / Windows PowerShell):
# يعرض كل السطور التي تحتوي خصائص فيزيائية في ملفات CSS
grep -rn "margin-left\|margin-right\|padding-left\|padding-right\|border-left\|border-right\|text-align: left\|text-align: right" ./src --include="*.css"
# في VS Code: ابحث بـ Regex عن:
# (margin|padding|border)-(left|right)
النتيجة ستعطيك قائمةً محددةً بملفاتٍ وأرقام أسطر. ابدأ بالعناصر التي تظهر في كل صفحةٍ (التنقل، الشريط الجانبي، البطاقات) قبل العناصر النادرة.
الانتقال التدريجي لا يتطلب يوماً مخصصاً لإعادة الكتابة. يتطلب قراراً بأن كل مرة تلمس فيها ملف CSS، تترك الجزء الذي لمسته أنظف مما وجدته.
سؤالٌ يطرحه كثيرون: ماذا عن الخصائص المختصرة؟
الخاصية المختصرة مثل margin: 0 16px تضع ١٦ بكسل على اليمين واليسار الفيزيائيين، فهل تتأثر؟ في الحقيقة لا، لأن margin: 0 16px تعني هامشاً متساوياً من الجانبين، وهذا لا يختلف بين RTL وLTR. المشكلة تظهر فقط حين تكون القيمتان مختلفتَين: margin: 0 16px 0 32px. هنا أنت تقول ٣٢ على اليسار و١٦ على اليمين، وهذا ما يكسر في RTL.
البديل المنطقي للمختصرة الجانبية هو: margin-inline: 32px 16px — القيمة الأولى للبداية، والثانية للنهاية، وتنقلبان تلقائياً مع الاتجاه.
خلاصةٌ وما يلي
الخصائص المنطقية ليست أداةً لمن يصمم مواقعاً عربيةً فحسب، بل هي أداةٌ لأيّ مطورٍ يريد كتابة CSS يصمد. في عالم أصبح فيه الموقع الواحد يخدم ١٢ لغة، والمكوّن الواحد يُعاد استخدامه في اتجاهاتٍ مختلفة، فالخصائص الفيزيائية ترفٌ لا يمكن تحمّله.
ما تعلمناه في هذا المقال هو الأساس: الفرق الفكري بين النموذجين، جدول الاستبدال الفوري، ومنهجية الانتقال في المشاريع القائمة. هذا يكفيك لتبدأ اليوم.
لكن هناك عناصرٌ في الواجهة تكسر هذه القاعدة عمداً، ليس لأن المطور أخطأ، بل لأن الواجهة ذاتها تحمل معنى جهةٍ ثابتةٍ لا يجب أن تتغير بتغيير اللغة. مشغل الوسائط، وشريط التقدم الدائري، والمخططات الزمنية، هذه عناصرٌ يجب أن تصمد في مكانها حتى في RTL، وهي موضوع مقالنا التالي: المكوّنات الصامدة.
المراجع والمصادر:
- المواصفة الرسمية للخصائص المنطقية — W3C: CSS Logical Properties and Values Level 1
- توثيق MDN الشامل: CSS logical properties and values
- جدول دعم المتصفحات — Can I Use: caniuse.com/css-logical-props
- مقالنا التكميلي من سلسلة معالجة النصوص الهجينة: الخصائص المنطقية في CSS: هندسة الواجهات ثنائية الاتجاه دون انحياز
— دليل هندسة واجهات اليمين —
المقال الحالي: ١- قلب الواجهة: الخصائص المنطقية في CSS
المقال التالي: ٢- المكوّنات الصامدة
سلاسل مشابهة:
دليل معالجة النصوص الهجينة | دليل معايرة البيانات المالية | ورشة التوطين لتطبيقات الويب ٣.٠ والذكاء الاصطناعي
منصة ذي يزن © ٢٠٢٦
سلاسل التوطين
دليل هندسة واجهات اليمين — ٤ مقالات
سلسلة دليل هندسة واجهات اليمين — ٤ مقالات | منصة ذي يزن © ٢٠٢٦
