تراز نوشتار دقیق

مشکل

مرورگرها به‌طور خودکار فضای خالی اضافی در بالا و پایین نویسه‌های نوشتار اضافه می‌کنند تا ارتفاع خط و سنجه‌های خاص قلم مانند حروف صعودی و نزولی را در خود جای دهند. این «فضای شبح» باعث می‌شود که دستیابی به تراز عمودی کامل پیکسل بااستفاده از CSS استاندارد غیرممکن شود.

چند نمونه از مسائل رایج:

• نمادهای نامرتب: نوشتار ازنظر بصری پایین‌تر یا بالاتر از نماد مجاور نشان داده می‌شود، حتی هنگام استفاده از align-items: center.
• لایی‌گذاری نادرست: دکمه‌ای با padding: 12px به‌دلیل فاصله خطوط داخلی قلم، ازنظر بصری فضای بیشتری در بالا یا پایین دارد.
• تراز کردن هم‌سطح: نمی‌توانید بالای حرف بزرگ را دقیقاً با بالای ظرف یا تصویر مجاور تراز کنید، مگر اینکه از حاشیه‌های منفی «عدد جادویی» استفاده کنید.

راه‌حل

ویژگی‌های text-box-trim و text-box-edge (کوته‌نوشت text-box) به شما امکان می‌دهند این فاصله داخلی را براساس معیارهای خاص قلم کوتاه کنید. با برش دادن چارگوش نوشتاری به ارتفاع حروف بزرگ (بالای حروف بزرگ) و خط مبنای الفبایی (پایین اکثر حروف)، می‌توانید مطمئن شوید که چارگوش مرزی عنصر با محتوای دیداری آن مطابقت دارد.

راهبرد پیاده‌سازی

1. اجباری: text-box-trim: trim-both (یا خلاصه text-box) را برای عنصر حاوی نوشتار اعمال کنید.
2. اجباری: مشخص کنید کدام سنجه‌ها برای برش با text-box-edge استفاده شود. برای اکثر ترازهای میانای کاربر، از cap alphabetic استفاده کنید.
3. باید از این برای دستیابی به مرکزیت عمودی دیداری در محفظه‌های flex یا grid استفاده کنید.
4. باید از آن استفاده کنید تا مطمئن شوید مقادیر padding CSS با فاصله بصری بین نوشتار و لبه ظرف مطابقت دارد.
5. از آن در نوشتار اصلی طولانی که فاصله‌گذاری خطی سنتی برای خوانایی ضروری است استفاده نکنید. این قلم برای عنوان‌ها، دکمه‌ها، و برچسب‌های واسط کاربر مناسب‌تر است.

راهنمای پیاده‌سازی

مورد استفاده ۱: برش دادن فاصله داخلی برای نشان‌ها

قلم‌های مختلف دارای مقادیر متفاوتی از فاصله‌گذاری داخلی در بالا و پایین نوشتار هستند. این امر می‌تواند چالش‌هایی را در مطابقت دادن طراحی یا در وسط قرار دادن نوشتار در نشان به‌صورت دیداری ایجاد کند. وقتی می‌خواهید لایه‌گذاری محفظه دقیقاً نوشتار را دربرگیرد، از text-box: trim-both cap alphabetic استفاده کنید. این امر به‌ویژه برای مؤلفه‌های متراکم واسط کاربر مانند نشان‌ها یا برچسب‌ها مفید است. این کار باعث می‌شود حاشیه داخلی دقیقاً از لبه نوشتار در همه طرف شروع شود.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

مورد استفاده ۲: وسط‌چین کردن نوشتار با نمادها

هنگام استفاده از Flexbox برای تراز کردن نوشتار و نمادها، «فضای خالی» اغلب باعث می‌شود نوشتار کمی خارج از مرکز به‌نظر برسد. برش دادن چارگوش باعث می‌شود موتور چیدمان از ارتفاع واقعی حرف قابل‌مشاهده برای تراز کردن استفاده کند.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

مورد استفاده ۳: تراز کردن نوشتار با لبه‌های بالا

برای تراز کردن کامل عنوان با بالای تصویر یا عنصر تزئینی مجاور، از trim-start cap alphabetic استفاده کنید. بااینکه پایان برش داده نخواهد شد، لبه پایان باید تعریف شود.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

روال‌های مطلوب

• باید از کوته‌نوشت text-box برای خلاصه کردن استفاده کنید: text-box: <trim-direction> <edges>.
• باید همیشه هر دو لبه را مشخص کنید، حتی اگر فقط یک لبه برش داده شود (مگر اینکه از لبه پیش‌فرض text استفاده کنید).
• باید با line-height ترکیب شود تا فاصله‌گذاری کنترل شود. برش دادن، فاصله قبل‌از خط اول و آخر نوشتار را حذف می‌کند، اما line-height همچنان بر فاصله بین خطوط در نوشتار چندخطی تأثیر می‌گذارد.
• نباید برای همه عناصر اعمال شود. فقط در جایی از آن استفاده کنید که تراز دقیق لازم باشد.

راهبردهای جایگزین

‫text-box یک ارتقای پیش‌رو است. در مرورگرهایی که از آن پشتیبانی نمی‌کنند، نوشتار به‌سادگی با فاصله خطوط پیش‌فرض خود ارائه می‌شود. چیدمانتان همچنان کار خواهد کرد، اما دقت آن کمی کمتر خواهد بود. هیچ کد بازگشتی خاصی لازم نیست زیرا ویژگی‌ها به‌طور ایمن توسط مرورگرهای قدیمی‌تر نادیده گرفته می‌شوند.

ملاحظات دیگر

1. سنجه‌های قلم: قلم‌های مختلف سنجه‌های داخلی متفاوتی دارند. cap alphabetic پیش‌فرض قابل‌اعتمادی است، اما برخی قلم‌ها یا موارد استفاده ممکن است برای تراز بهتر حروف کوچک به ex (ارتفاع x) نیاز داشته باشند.
2. نوشتار چندخطی: پیرایش روی خط اول و آخر بلوک اعمال می‌شود. خطوط داخلی تحت تأثیر قرار نمی‌گیرند.