شرح صفوف ومحتوى الفقرة
لنجمع الآن الأبعاد والهوامش والحشوات والإطارات وتدوير الزوايا وإزاحات التموضع المنطقية في ملف أنماط موحد لبطاقة منتج متكاملة تعمل بالعربية dir="rtl" والإنجليزية dir="ltr" معاً دون سطر استثنائي واحد:
.product-card {
max-inline-size: 320px;
padding-block: 14px;
padding-inline: 16px 64px;
border-inline-start: 5px solid #7750b2;
}
.price-tag {
inset-block-start: 14px;
inset-inline-end: 14px;
}احتفظ بجدول التحويل الشامل التالي كمرجع عملي سريع عند ترقية الأنماط الفيزيائية إلى خصائص منطقية حديثة:
| الخاصية الفيزيائية التقليدية | البديل المنطقي الحديث | سلوكها التلقائي في العربية RTL |
|---|---|---|
width وheight | inline-size وblock-size | العرض الأفقي والارتفاع الرأسي في الوضع الأفقي |
margin-left وmargin-right | margin-inline-start وmargin-inline-end | البداية من اليمين والنهاية من اليسار تلقائياً |
| حشوة جانبية متناظرة | padding-inline: 16px | تطبيق 16px على حافتي اليمين واليسار معاً |
border-left | border-inline-start | ينتقل الشريط الجانبي الملون إلى حافة اليمين |
border-top-right-radius | border-start-end-radius | تدوير الزاوية العلوية اليسرى المقابلة لنهاية السطر |
top مع right | inset-block-start مع inset-inline-end | تثبيت الشارة في الزاوية العلوية اليسرى بالعربية |
text-align: left وfloat: left | text-align: start وfloat: inline-start | محاذاة وطفو تلقائي نحو بداية السطر اليمنى |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في ملخص الدرس بناء واجهات ثنائية اللغة بملف أنماط واحد عبر الأبعاد المنطقية inline-size وblock-size، والهوامش والحشوات السطرية والكتلية، والإطارات وتدوير الزوايا، وإزاحات التموضع بعائلة inset، ومحاذاة النصوص ببداية التدفق ونهايته. وفي الخطوة التالية ستنتقل إلى درس نقطة أصل صورة الخلفية background-origin في لغة CSS لضبط مرجع تموضع الخلفيات بدقة داخل صناديق العناصر.