تحتوي بطاقة منتج افتراضية على رمز بجانب النص. يبدو الفراغ صحيحًا بالإنجليزية، لكنه يظهر على الطرف الخطأ بالعربية بعد نقل البطاقة إلى صفحة أخرى. عند مراجعة CSS قد تجد خاصية تصف بداية السطر وأخرى تصف اليسار، وكلتاهما تؤثران على الحافة نفسها في اتجاه معين.
سمّ الحافة وفق وظيفة المسافة
في نمط الكتابة الأفقي، تنتقل margin-inline-start من اليسار مع LTR إلى اليمين مع RTL. اخترها إذا كان المطلوب مسافة عند بداية السطر، واضبط اتجاه النص من مستوى الحاوية المناسبة. إذا كان المطلوب موضعًا هندسيًا ثابتًا مثل إطار قياس، فسجل سبب اختيار خاصية مادية لتلك الحالة.
اعزل أثر ترتيب التصريحات
أنشئ بطاقة تجريبية تستخدم margin-inline-start ثم تضيف margin-left في نفس قاعدة CSS. مع LTR قد تتنافس الخاصيتان على الحافة اليسرى ويحدد التتابع قيمة الحافة عندما تتساوى بقية أولوية القواعد. مع RTL تؤثران على حافتين مختلفتين. افحص القيم المحسوبة وتحقق من القواعد الأقدم أو الاختصارات التي تعيد ضبط الهوامش.
جرّب المكوّن في اتجاه مختلف عن الصفحة
اختبر البطاقة داخل صفحة عربية ثم داخل جزء بيانات إنجليزي له اتجاه مستقل. راجع موقع الأيقونة، والمسافة الفعلية، والمحاذاة مع النص الطويل والالتفاف في الهاتف. اترك عناصر مثل الرقم أو معرف المنتج تحت سياسة اتجاه واضحة، لأن قلب ترتيب القراءة لكل عنصر قد يربك القيم المختلطة.
وثّق نتيجة قابلة للتكرار
التقط القيم المحسوبة للحافتين في حالات RTL وLTR قبل التعديل وبعده، وراجع البطاقة بجوار مكونات تستخدم اختصارات مختلفة. يكشف الاختبار إذا أصلح التغيير البطاقة المعنية وترك مسافة مضاعفة في مكوّن مشترك. احتفظ بتحديد اتجاه المكوّن ضمن أمثلة نظام التصميم.
يمكن تطبيق الاختبارات ضمن تصميم واجهات الاستخدام وتطوير المواقع والمتاجر.
المرجع الفني W3C CSS Logical Properties.
صورة توضيحية أصلية مرتبطة بالمثال.
