מאפיין CSS חדש בשם text-box-trim הגיע לדפדפנים שכבר תומכים בו, ומאפשר למפתחים להיפטר מהאקרובטיקה של ה-line-height שהייתה חלק בלתי נפרד מעבודת UI במשך שנים. על ידי חיתוך ה-padding הבלתי נראה שיושב מעל ה-cap height של הגופן ומתחת ל-baseline שלו, המאפיין הופך את היישור הוורטיקלי של הטקסט לצפוי בדיוק כמו הגדרת רוחב או צבע.

למה הבעיה הייתה חשובה

לכל גופן (typeface) יש "מרחב רפאים" (ghost space): כמה פיקסלים מעל האותיות הגדולות הגבוהות ביותר וכמה מתחת לשורה שעליה יושבות האותיות. המרחב הזה אינו נראה לעין, אך הוא דוחף את התווית של כפתור למעלה או למטה, גורם לכותרת לא להתיישר עם קצה של אייקון, ומאלץ מעצבים להוסיף "מספרים קסמים" כדי לפצות על כך. צוותים בנו מערכות ריווח שלמות — design tokens, utility classes וספריות רכיבים — סביב ההתאמות הללו, מכיוון שהדפדפן לא סיפק דרך להסיר את ה-padding באופן ישיר.

הפתרונות המקובלים בעבר

לפני text-box-trim, מפתחים נהגו בדרך כלל:

  • לחשב line-height מותאם אישית שניסה לאזן את המרחב הנוסף.
  • להחיל margins שליליים כדי למשוך את הטקסט למעלה או למטה.
  • להעתיק מספרים מקבצי עיצוב ולהטמיע אותם כ-hard-coded בתוך ה-CSS.

הטריקים האלו עובדים, אך הם שבירים. אם משנים את הגופן, את המשקל (weight) או את השפה, המספרים נשברים, מה שמוביל לאלמנטים UI לא מיושרים ולנטל תחזוקה שמשפיע על כל בסיס הקוד.

איך text-box-trim משנה את חוקי המשחק

text-box-trim אומר לדפדפן לחתוך את תיבת הטקסט לגבולות הגליפים (glyphs) בפועל. המאפיין מקבל ערכים המציינים אילו קצוות לחתוך, בעוד המאפיין הנלווה text-box-edge מגדיר את קצה הייחוס עבור

text-box-trim מעניקה סוף סוף לפלטפורמת הווב דרך טבעית ליישור טקסט אנכי, ללא פתרונות עוקפים (workarounds) מלאי "האקים" שהעמיסו על גיליונות העיצוב במשך שנים. מאמצים מוקדמים יכולים לנקות רכיב בודד, להוכיח את השיפור הוויזואלי, ולאחר מכן להרחיב את השימוש ככל שתמיכת הדפדפנים תתרחב. התעלמות ממנו כעת משמעותה המשך כתיבה ותחזוקה של קוד שביר עבור בעיה שהדפדפן מוכן כעת לפתור.