الاتجاه ليس انعكاسًا في مرآة

يصل الطلب عادةً بندًا في قائمة: «أضيفوا العربية». فيُوضع إلى جانب أعمال المحتوى، ويُقدَّر بأسبوع. ثمّ يضبط أحدهم dir="rtl" على عنصر html، فيتفكّك التخطيط، ويتضاعف التقدير ثلاثًا في صمت.

الخطأ في تصنيف المهمّة. العربية مهمّة ترجمة، أمّا الاتجاه فمعمارية تخطيط: إمّا أن تُضمِّن الاتجاه في الطريقة التي يُكتب بها التخطيط، وإمّا أن تقضي بقيّة المشروع في ترقيعه.

كفّ عن كتابة «يمين» و«يسار»

معظم عيوب الاتجاه عيب واحد مكرّر: ورقة أنماط مليئة بالخصائص الفيزيائية. margin-left وpadding-right وleft: 0 وborder-left. كلّ واحدة منها تصريح عن الشاشة، ولا واحدة منها تصريح عن النصّ. فإذا انقلب الاتجاه صارت كلّها خاطئة، والعلاج المعتاد ورقة أنماط ثانية تحت [dir='rtl'] تتجاوزها جميعًا — وتبدأ بالانحراف عن الأولى من يومها الأول.

الخصائص المنطقية تُلغي المشكلة بدل أن تعكسها:

/* فيزيائية: صحيحة في اتجاه، خاطئة في الآخر */
.card {
  margin-left: 1rem;
  border-left: 1px solid;
}

/* منطقية: صحيحة في الاثنين، بلا تجاوزات */
.card {
  margin-inline-start: 1rem;
  border-inline-start: 1px solid;
}

inline-start تعني «الحافة التي يبدأ منها القارئ»، والمتصفّح يعرف أيّ حافة هي، لأنّك أخبرته بذلك في dir. وهذا الموقع يستعمل border-inline-start وpadding-inline-start للعمود الفقري النازل في كلّ صفحة، وinset-inline للخطّ الذي ينمو تحت الرابط. لا توجد ورقة أنماط للاتجاه يجب إبقاؤها متزامنة.

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

التحويلات لا تعرف الاتجاه

تقطع بك الخصائص المنطقية معظم الطريق، ثمّ تصطدم بجدار: transform بلا نظير منطقي. فـtranslateX(1rem) تتحرّك يمينًا في الاتجاهين، وtransform-origin: left center تبقى يسارًا في العربية. وكلّ حركة ذات اتجاه — درج ينزلق من حافة القراءة، أو خطّ ينمو من حيث تبدأ العين — تُعرض معكوسة دون أن يشتكي أحد.

والحلّ ليس معالجة كلّ حركة على حدة، بل جعل الاتجاه قيمةً تقرؤها الحركة:

:root {
  --stroke-origin: left center;
}
[dir='rtl'] {
  --stroke-origin: right center;
}

