‏پنج ویژگی CSS برای تایپوگرافی بهتر

پریتی سام تو مقاله‌ای در master.dev می‌گه انتخاب فونت فقط شروع کاره؛ وزن و فاصله و تزئین متن خیلی جاها جواب می‌ده، ولی گاهی برای اینکه نوشته مثل طراحی گرافیکی یه پوستر توی چشم بزنه به چیزی بیشتر نیاز داریم. اون پنج ویژگی CSS رو معرفی می‌کنه که پیاده‌سازی‌شون ساده‌ست و می‌شه روی ایده‌های دیگه سوارشون کرد.

مقدار text برای background-clip از اواخر دههٔ ۲۰۰۰ اجازه می‌ده تصویر یا گرادیان داخل خودِ حروفِ زنده ماسک بشه؛ نتیجه یه متن خواناست که به‌جای رنگ یکدست، تصویر داخل حروفش دیده می‌شه. کافیه رنگ متن رو شفاف کنی تا پس‌زمینهٔ بریده‌شده از پشت دیده بشه:

p {
  /* `background-clip: text` included in the shorthand */
  background: text url("image.jpg") center/auto 1lh;
  /* transparent text so that the clipped background is visible underneath */
  color: transparent;
}

نویسنده یادآوری می‌کنه vertical-align که میراث دوران چیدمان با جدول‌هاست، بیرون از سلول جدول واقعاً متن رو عمودی وسط‌چین نمی‌کنه؛ کارش هم‌تراز کردن عناصر inline مثل span و img نسبت به خط متنه. اون کاری که همه فکر می‌کردن vertical-align انجام می‌ده، حالا با align-content شدنیه — که غیر از فلکس‌باکس و گرید، روی باکس بلاک هم اثر می‌ذاره:

p {
  width: 360px;
  aspect-ratio: 1;
  text-align: center;
  /* No grid or flexbox needed anymore */
  align-content: center;
}

سه ویژگی دیگه هرکدوم یه گوشهٔ خاص رو می‌گیرن. box-decoration-break: clone وقتی خط متن می‌شکنه، لبه‌های شکسته رو هم مثل بقیه استایل می‌ده تا بوردر و سایه یکدست بمونه. letter-spacing نزدیک‌ترین چیزیه به هدف گرفتن تک‌تک حروف — چون فاصلهٔ انتهایی همهٔ گلیف‌ها رو تعیین می‌کنه — و با مقدار منفی و کمی انیمیشن، افکت ظاهرشدن متن می‌سازه. text-combine-upright هم مخصوص تایپوگرافی شرق آسیاست و فقط با حالت نوشتار عمودی کار می‌کنه، ولی تو زبان‌های چپ‌به‌راست برای جا دادن یه تکه متن افقی داخل نوشتهٔ عمودی به درد می‌خوره.

نکات کلیدی:

• background-clip: text تصویر یا گرادیان رو داخل حروف ماسک می‌کنه؛ رنگ متن باید شفاف باشه
• vertical-align برای هم‌تراز کردن عناصر inline با خط متنه، نه وسط‌چین عمودی
• align-content حالا روی باکس بلاک هم کار می‌کنه و نیازی به گرید یا فلکس نیست
• box-decoration-break: clone استایل لبه‌های خط‌های شکسته رو یکدست می‌کنه
• letter-spacing با مقدار منفی و ترنزیشن، افکت ظاهرشدن متن می‌ده
• text-combine-upright فقط تو حالت نوشتار عمودی معنی داره