CSS text-box-trim

استخدِم المساحة الفارغة أعلى محتوى النص وأسفله لتحقيق التوازن البصري.

Adam Argyle

تاريخ النشر: 14 كانون الثاني (يناير) 2025

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

Browser Support

• 133
• 133
• x
• 18.2

الكتابة اليدوية:

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

الاختصارات:

text-box: trim-both cap alphabetic;

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

يعرِف الخط ذلك، والآن يعرفه CSS.

https://codepen.io/web-dot-dev/pen/xbKjRxL

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

المصدر

وهذا التاريخ مهم لأنّ text-box تمنحنا أسماء لكل نصف: فوق وتحت. بالإضافة إلى ذلك، يمكنك اقتصاصه.

هناك أيضًا عمل فني سابق لـ text-box، وقد تتذكر المشاركة المثيرة من "إيثان وانغ" بعنوان 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. راجِع بنية الجملة أثناء تشغيلها.

https://codepen.io/web-dot-dev/pen/RNbyooE

ما الذي يمكنني إنشاؤه باستخدامه أو ما هي المشاكل التي يحلّها؟

تتوفّر بعض حلول المحاذاة والتوسيط البسيطة جدًا التي تنتج عن ميزة الاقتصاص هذه. يمكنك أيضًا الاقتراب من المسافة المناسبة بين العناصر، حيث يمكن استخدام رمز مثل gap بين العناصر.

https://codepen.io/web-dot-dev/pen/RNbyoKE

توسيع نطاق التركيز بسهولة أكبر

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

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

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

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

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

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

https://codepen.io/web-dot-dev/pen/NPKMbgq

ملاحظة: ستعرض الأمثلة التالية خطًا عاديًا بدون خطوط مُسنّنة وخطًا بديلاً أنيقًا أو مرحًا. سيساعد عرض خطوط متعددة في توضيح الإمكانات الديناميكية لعنصر "مربّع النص" وكيفية عمله في جميع مجموعات الخطوط.

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

https://codepen.io/web-dot-dev/pen/mybLOMg

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

https://codepen.io/web-dot-dev/pen/mybLOMg

محاذاة أسهل

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

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

https://codepen.io/web-dot-dev/pen/yyBjVpg

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

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

https://codepen.io/web-dot-dev/pen/dPbeOJQ

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

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

• https://codepen.io/collection/zxQBaL: مجموعة على Codepen تتضمّن جميع العروض التوضيحية أعلاه
• https://github.com/jantimon/text-box-trim-examples: أبحاث وعروض توضيحية رائعة من إعداد "يان نيكلاس"
• https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
• https://drafts.csswg.org/css-inline-3/#text-edges
• يجب عدم الخلط بينه وبين size-adjust أو ascent-override https://web.dev/articles/css-size-adjust
• https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
• https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
• يتم تطبيقها على العديد من عناصر HTML https://codepen.io/nileshprajapati/pen/RweKdmw
• مشاركة مدوّنة Safari‏ https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
• https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/