الخصائص المنطقية

بودكاست CSS - 012: الخصائص المنطقية

نمط واجهة المستخدم الشائع حقًا هو تسمية نصية بأيقونة مضمنة داعمة.

تقع الأيقونة على يسار النص مع وجود فجوة صغيرة بين الاثنين، المقدمة من margin-right على الرمز. هناك مشكلة على الرغم من ذلك، لأن هذا لن يعمل إلا عندما يكون اتجاه النص من اليسار إلى اليمين. إذا تغير اتجاه النص إلى من اليمين إلى اليسار - وهو طريقة قراءة اللغات مثل العربية - فسيُوضع الأيقونة مقابل النص.

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

المصطلحات

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

مسار الحظر

مسار الحظر هو الاتجاه الذي يتم فيه وضع أجزاء المحتوى. على سبيل المثال، إذا كانت هناك فقرتان، فإن تدفق الكتلة هو مكان الفقرة الثانية. في مستند إنجليزي، يكون تدفق الكتلة من أعلى إلى أسفل. فكر في هذا في سياق فقرات النص التي تتبع بعضها البعض، من أعلى إلى أسفل.

ثلاث كتل، عناصر div، مع سهم متّجه للأسفل، باسم "تدفق الكتلة"

التدفق المضمّن

التدفق المضمّن هو كيفية تدفق النص في الجملة. في مستند باللغة الإنجليزية، يكون التدفق المضمّن من اليسار إلى اليمين. إذا أردت تغيير لغة المستند في صفحة الويب إلى العربية (<html lang="ar">)، فسيكون التدفق المضمّن من اليمين إلى اليسار.

ثلاث كلمات &quot;هي تبيع الأصداف البحرية&quot;، مع سهم من اليسار إلى اليمين والاسم &quot;تدفق مضمّن&quot;

يتدفق النص في الاتجاه الذي يحدّده وضع كتابة المستند. يمكنك تغيير اتجاه عرض النص باستخدام السمة 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;
}

والآن، بغض النظر عن اتجاه القراءة، سيتم وضع الأيقونة نفسها والمساحة نفسها بشكل مناسب.

التحقق من فهمك

اختبر معلوماتك عن الخصائص المنطقية

أثناء الكتابة بيدك، يتحرك معصمك على أي محور منطقي؟

inline
فالكلمات تتدفق في الداخل ومن ثم تتحرك يدك أثناء الكتابة.
block
يتدفق المحتوى في شكل مربّعات ويتحرك معصمك على طول هذا المحور عند إنهاء أحد أنواع المحتوى وبدء نوع آخر.

تحديد كل ما يمكن أن يستفيد من الخصائص المنطقية

الألوان
لا يتغير اللون عند تغيير وضع كتابة المستند.
محاذاة
أمثلة: flex-start وblock-end وinline-start
ظلال
لا تتغير التظليل عند تغيير وضع كتابة المستند.
جوانب الصندوق
أمثلة: block-start وinline.
sizes
أمثلة: inline-size وmax-block-size.
زوايا المربع
أمثلة: border-end-end-radius.

أي جانب منطقي للكلمة يتم تحته خط؟

بداية مضمّنة
وهذا من شأنه وضع تسطير على يسار الكلمة باللغة الإنجليزية.
نهاية مضمّنة
وهذا من شأنه وضع تسطير على يمين الكلمة باللغة الإنجليزية.
بداية حظر
وهذا من شأنه وضع تسطير أعلى الكلمة باللغة الإنجليزية.
نهاية الحظر
يسعدنا أن تعرض لك خدمة مقارنة الأسعار (CSS) هذا الموضع.