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

بودكاست 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;
}

يؤدي ذلك إلى إضافة بعض inline-space داخل المساحة باستخدام padding ويدفعه للخارج من inline-start مع 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 إلى تبديل هذا الحجم تلقائيًا ليصبح من أعلى إلى أسفل إذا كان وضع الكتابة عموديًا.

استخدام الخصائص المنطقية عمليًا

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

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

بما أنّ تصنيف المحور "ص" في العرض التوضيحي يحتوي على 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
يتدفق المحتوى في شكل قوالب ويتحرك معصمك على طول هذا المحور عند إنهاء أحد أنواع المحتوى وبدء نوع آخر.

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

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

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

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