CSS text-box-trim

از بالا و پایین محتوای متنی خود فاصله بگیرید. دستیابی به تعادل نوری

آدام آرگیل

تاریخ انتشار: ۱۴ ژانویه ۲۰۲۵

از Chrome 133، text-box به توسعه دهندگان و طراحان این امکان را می دهد که فضای بالا و پایین متن را تنظیم کنند.

Browser Support

  • کروم: 133.
  • لبه: 133.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: 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 نشان می دهد زیرا برای تعادل نوری به روش های منحصر به فرد خود مفید است.

زمین بازی کاوشگر

نسخه ی نمایشی زیر به شما امکان می دهد تا سینتکس را بررسی کنید و نتایج را با استفاده از منوهای کشویی مشاهده کنید. می‌توانید فونت‌ها را تغییر دهید، مقادیر را کم و زیاد کنید و تصاویر و برچسب‌های کدگذاری‌شده رنگی را دنبال کنید.

تصویری از نسخه ی نمایشی اکسپلورر نحو. فونت و یک منوی کشویی را برای انتخاب فونت متفاوت نشان می دهد. پیش‌نمایش نحو با کادر متنی: نحو الفبای هر دو را برش دهید و نشان داده شود. در نهایت، 3 کرکره دیگر برای انتخاب مقادیر برش وجود دارد.

چیزهایی که باید امتحان کنید:

  1. بررسی بصری نحوه کار text-box-trim در انواع متن تک خطی و چند خطی.
  2. ماوس را روی یک نوع نگه می‌دارید، مقادیر برش استفاده شده برای دستیابی به آن اثر را مشاهده می‌کنید.
  3. تغییر فونت.
  4. برش دادن تنها یک طرف کادر متن.
  5. هنگام بازی، نحو را مرور کنید.
https://codepen.io/web-dot-dev/pen/RNbyooE

باهاش ​​چی بسازم یا چه مشکلاتی رو حل میکنه؟

راه‌حل‌های بسیار ساده‌تری برای مرکز و تراز کردن وجود دارد که از این قابلیت ترمیم بیرون می‌آیند. حتی می‌توانید به هدایت مناسب نزدیک‌تر شوید، جایی که چیزی شبیه gap بین محتواها می‌تواند استفاده شود.

مقایسه بین 2 گروه از محتوا نشان داده شده است. گروه اول نیمه پیشرو است، گروه دوم پیشروی را کاهش داده است. نتیجه این است که گروه دوم با هم فشرده تر می شوند.
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;
}
دو نمونه نشان داده شده است. اولی یک عنصر با بالشتک را نشان می دهد: 10 پیکسل و نیمه پیشرو. دومی همان عنصر را با جعبه متن نشان می دهد: trim-both cap alphabetic. نتیجه این است که دکمه دوم به صورت نوری در مرکز قرار می گیرد.
https://codepen.io/web-dot-dev/pen/NPKMbgq

در اینجا چند عنصر <button> وجود دارد که نشان می‌دهد چگونه کوتاه کردن فضا با text-box باعث ایجاد padding: 10px در یک عنصر تعاملی عملی از همه طرف برابر به نظر می‌رسد. توجه داشته باشید که چگونه فونت جایگزین می تواند نیمی از فضای اصلی متفاوت ایجاد کند.

سه گروه از دکمه ها نشان داده شده است. گروه اول یک فونت معمولی sans serif را نشان می دهد. گروه دوم یک فونت فانتزی یا سرگرم کننده را نشان می دهد. گروه سوم همان اثر را نشان می دهد اما با فونت دست نویس. نکته این است که نشان دهیم هر فونت دارای نیم فاصله اصلی متفاوت است، اما مقادیر برش یکسان است و می تواند فضا را عادی کند.
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

ادامه تحصیل

می خواهید بیشتر بدانید؟ لیست پیوندهای زیر مقادیر مختلفی از اطلاعات اضافی و موارد استفاده را ارائه می دهد.