الخصائص المنطقية والكتابة من اليمين إلى اليسار

تضيف Waypoint نسخة عربية من الجدول لفعاليتها الفرعية في القاهرة. التغيير في الـ HTML سمة واحدة، <html lang="ar" dir="rtl">، وجاء التحميل الأول صحيحًا نصفه فقط. قائمة الجلسات انعكست كما ينبغي، لأنها صف flex. لكن كل بطاقة ظهر حدّها الملوّن على اليسار، وهو في العربية نهاية السطر لا بدايته، وعمود الوقت جاءت مسافته في الجهة الخاطئة، وسهم «Details →» أشار إلى الوراء.

كان التخطيط مكتوبًا بالاتجاهات الفيزيائية: يسار ويمين وأعلى وأسفل. لكن النص لا يجري في اتجاهات فيزيائية؛ إنه يجري من بداية إلى نهاية. وأنت تقرأ هذا الدرس الآن من اليمين إلى اليسار، فالبداية عندك على اليمين، بينما هي على اليسار عند قارئ النسخة الإنجليزية.

محورا الـ inline والـ block

الخصائص المنطقية (logical properties) تسمّي الجهات بحسب سير النص:

• محور الـ inline هو الاتجاه الذي يجري فيه النص داخل السطر الواحد. في الإنجليزية من اليسار إلى اليمين؛ وفي العربية من اليمين إلى اليسار.
• محور الـ block هو الاتجاه الذي تتراصّ فيه الأسطر: من الأعلى إلى الأسفل في اللغتين.

لكل خاصية فيزيائية توأم منطقي:

وهناك اختصارات أيضًا: margin-inline: 1rem 2rem تضبط البداية والنهاية، وpadding-block: 1rem تضبط جهتي الـ block معًا، وinset-inline: 0 تحلّ محلّ left: 0; right: 0.

تحويل بطاقة الجلسة

/* Before: physical */
.session-card {
  border-left: 6px solid var(--track-color);
  padding: 12px 8px 12px 20px;
  text-align: left;
}
.session-card .time { margin-right: 12px; }

/* After: logical */
.session-card {
  border-inline-start: 6px solid var(--track-color);
  padding-block: 12px;
  padding-inline: 20px 8px;
  text-align: start;
}
.session-card .time { margin-inline-end: 12px; }

في الإنجليزية النتيجة مطابقة حتى آخر بكسل. وفي العربية ينتقل الحدّ إلى اليمين، حيث تبدأ الأسطر، وتتبعه المسافات. تكتب البطاقة مرة واحدة.

flexbox وgrid يفكّران بهذه الطريقة أصلًا. flex-direction: row وjustify-content: flex-start والعمود 1 في grid كلها تتبع اتجاه السطر، لذا ينعكس صف flex في RTL دون أيّ CSS إضافية. ولهذا عملت قائمة Waypoint من المحاولة الأولى.

الأحجام منطقية أيضًا

inline-size وblock-size هما الاسمان المنطقيان للعرض والارتفاع، وmax-inline-size: 40ch هي النسخة المنطقية من سقف عرض القراءة المريح الذي رأيته في درس التحجيم الذاتي. في العربية والإنجليزية تتصرّفان تمامًا مثل width وheight، لأن الخطّين يُكتبان أفقيًا. ولا تختلفان إلا في أنماط الكتابة الرأسية، مثل writing-mode: vertical-rl لليابانية أو لعنوان جدول مُدار، حيث يمتدّ محور الـ inline من الأعلى إلى الأسفل. استخدامهما لا يكلّف شيئًا اليوم، ويعني أن الـ component سيصمد إن تغيّر نمط الكتابة لاحقًا. وقاعدة معقولة للفريق: الخصائص المنطقية لكل ما يتعلّق بسير النص، والفيزيائية فقط لما هو فيزيائي بطبيعته، كظلّ يجب أن يسقط إلى الأسفل دائمًا.

ما لا ينعكس من تلقاء نفسه

بعض الأشياء فيزيائية بطبيعتها وتحتاج إلى قاعدة RTL صريحة:

• الـ transforms: translateX(8px) تحرّك العنصر إلى اليمين دائمًا.
• الأيقونات الاتجاهية: الأسهم، وعلامات «التالي»، واتجاه مؤشّر التقدّم.
• مواضع الخلفيات والظلال: box-shadow: 4px 0 … تلقي ظلّها إلى اليمين دائمًا.

الـ pseudo-class :dir() تطابق الاتجاه المحسوب للعنصر، الموروث من أقرب سمة dir:

.more .arrow {
  display: inline-block;
  margin-inline-start: 4px;
}
.more .arrow:dir(rtl) {
  scale: -1 1;   /* mirror horizontally */
}

:dir(rtl) أفضل من [dir="rtl"] .arrow لأنها لا تهتم بمكان السمة، ولا بما إذا كان عنصر متداخل قد عاد إلى LTR. وهي ضمن Baseline منذ ديسمبر 2023، ومتاحة على نطاق واسع منذ منتصف 2026.

ليست كل أيقونة بحاجة إلى الانعكاس. زر التشغيل والساعة وعلامة الصح تعني الشيء نفسه في الاتجاهين؛ أما سهم «رجوع» أو اتجاه المنزلق (slider) فلا. اسأل أحد الناطقين باللغة حين لا تكون متأكّدًا.

الخط العربي في قاعدتين

الأولى: لا تطبّق letter-spacing على العربية أبدًا. الحروف العربية تتّصل بما يجاورها؛ وتبعيدها يقطع هذا الوصل ويجعل الكلمات صعبة القراءة. إن كان نظام التصميم لديك يضيف تباعدًا للتسميات بالأحرف الكبيرة، فأعده إلى الصفر بـ :lang(ar) { letter-spacing: 0; }. والثانية: كثيرًا ما تحتاج العربية إلى حجم خط وارتفاع سطر أكبر قليلًا من النص اللاتيني لتظهر بالوزن البصري نفسه. اضبط ذلك لكل لغة بـ :lang(ar) لا لكل component.

دورك الآن

بطاقة التمرين مكتوبة بخصائص فيزيائية. حوّلها إلى خصائص منطقية واعكس السهم في RTL. تعرض الفحوصات البطاقة في الاتجاهين. وبعدها ستستبدل الألوان السداسية (hex) في البطاقة بـ oklch()، وتبني لوحات ألوان المسارات بـ color-mix().