بودكاست CSS - 012: الخصائص المنطقية
نمط واجهة المستخدم الشائع حقًا هو تسمية نصية بأيقونة مضمنة داعمة.
تقع الأيقونة على يسار النص مع وجود فجوة صغيرة بين الاثنين،
المقدمة من margin-right
على الرمز.
هناك مشكلة على الرغم من ذلك،
لأن هذا لن يعمل إلا عندما يكون اتجاه النص من اليسار إلى اليمين.
إذا تغير اتجاه النص إلى من اليمين إلى اليسار - وهو طريقة قراءة اللغات مثل العربية - فسيُوضع الأيقونة مقابل النص.
كيف يتم احتساب ذلك في CSS؟ تتيح لك الخصائص المنطقية حل هذه المواقف. توفِّر هذه الحملات، بالإضافة إلى العديد من المزايا الأخرى، دعمًا تلقائيًا ومجانيًا لنشر المحتوى على نطاق عالمي. وهي تساعدك في بناء واجهة أمامية أكثر مرونة وشمولاً.
المصطلحات
تشير الخصائص المادية لأعلى ولليمين وأسفل اليسار إلى الأبعاد المادية لإطار العرض. يمكنك اعتبار هذه الأشياء كما لو كانت بوصلة على الخريطة. من ناحية أخرى، تعد الخصائص المنطقية ويمكن الإشارة إلى حواف المربّع من حيث صلتها بتدفق المحتوى. ولذلك، يمكنها التغيير في حال تغيير اتجاه النص أو وضع الكتابة. هذا تحول كبير عن أنماط الاتجاهات، وهذا يمنحنا قدرًا أكبر من المرونة عند تصميم واجهاتنا.
مسار الحظر
مسار الحظر هو الاتجاه الذي يتم فيه وضع أجزاء المحتوى. على سبيل المثال، إذا كانت هناك فقرتان، فإن تدفق الكتلة هو مكان الفقرة الثانية. في مستند إنجليزي، يكون تدفق الكتلة من أعلى إلى أسفل. فكر في هذا في سياق فقرات النص التي تتبع بعضها البعض، من أعلى إلى أسفل.
التدفق المضمّن
التدفق المضمّن هو كيفية تدفق النص في الجملة.
في مستند باللغة الإنجليزية، يكون التدفق المضمّن من اليسار إلى اليمين.
إذا أردت تغيير لغة المستند في صفحة الويب إلى العربية (<html lang="ar">
)،
فسيكون التدفق المضمّن من اليمين إلى اليسار.
يتدفق النص في الاتجاه الذي يحدّده وضع كتابة المستند.
يمكنك تغيير اتجاه عرض النص باستخدام السمة writing-mode
.
ويمكن تطبيق ذلك على المستند بأكمله أو على عناصر فردية.
نسبة التدفق
تاريخيًا في CSS،
فقد تمكنا فقط من تطبيق خصائص مثل الهامش بالنسبة إلى اتجاه جوانبها.
على سبيل المثال، يتم تطبيق السمة margin-top
على الجزء العلوي من العنصر.
باستخدام الخصائص المنطقية، يصبح margin-top
margin-block-start
.
يعني ذلك أنه بغض النظر عن اللغة واتجاه النص،
تدفق الحظر له قواعد هامش مناسبة.
مقاسات الشعار
لمنع أحد العناصر من تجاوز عرض أو ارتفاع معين، اكتب قاعدة مثل هذه:
.my-element {
max-width: 150px;
max-height: 100px;
}
المكافئات النسبية للتدفق هما max-inline-size
وmax-block-size
.
يمكنك أيضًا استخدام السمتَين min-block-size
وmin-inline-size
بدلاً من min-height
وmin-width
.
باستخدام الخصائص المنطقية، ستبدو قاعدة الحد الأقصى للعرض والارتفاع على النحو التالي:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
البداية والنهاية
فبدلاً من استخدام الاتجاهات مثل الأعلى ولليمين والأسفل واليسار، استخدم البداية والنهاية. وهذا يمنحك بداية الكتلة والنهاية المضمَّنة ونهاية الكتلة وبدء التضمين. تتيح لك هذه الميزات تطبيق خصائص CSS التي تستجيب لتغييرات وضع الكتابة.
على سبيل المثال، لمحاذاة النص إلى اليمين، يمكنك استخدام لغة CSS هذه:
p {
text-align: right;
}
إذا لم يكن هدفك هو المحاذاة مع اليمين المادي،
ولكن بدلاً من بداية اتجاه القراءة،
فهذا ليس مفيدًا.
باستخدام القيم المنطقية، تتوفّر قيم start
وend
أكثر فائدة يتم ربطها باتجاه النص.
تبدو قاعدة محاذاة النص الآن على النحو التالي:
p {
text-align: end;
}
التباعد وتحديد الموضع
السمات المنطقية للسمات margin
وpadding
وinset
وجعل عناصر تحديد الموضع وتحديد كيفية تفاعل هذه العناصر مع بعضها البعض عبر أوضاع الكتابة أسهل وأكثر كفاءة.
لا تزال الخصائص ذات الصلة بالهامش والمساحة المتروكة تعيينات مباشرة للاتجاهات،
ولكن الاختلاف الرئيسي هو أنه عندما يتغير وضع الكتابة، تتغير به.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
يؤدي ذلك إلى إضافة بعض المساحة الداخلية الرأسية باستخدام padding
ودفعها إلى الخارج من اليسار باستخدام margin
.
وتغيّر السمة top
أيضًا إلى الأسفل.
مع مكافئات الخصائص المنطقية، ستبدو بدلاً من ذلك على النحو التالي:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
يؤدي ذلك إلى إضافة بعض المساحة الداخلية باستخدام padding
ودفعها من البداية المضمّنة بـ margin
.
تنقل السمة inset-block
السمة للداخل من بداية الحظر.
السمة inset-block
ليست الخيار المختصر الوحيد الذي يحتوي على خصائص منطقية.
ويمكن تكثيف هذه القاعدة أكثر،
باستخدام إصدارات مختصرة من خصائص الهامش والمساحة المتروكة.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
الحدود
يمكن أيضًا إضافة border
وborder-radius
باستخدام الخصائص المنطقية.
لإضافة حد في الأسفل والأيمن، مع نصف قطر أيمن، يمكنك كتابة قاعدة مثل هذه:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
أو يمكنك استخدام الخصائص المنطقية مثل هذه:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
تمثّل end-end
في border-end-end-radius
نهاية الحظر والنهاية المضمَّنة.
الوحدات
توفّر الخصائص المنطقية وحدتين جديدتين هما: vi
وvb
.
تمثّل وحدة vi
نسبة 1% من حجم إطار العرض في الاتجاه المضمّن.
الخاصية المكافئة للخاصية غير المنطقية هي vw
.
تمثّل وحدة vb
نسبة 1% من إطار العرض في اتجاه الحظر.
الخاصية المكافئة للخاصية غير المنطقية هي vh
.
سيتم ربط هذه الوحدات دائمًا باتجاه القراءة.
على سبيل المثال، إذا كنت تريد أن يشغل عنصر ما 80% من المساحة المضمّنة المتاحة لإطار العرض،
باستخدام وحدة vi
، سيتم تبديل الحجم تلقائيًا ليصبح من الأعلى إلى الأسفل إذا كان وضع الكتابة عموديًا.
استخدام الخصائص المنطقية بشكل عملي
إنّ الخصائص المنطقية وأوضاع الكتابة ليست فقط للتدويل. ويمكنك استخدامها لإنشاء واجهة مستخدم أكثر تنوّعًا.
إذا كان لديك مخطط يحتوي على تسميات على المحور س والمحور ص، فقد ترغب في قراءة النص الموجود على التسمية Y عموديًا.
ولأن تصنيف المحور ص في العرض التوضيحي يحتوي على writing-mode
من vertical-rl
،
يمكنك استخدام قيم margin
نفسها في كلا التصنيفين.
تنطبق قيمة margin-block-start
على كلا التصنيفين.
لأن بداية الكتلة على اليمين للمحور ص وفي الجزء العلوي للمحور س.
وتحتوي جوانب بداية الحظر على حد أحمر حتى تتمكن من رؤيتها.
حل مشكلة الرمز
الآن بعد أن تناولنا الخصائص المنطقية، يمكن تطبيق هذه المعرفة على مشكلة التصميم التي بدأنا بها.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
تم تطبيق الهامش على يمين عنصر الرمز.
من أجل أن يدعم التباعد بين الأيقونة والنص كل اتجاهات القراءة،
يجب استخدام السمة margin-inline-end
بدلاً من ذلك.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
والآن، بغض النظر عن اتجاه القراءة، سيتم وضع الأيقونة نفسها والمساحة نفسها بشكل مناسب.
التحقق من فهمك
اختبر معلوماتك عن الخصائص المنطقية
أثناء الكتابة بيدك، يتحرك معصمك على أي محور منطقي؟
block
inline
تحديد كل ما يمكن أن يستفيد من الخصائص المنطقية
أي جانب منطقي للكلمة يتم تحته خط؟