أغلب الواجهات العربية التي تبدو «غير مضبوطة» ليست كذلك بسبب اللغة العربية، بل لأن أحدهم ضبط الاتجاه وافترض أن المهمة انتهت. المتصفّح يعكس لك الكثير فعلًا — والأشياء التي لا يعكسها هي بالضبط ما يلاحظه الناس.
ما يعكسه المتصفّح نيابةً عنك
بمجرّد ضبط dir="rtl" تحصل على تدفّق النص وترتيب الصناديق السطرية، وكذلك كل خصائص CSS المنطقية إن كنت قد كتبتها. وهذه النقطة الأخيرة وحدها تستحق تغيير عاداتك.
| بدلًا من | اكتب | السبب |
|---|---|---|
| margin-left | margin-inline-start | ينعكس تلقائيًا مع الاتجاه |
| padding-right | padding-inline-end | ينعكس تلقائيًا مع الاتجاه |
| left / right | inset-inline-start / -end | التموضع يتبع الاتجاه |
| text-align: left | text-align: start | المحاذاة تتبع الاتجاه |
| border-left | border-inline-start | الخطوط واللمسات تبقى على حافة القراءة |
ما لا يعكسه — وما يلاحظه الناس
هذه هي القائمة الحقيقية. وكل بند فيها يحتاج قرارًا من إنسان.
- الأيقونات الاتجاهية. سهم الرجوع وسهم «التالي» وأيقونة الإرسال وسهم التراجع كلها تحمل اتجاهًا. أما علامة الصح والعدسة وسلّة المهملات فلا. وعكس كل شيء خطأ بقدر عدم عكس أي شيء.
- الشرائح والمنزلقات. اتجاه المسار واتجاه السحب وترتيب النقاط وزر «التالي» يجب أن تتفق جميعها مع بعضها ومع اتجاه القراءة.
- أشرطة التقدّم والخطوات. صفحة دفع تتقدّم من اليسار لليمين داخل تخطيط عربي تُقرأ وكأنها تعود إلى الوراء.
- الظلال ومصدر الضوء. الظل المزاح يمينًا يفترض مصدر ضوء. وعكس التخطيط دون عكس الضوء يجعل نموذج العمق غير متماسك.
- الأرقام والمقاطع اللاتينية. الأسعار وأرقام الموديلات والأكواد والروابط وأسماء العلامات تبقى من اليسار لليمين داخل جملة من اليمين لليسار. هذا نصّ ثنائي الاتجاه، وفيه يعيش أغلب الأعطال المرئية.
- الجداول. يتحرّك العمود الأول إلى اليمين، لكن الأعمدة الرقمية غالبًا يجب أن تبقى محاذاة كأرقام. وهذا قرار محتوى لا قرار CSS.
- موضع التمرير. الحاوية القابلة للتمرير أفقيًا تبدأ من اليمين في RTL، والمتصفّحات اختلفت تاريخيًا في معنى
scrollLeftهناك.
يعكسه المتصفّح
تدفّق النص والترتيب السطري وخصائص CSS المنطقية
تعكسه أنت
الأيقونات الاتجاهية والشرائح والخطوات والظلال ونقطة بدء التمرير
لا يُعكس أبدًا
الأرقام والمقاطع اللاتينية والأكواد والشعارات وعلامات الصح
مشكلة النص ثنائي الاتجاه
الجملة العربية التي تحتوي اسم منتج لاتيني أو رقم إصدار أو رابطًا ليست ذات اتجاه واحد. خوارزمية Unicode ثنائية الاتجاه تحلّ أغلبها بشكل صحيح، ثم تفشل بوضوح عند الحواف — غالبًا حول علامات الترقيم الأخيرة والأقواس والسلاسل مختلطة الحروف.
- عزل الاتجاه
- تغليف مقطع مخالف للاتجاه بحيث لا يُعيد ترتيب النص المحيط به. في HTML يتم ذلك بوسم
<bdi>، وفي CSS بـunicode-bidi: isolate. استخدمه مع أي قيمة لم تكتبها بنفسك — أسماء المستخدمين وعناوين المنتجات وأي شيء قادم من قاعدة بيانات.
<!-- The product name reorders the sentence around it -->
<p>وصل المنتج Galaxy S24 Ultra إلى المخزون.</p>
<!-- Isolated: the sentence stays stable whatever the value is -->
<p>وصل المنتج <bdi>Galaxy S24 Ultra</bdi> إلى المخزون.</p>قائمة المراجعة
قبل إطلاق أي واجهة عربية
- كل أيقونات الرجوع والتالي والإرسال والتراجع تشير للاتجاه الصحيح
- اتجاه مسار الشرائح واتجاه السحب وترتيب النقاط متفقة
- الخطوات وأشرطة التقدّم تتقدّم نحو حافة القراءة
- المقاطع اللاتينية داخل الجمل العربية معزولة
- أعمدة الجداول الرقمية محاذاة كأرقام لا كنصوص
- تسميات النماذج وحقولها ورسائل التحقّق محاذاة للحافة نفسها
- الظلال واتجاه الضوء متسقان مع التخطيط المعكوس
- حاويات التمرير الأفقي تبدأ من الحافة الصحيحة
- فُحص التخطيط عند 320 و375 و768 و1440 — فأعطال الاتجاه مرتبطة بالعرض
- ارتفاع السطر وحجم الخط مناسبان للعربية، وهي أطول من اللاتينية بالحجم نفسه
المصادر
أعمال ذات صلة
اقرأ بعده
- الأداءالموقع البطيء على ووردبريس لا يحتاج دائمًا إضافة تحسين جديدةكيف تعرف سبب بطء موقع ووردبريس بدل التخمين؟
- بحث الذكاء الاصطناعيالعربية أقلّ الأراضي تنافسًا في إجابات الذكاء الاصطناعيهل يغيّر النشر بالعربية احتمال أن يذكر مساعد ذكاء اصطناعي نشاطي؟
- العربية وواجهات RTLلماذا تنكسر مكتبات المكوّنات في وضع RTL، وما الذي تفحصه أولًالماذا تنكسر مكتبات المكوّنات في وضع RTL؟
