از بالا و پایین محتوای متنی خود فاصله بگیرید. رسیدن به تعادل نوری
تاریخ انتشار: ۱۴ ژانویه ۲۰۲۵
از Chrome 133، text-box به توسعه دهندگان و طراحان این امکان را می دهد که فضای بالا و پایین متن را تنظیم کنند.
دراز:
text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;
کوتاه نویسی:
text-box: trim-both cap alphabetic;
این ویژگی به شما امکان می دهد فضای بالا و پایین متن را کنترل کنید، به عنوان مثال ، و . هر فونت مقدار متفاوتی از این فضای جهت بلوک را تولید می کند که به اندازه عنصر کمک می کند. این سهم فضای پر هرج و مرج به راحتی قابل اندازه گیری نیست و کنترل آن تاکنون غیرممکن بوده است.
فونت می داند، حالا CSS می داند!
فضای بالا و پایین فونت به دلیل نحوه چیدمان متن است که به آن "نیمه پیشرو" می گویند. این به طور ماهرانه ای در پستی توسط ماتیاس اوت به نام 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 نشان می دهد زیرا برای تعادل نوری به روش های منحصر به فرد خود مفید است.
زمین بازی کاوشگر
نسخه ی نمایشی زیر به شما امکان می دهد تا سینتکس را بررسی کنید و نتایج را با استفاده از منوهای کشویی مشاهده کنید. می‌توانید فونت‌ها را تغییر دهید، مقادیر را کم و زیاد کنید و تصاویر و برچسب‌های کدگذاری‌شده رنگی را دنبال کنید.
چیزهایی که باید امتحان کنید:
- بررسی بصری نحوه کار
text-box-trimدر انواع متن تک خطی و چند خطی. - ماوس را روی یک نوع نگه می‌دارید، مقادیر برش استفاده شده برای دستیابی به آن اثر را مشاهده می‌کنید.
- تغییر فونت.
- برش دادن تنها یک طرف کادر متن.
- هنگام بازی، نحو را مرور کنید.
باهاش چی بسازم یا چه مشکلاتی رو حل میکنه؟
راه‌حل‌های بسیار ساده‌تری برای مرکز و تراز کردن وجود دارد که از این قابلیت ترمیم بیرون می‌آیند. حتی می‌توانید به هدایت مناسب نزدیک‌تر شوید، جایی که چیزی شبیه gap بین محتواها می‌تواند استفاده شود.
وسط راحت تر
برای اجزای ذاتی کوچکتر، درون خطی و محتوایی بیشتر، padding: 10px یک سبک معقول برای تعیین یک عنصر برای فاصله مساوی در هر طرف است. با این حال، نتیجه می تواند افراد را گیج کند، زیرا اغلب فضای اضافی در بالا و پایین دارد.
برای حل این مشکل، توسعه دهندگان اغلب به صراحت بالشتک کمتری را در بالا و پایین (بلوک) قرار می دهند تا اثرات نیمه پیشرو را جبران کنند.
button {
padding-block: 5px;
padding-inline: 10px;
}
در این مرحله ما باید ترکیبات ارزش را امتحان کنیم تا زمانی که چیزها به صورت نوری در مرکز قرار گیرند. این ممکن است در یک صفحه و سیستم عامل خوب به نظر برسد، اما در دیگری نه.
text-box به ما این امکان را می‌دهد که نیمی از فضای پیشرو را از متن کوتاه کنیم، و مقادیر مساوی مانند 10px را مفید می‌سازد:
button {
text-box: trim-both cap alphabetic;
padding: 10px;
}
در اینجا چند عنصر وجود دارد که نشان می‌دهد چگونه کوتاه کردن فضا با text-box باعث ایجاد padding: 10px در یک عنصر تعاملی عملی از همه طرف برابر به نظر می‌رسد. توجه داشته باشید که چگونه فونت جایگزین می تواند نیمی از فضای اصلی متفاوت ایجاد کند.
در اینجا عناصر وجود دارند که اغلب برای نشان دادن دسته‌ها یا نشان‌ها استفاده می‌شوند. لحظه دیگری که در آن بالشتک یک طرفه باید بهترین راه حل باشد، اما تا text-box باید دور آن کار کنیم.
تراز آسان تر
فضای اضافی، غیرقابل کنترل و نیمه اول بالای ( over ) و زیر ( under ) یک جعبه متن نیز تراز کردن را دشوار می کند. مثال‌های زیر نشان می‌دهند که چه زمانی نیمی از پیشرو می‌تواند تراز کردن را دشوار کند و چگونه کوتاه کردن دو طرف بلوک یک جعبه متن می‌تواند ترازهای بهتری ایجاد کند.
در اینجا یک تصویر در کنار متن قرار می گیرد. تصویر تا ارتفاع مورد نیاز متن رشد می کند، اما بدون text-box ، تصویر همیشه کمی بلندتر است. با text-box ، تصویر می‌تواند کاملاً با محتوای متن هماهنگ شود.
توجه داشته باشید که فضای خالی بالای اولین خط فرمت شده متن و زیر آخرین خط فرمت شده متن در سناریوهایی با بسته بندی خط است.
در مثال زیر، توجه کنید که چگونه این ویژگی به طور منطقی با تغییر در writing-mode سازگار می شود . سعی کنید متن را تغییر دهید، تماشا کنید که چگونه طرح‌بندی همچنان در یک راستا باقی می‌ماند.
ادامه مطالعه
می خواهید بیشتر بدانید؟ لیست پیوندهای زیر مقادیر مختلفی از اطلاعات اضافی و موارد استفاده را ارائه می دهد.
- https://codepen.io/collection/zxQBaL - مجموعه کدپن از تمام دموهای بالا
- https://github.com/jantimon/text-box-trim-examples - تحقیقات و دموهای عالی توسط Jan Nicklas
- 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
- پست وبلاگ سافاری 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/