הסוף ל-Margin מינוס: איך text-box-trim פותר את בעיית הפונטים בעברית

מעצבים מגישים פיגמה מושלמת.

הטקסט יושב בדיוק בגובה 16 פיקסלים מאייקון ה-Checkmark.

ואז אתם פותחים את המחשב, כותבים את ה-HTML, טוענים פונט עברי כמו "רוביק" או "אלף", ופתאום מגלים רווח נסתר של 8 פיקסלים מעל הכותרת.

התגובה הטיפוסית? margin-top: -6px.

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

המצב "לפני": האקים, המספרים הקסומים והחוב הטכנולוגי

כל פונט שמורידים מכיל מטריקות פנימיות (Font Metrics). הגופן לא מתחיל בראש האות אלא בקו דמיוני רחוק יותר, המיועד למנוע מאותיות בשורות שונות להיצמד זו לזו.

הגדרה · text-box-trim

מאפיין CSS שמנקה את ה-Line-height הריק שנוצר מעל ה-Cap Height ומתחת ל-Baseline, כך שגבול האלמנט נוגע ישירות בקצוות האותיות.

כשבונים ממשק בעברית, הבעיה חמורה פי כמה. מעצבי גופנים עבריים מוסיפים שוליים נדיבים למעלה כדי להשאיר מקום לניקוד. התוצאה בממשק יומי:

• כפתורים שבהם הטקסט נראה ירוד מדי למטה
• כותרות H1 שנראות רחוקות מהפאנל שמעליהן
• רשת כרטיסיות (Cards) עם גבהים לא אחידים
• כתיבת האקים מבוססי padding-top: 3px בתוך @media queries ספציפיות

/* הקוד הישן והחלוד שכולנו כתבנו */
.card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  margin-top: -5px; /* קוד קסם שנשבר במסכים שונים */
}

המצב "אחרי": יישור פיקסל-פרפקט ללא מאמץ

במקום לנחש כמה פיקסלים מפרידים בין גג האות אלף לבין קצה הקופסה, אנחנו אומרים לדפדפן בצורה מפורשת: "גזור את הריווח הנסתר".

כך נראה הקוד המודרני כיום ב-2026:

.card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

פתאום הכותרת נצמדת במדויק לקו ה-Padding העליון של הכרטיס. בלי חישובים. בלי מינוסים.

איך להשתמש ב-text-box-trim בפרויקטים שלכם?

המפתח להבנת המאפיין הוא השילוב בין שתי תכונות CSS:

1. text-box-trim: מגדיר איפה לגזור את השוליים (start, end, או both).
2. text-box-edge: מגדיר עד איזה קו לגזור (cap לפיסגת אותיות גדולה, ex לפיסגת אותיות קטנות, alphabetic לקו הבסיס).

הנה השוואה קצרה בין הגישות:

יישום פרקטי: כפתור עם יישור אנכי מושלם

אחד הכאבים הכי גדולים בבניית אתרים הוא ליישר טקסט עברי בתוך כפתור בצורה ממורכזת אנכית.

בעבר, display: flex; align-items: center; לא באמת מירכז את האותיות, כי הפונט הביא איתו נפח ריק נסתר מלמעלה. האותיות העבריות נראו תמיד נוטות למטה.

כעת, נטפל בזה בשלוש שורות:

.primary-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  
  /* ביטול השוליים הנסתרים */
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

התוצאה? הכפתור נראה ממורכז על הפיקסל, בכל גודל מסך ובכל פונט שתבחרו.

💡

עבודה עם Margin מינוס בשביל ליישר טקסט היא חוב טכנולוגי שנשבר ברגע שמשנים פונט או גודל מסך. text-box-trim הוא הפתרון הסטנדרטי והנקי.

סיכום

הגענו לשלב שבו אנחנו לא צריכים להילחם בדיזיין סיסטם. ב-2026 אין שום סיבה להמשיך לדחוף margin-top: -4px לכל כותרת עברית שפוגשים. תשתמשו ב-text-box-trim, תיהנו מקוד נקי, ותנו לדפדפן לעשות את העבודה עבורכם.