יישור טקסט מדויק

הבעיה

דפדפנים מוסיפים באופן אוטומטי רווחים מעל ומתחת לתווי טקסט כדי להתאים את גובה השורה ומדדים ספציפיים לגופן, כמו אותיות שעולות מעל השורה ואותיות שיורדות מתחת לשורה. "השטח הריק" הזה לא מאפשר להשיג יישור אנכי מושלם ברמת הפיקסל באמצעות 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. כן כדאי להשתמש בו כדי לוודא שערכי ה-CSS padding תואמים למרווח החזותי בין הטקסט לקצה של מאגר התגים.
5. אל תשתמשו בו בטקסט ארוך שבו נדרש ריווח שורות רגיל כדי שהטקסט יהיה קריא. הוא מתאים במיוחד לכותרות, ללחצנים ולתוויות בממשק המשתמש.

מדריך הטמעה

תרחיש לדוגמה 1: חיתוך של ריווח פנימי בתגים

לגופנים שונים יש מרווחים מובנים שונים מעל ומתחת לטקסט. זה יכול להקשות על התאמת העיצוב או על מרכוז הטקסט בתג באופן חזותי. כדי שהריפוד של מאגר יתאים בדיוק לטקסט, משתמשים ב-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;
}

תרחיש לדוגמה 2: טקסט ממורכז עם סמלים

כשמשתמשים ב-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;
}

תרחיש לדוגמה 3: יישור הטקסט עם הקצוות העליונים

כדי ליישר כותרת בצורה מושלמת עם החלק העליון של תמונה או אלמנט דקורטיבי סמוך, משתמשים ב-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 הוא שיפור הדרגתי (progressive enhancement). בדפדפנים שלא תומכים בתכונה הזו, הטקסט יוצג עם המרווח בין השורות שמוגדר כברירת מחדל. הפריסה עדיין תהיה פונקציונלית, אבל קצת פחות מדויקת. אין צורך בקוד חלופי מיוחד כי דפדפנים ישנים מתעלמים מהמאפיינים האלה.

שיקולים נוספים

1. מדדי גופנים: לגופנים שונים יש מדדים פנימיים שונים. הערך cap alphabetic הוא ברירת מחדל אמינה, אבל יכול להיות שגופנים או תרחישי שימוש מסוימים ידרשו את הערך ex (גובה x) כדי לשפר את היישור של אותיות קטנות.
2. טקסט עם כמה שורות: החיתוך חל על השורה הראשונה והאחרונה של הבלוק. הפעולה לא משפיעה על קווים פנימיים.