.rule-link::after {
  inset-inline: 0;
  transform: scaleX(0);
  transform-origin: var(--stroke-origin);
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.rule-link:hover::after {
  transform: scaleX(1);
}

تجاوز واحد، في موضع واحد، عند الجذر. وكلّ حركة اتجاهية تُضاف لاحقًا ترث الحلّ مجّانًا.

تباعد الأحرف يكسر العربية

العربية خطّ متّصل: الحروف تتشابك، والوصلات نفسها تحمل معلومة عن موضع الحرف في الكلمة. وletter-spacing تُقحم فجوة بين المحارف فتفصل تلك الوصلات. لا تبدو الكلمة عندئذٍ فسيحة، بل مكسورة — كما تبدو h e l l o في اللاتينية، غير أنّ القارئ العربي مضطرّ إلى التوقّف وإعادة تركيب الكلمة.

وهذا يُسقط نمط «العنوان الصغير» الذي تلجأ إليه كلّ أنظمة التصميم: حروف كبيرة، وتباعد واسع، وخطّ أحادي المسافة. وهي في العربية ثلاث استحالات منفصلة — لا وجود للحروف الكبيرة، والتباعد يقطع الخطّ، ومعظم الخطوط أحادية المسافة بلا تغطية عربية أصلًا. فيُعاد التفكير في العنصر لا يُترجم:

.marginalia {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang='ar'] .marginalia {
  font-family: var(--font-body-ar);
  font-size: 0.78rem; /* الحجم يحمل التراتب بدلًا منها */
  letter-spacing: normal;
  text-transform: none;
}

النصوص ثنائية الاتجاه حيث تشتدّ المسألة

النثر العربي التقني مليء باللاتينية: أرقام الإصدارات، وأسماء المنتجات، وأرقام الهواتف، والسنوات. كلّ واحد منها مقطع يسير من اليسار إلى اليمين داخل فقرة تسير من اليمين إلى اليسار، وخوارزمية يونيكود ثنائية الاتجاه هي التي تقرّر أين تقع الحدود. والمحارف المحايدة — المسافات وعلامات الترقيم و+ والأقواس — تقع على تلك الحدود ويحسمها السياق. وهكذا تنتهي + رقم الهاتف في الطرف الخطأ، أو يُعرض Q1 2026 هكذا: 2026 Q1.

والخوارزمية ليست مخطئة؛ سُلّمت سلسلة ملتبسة فحسمتها بالقاعدة. فأزل الالتباس بعزل المقطع:

.numeric {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

isolate تجعل العنصر كتلة محايدة واحدة من الخارج، وتحسم داخله على حدة. وفي الوسم يؤدّي <bdi> الدور نفسه، وهو ما تريده حول أيّ نصّ لم تكتبه أنت: اسم شخص، أو اسم شركة، أو أيّ قيمة قادمة من قاعدة بيانات. والقاعدة العملية: اعزل كلّ مقطع لا تستطيع ضمان اتجاهه وقت البناء.

الخطوط يجب أن تتّفق

الخطوط العربية واللاتينية المرسومة كلٌّ على حدة لا تتشارك المقاييس. اضبطهما على font-size واحد فيُقرأ العربي أصغر عادةً، ويستقرّ على خطّ الأساس على نحوٍ مختلف، ويطلب سطرًا أوسع — فالمتطلّبات الرأسية للخطّ العربي مختلفة فعلًا.

وتكفي حركتان لمعالجة معظم ذلك: اختر عائلة خطوط مرسومة عبر الكتابتين، فيصير نصّ المتن متوافق المقاييس بالبناء لا بالحظّ. ثمّ صحّح الفارق البصري المتبقّي مرّة واحدة:

html[lang='ar'] {
  font-size: 104%;
}

وتذكّر ما الذي يتمدّد معها: كلّ ما هو مقيس بـrem. وهو صحيح للنصّ، وخاطئ لهامش الصفحة الذي يجب أن يكون متطابقًا في اللغتين — ولهذا تُعلن حشوة الحاوية في هذا الموقع بالبكسل.

أمّا خطّ العناوين فقرار تصميمي لا تقني. خطّ واحد «يدعم العربية أيضًا» يعطيك صفحة مقروءة بلا صوت. وخطّان، كلٌّ من تقليده، متطابقان في الصفة لا في الشكل، يعطيانك صفحتين تُقرآن كأنّهما من مطبوعة واحدة دون أن تقلّد إحداهما الأخرى.

ما الذي يكلّفه هذا فعلًا

لا شيء ممّا سبق صعب، وكلّ ما سبق باهظ إذا تأخّر. فالخصائص المنطقية، ومتغيّر الاتجاه للتحويلات، وعزل المقاطع ثنائية الاتجاه، واختيار خطّين متوافقين — كلّها مجتمعةً قرارات بعد ظهيرة واحدة في أوّل المشروع، أو أسبوعان من الانحدارات في آخره.

فإذا كان التخطيط قد عامل الاتجاه مُدخلًا أصيلًا، فإضافة العربية لا تكلّف شيئًا يُذكر. وإن لم يفعل، فأنت لا تضيف لغة؛ أنت تعيد بناء التخطيط، وهذه المرّة بموعد تسليم.