Skip to content
المميزاتالأسعارالشراكةالمدونةالمساعدةمن نحنتواصل معنا
ابدأ الآنتسجيل الدخول
العودة إلى المدونة
guides2026-07-145 دقيقة قراءة

تجربة قائمة عربية RTL: تخطيط مرآة، اتجاه الأرقام وبطاقات الأسعار

مطعم تركي في دبي سيتي ووك يبقي 45 AED بـ LTR بينما يتدفق الوصف RTL. حل عبر unicode-bidi: plaintext.

th

thMenu Team

thmenu.com

أطلق مطعم تركي في دبي سيتي ووك قائمته العربية الشهر الماضي. وصلت أول شكوى خلال ساعات: "Adana Kebap 45 AED" كانت تظهر كفوضى غير مقروءة. لم تكن المشكلة في الترجمة بل في إدارة الأرقام اللاتينية المضمنة داخل تدفق RTL. يغطي هذا الدليل التخطيط المرآة، اتجاه بطاقة السعر وسلوك line-clamp في الأوصاف العربية متعددة الأسطر بأمثلة إنتاج حقيقية.

المرآة واتجاه السعر

عند ضبط dir="rtl" على جذر HTML، تنعكس Flex وGrid تلقائياً. اسم المنتج على اليمين والسعر على اليسار — وهذا ما يتوقعه القارئ العربي. للسعر "45 AED" تتعامل خوارزمية Unicode BiDi بشكل صحيح: الرقم LTR والسياق RTL.

تبدأ المشاكل في أوصاف مثل "جاهز خلال 5 دقائق" حيث يختلط الرقم بالحروف العربية. عند الالتفاف يقفز الرقم للجانب الخاطئ. الحل: تطبيق unicode-bidi: plaintext على عنصر الوصف.

line-clamp والالتفاف متعدد الأسطر

تقصر البطاقات الأوصاف عادة إلى 2-3 أسطر. بلا مشكلة في اللاتينية، أما العربية فيختفي السطر الأخير أو تقفز الأرقام. السبب: line-clamp يقص أولاً ثم تعيد BiDi الترتيب.

  • unicode-bidi: plaintext — كل سطر في اتجاهه
  • text-align: start — محاذاة حسب اللغة
  • word-break: normal — يحفظ الأربطة العربية

الأرقام والعملات

تعرض قوائم السعودية "45 ر.س"؛ تفضل الإمارات "AED 45". في تكوين اللغة يقع الموقع تحت currency.position. الأرقام الهندية (٠١٢٣٤٥٦٧٨٩) محبوبة لكبار السن لكن الخليج يستخدم الأرقام اللاتينية.

يستخدم thMenu Intl.NumberFormat مع numberingSystem: "latn" افتراضياً، مع تجاوز "arab" لمصر والشام حيث تبقى شائعة.

الأسئلة الشائعة

هل يكفي dir="rtl"؟ لا، البطاقات المختلطة تحتاج unicode-bidi: plaintext.

هل الأرقام الهندية إلزامية؟ لا، فقط لمصر والشام.

هل أعكس الشعارات؟ لا للعلامات التجارية، نعم للأيقونات الاتجاهية.

هل وجدت هذا مفيداً؟ شاركه.