تخطَّ إلى المحتوى
RSX Digital | Custom Web Apps, Mobile & AI Solutions UAE
لست متأكدًا أخبرنا بالنتيجة التي تريدها، ونحن نسمّي الخدمة.

ثلاثون دقيقة، وخطة محددة النطاق، ورقم واضح. مجانًا في الحالتين.

احجز مكالمة
الواجهة الأمامية React · Next.js · Vue · Nuxt · TypeScript · Tailwind · Angular
الواجهة الخلفية Node.js · Laravel · Django · FastAPI · .NET · Go · GraphQL
الجوال Swift · Kotlin · React Native · Flutter
الذكاء الاصطناعي والبيانات Python · LangChain · OpenAI · Anthropic · pgvector · Whisper
إدارة المحتوى والتجارة Custom CMS · WordPress · Shopify · WooCommerce · Strapi · Sanity
البيانات والسحابة PostgreSQL · MySQL · MongoDB · Redis · AWS · Azure · Docker
كل خيار في هذه القائمة له سبب مرفق به. اقرأ صفحة التقنيات
الممارسة

الاتجاه من اليمين مشكلة تخطيط لا مشكلة ترجمة

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

قراءة 3 دقائقحُدّث في 07 أغسطس 2026
التخطيط نفسه من اليسار ومن اليمين، جنبًا إلى جنب
باختصار

ترجمة النصوص هي النصف الأصغر من دعم العربية. التخطيط والأيقونات وتنسيق الأرقام والخطوط كلها تحمل اتجاهًا، والخصائص المنطقية في CSS تعالج أغلبها من المصدر بدل ملف أنماط ثانٍ.

الجواب المختصر

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

كل مشروع خليجي نرثه لديه النصوص العربية جاهزة. وما لا يملكه هو تخطيط عربي. ويُرصد الاثنان كبند واحد في الميزانية، بينما الثاني أربعة أضعاف العمل.

#ما الذي ينكسر فعلًا

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

#الخصائص المنطقية، ولماذا ليست اختيارية

علاج أغلب تلك القائمة هو الكفّ عن كتابة الاتجاهات الفيزيائية. margin-left تصبح margin-inline-start. وleft: 0 تصبح inset-inline-start: 0. وtext-align: left تصبح text-align: start. عندها يعكس المتصفح التخطيط كله انطلاقًا من خاصية dir وحدها، بلا ملف أنماط ثانٍ وبلا سلسلة تجاوزات [dir="rtl"] يلزم إبقاؤها متزامنة.

وإذا كُتبت هكذا من أول commit فلا تكلّف شيئًا. أما إذا عولجت لاحقًا فهي مرور كامل على كل ملف أنماط في المشروع، وهذا بالضبط سبب تأجيلها ثم تسعيرها كمرحلة منفصلة.

#ما الذي يجب ألا يُعكس

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

#مشكلة الخط التي لا يرصد لها أحد ميزانية

معظم خطوط العرض المختارة لعلامة لاتينية لا تحمل محارف عربية إطلاقًا. والصفحة لا تُظهر خطأ — بل تسقط بصمت إلى خط نظام، ما يعني أن النسخة العربية من الموقع مركونة بخط لم يختره أحد، ومختلف على iOS وAndroid وWindows. واختيار خط عربي يجلس مرتاحًا بجوار اللاتيني قرار تصميمي، ويجب أن يقع قبل اعتماد سلّم الخطوط لا بعده.

الخلاصة
  • استخدم margin-inline و padding-inline و inset-inline في كل مكان؛ فهي تنعكس تلقائيًا ولا تحتاج تجاوزًا بـ [dir="rtl"].
  • اعكس الأسهم ومؤشرات التقدم. لا تعكس الشعارات ولا الساعات ولا نماذج الأجهزة ولا الصور.
  • المصطلحات اللاتينية داخل نص عربي تحتاج عزلًا اتجاهيًا، وإلا أعادت خوارزمية الاتجاه ترتيبها.
  • لا Sora ولا Plus Jakarta Sans يحملان محارف عربية — اختر خطًا عربيًا عن قصد وإلا اختاره نظام التشغيل عنك، ومختلفًا على كل جهاز.
شارك LinkedIn WhatsApp اقرأ بصيغة markdown
الخطوة التالية

أخبرنا بما تبنيه.

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