CSS text-box-trim

Adam Argyle

Published: Jan 14, 2025

اعتبارًا من Chrome 133، تتيح السمة text-box للمطوّرين والمصمّمين تخصيص المساحة أعلى النص وأسفله.

Longhand:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Shorthand:

text-box: trim-both cap alphabetic;

تتيح لك هذه السمة التحكّم في المساحة أعلى النص وأسفله، على سبيل المثال <h1> و<button> و<p>. ينتج كل خط مقدارًا مختلفًا من هذه المساحة الاتجاهية للكتلة، ما يساهم في تحديد حجم العنصر. لا يمكن قياس مساهمة هذه المساحة غير المنتظمة بسهولة، وكان من المستحيل التحكّم فيها حتى الآن.

يعرف الخط الآن، وتعرف CSS أيضًا.

تنتج المساحة أعلى الخط وأسفله بسبب طريقة عرض الويب للنص، والتي تُعرف باسم "نصف المسافة بين الأسطر". تم تناول هذا الموضوع ببراعة في مشاركة من تأليف Matthias Ott بعنوان The Thing With Leading In CSS. في الأساس، عند إجراء التنضيد يدويًا، كانت تُستخدم قطع من الرصاص المعدني لفصل أسطر النص. يستوحي الويب من هذه العملية، ويقسم الرصاص إلى قطعتَين ويوزّع قطعة أعلى المحتوى وقطعة أسفله.

هذا السجلّ مهم لأنّ text-box يمنحنا أسماء لكل نصف: over وunder. بالإضافة إلى إمكانية إزالة هذه المساحة.

هناك أيضًا معلومات اختراع سابق لـ text-box، فقد تتذكّر المشاركة المثيرة من Ethan Wang بعنوان Leading-Trim: The Future Of Digital Typesetting، حيث تم تقديم leading-trim (الاسم السابق لـ text-box) لأول مرة.

قد يكون نقطة دخولك إلى ميزة إزالة المساحة من النص من Figma وعناصر التحكّم في "الإزالة العمودية" للمصمّمين. توضّح مشاركة X هذه مكان خيار الإزالة العمودية وكيف يكون مفيدًا للأزرار.

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

الميزة والصيغة

في ما يلي، في رأيي، السطران الأكثر شيوعًا اللذان ستحتاج إليهما عند استخدام text-box:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

ستكون إزالة المساحة من كلٍّ من cap alphabetic هي الاستخدام الأكثر شيوعًا لهذه الميزة. تستخدم العروض التوضيحية التالية هذه الميزة عدة مرات. ومع ذلك، يعرض المثال السابق أيضًا ex alphabetic لأنّه مفيد لتحقيق التوازن البصري بطرقه الفريدة.

ملعب المستكشف

استكشِف الصيغة في ملعبنا، واطّلِع على النتائج باستخدام القوائم المنسدلة. يمكنك تغيير الخطوط وتغيير قيم الإزالة أعلى النص وأسفله، ومتابعة العناصر المرئية والتصنيفات المرمّزة بالألوان.

الأشياء التي يجب تجربتها:

1. فحص طريقة عمل text-box-trim بصريًا في خيارات النص المكوّن من سطر واحد والنص المكوّن من أسطر متعددة.
2. توجيه مؤشر الماوس فوق أحد الخيارات، والاطّلاع على قيم الإزالة المستخدَمة لتحقيق هذا التأثير.
3. تغيير الخط
4. إزالة المساحة من جانب واحد فقط من مربّع النص
5. مراجعة الصيغة أثناء اللعب

ما الذي يمكنني إنشاؤه وما المشاكل التي تحلّها هذه الميزة؟

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

توسيط أسهل

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

لتجنُّب ذلك، غالبًا ما يضع المطوّرون مساحة أقل في الأعلى والأسفل (الكتلة) لتعويض تأثيرات نصف المسافة بين الأسطر.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

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

تتيح لنا text-box إزالة نصف المسافة بين الأسطر من النص، ما يجعل قيم مساحة التعبئة المتساوية مثل 10px مفيدة:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

في ما يلي بعض عناصر <button> التي توضّح كيف أنّ إزالة المساحة باستخدام text-box تجعل padding: 10px تبدو متساوية على جميع الجوانب في عنصر تفاعلي عملي. لاحظ كيف يمكن أن ينتج الخط البديل مساحة مختلفة تمامًا لنصف المسافة بين الأسطر.

في ما يلي عناصر <span>، التي تُستخدم غالبًا لعرض الفئات أو الشارات. هذه لحظة أخرى يجب أن تكون فيها مساحة التعبئة المتساوية الجوانب هي الحل الأفضل، ولكن حتى text-box كان علينا إيجاد حل بديل.

محاذاة أسهل

تؤدي المساحة الإضافية غير القابلة للتحكّم لنصف المسافة بين الأسطر أعلى (over) وأسفل (under) مربّع النص أيضًا إلى صعوبة المحاذاة. توضّح الأمثلة التالية متى يمكن أن تجعل نصف المسافة بين الأسطر المحاذاة صعبة وكيف يمكن أن تؤدي إزالة المساحة من جوانب الكتلة في مربّع النص إلى إنشاء محاذاة أفضل.

هنا يتم وضع صورة بجانب النص. تزداد الصورة إلى الارتفاع الذي يحتاج إليه النص. بدون text-box، تكون الصورة دائمًا أطول قليلاً. باستخدام text-box، يمكن أن تتم محاذاة الصورة تمامًا مع محتوى النص.

لاحظ أنّ المسافة البيضاء تكون أعلى السطر الأول من النص المنسّق وأسفل السطر الأخير من النص المنسّق في السيناريوهات التي تتضمّن التفاف الأسطر.

في المثال التالي، لاحظ كيف تتكيّف الميزة منطقيًا مع تغيير في writing-mode. جرِّب تغيير النص، ولاحظ كيف تظلّ طريقة العرض محاذية.

مواصلة الدراسة

هل تريد معرفة المزيد من المعلومات؟ تقدّم قائمة الروابط التالية قدرًا مختلفًا من المعلومات الإضافية وحالات الاستخدام.

• مجموعة Codepen لجميع العروض التوضيحية.
• أبحاث وعروض توضيحية رائعة من Jan Nicklas
• سمتان من CSS لإزالة المسافة البيضاء في مربّع النص على CSS Tricks
• تنسيق CSS المضمّن على حواف النص.
• يجب عدم الخلط بين أو size-adjust أو ascent-override
• CSS Baseline: The Good, The Bad And The Ugly
• تم تطبيقها على العديد من عناصر HTML: CodePen.
• مشاركة المدونة في Safari.
• لماذا أنا متحمّس بشأن text-box-trim كمصمّم؟