text-box-trim ב-CSS

Adam Argyle

תאריך פרסום: 14 בינואר 2025

החל מ-Chrome 133, ‏ text-box מאפשר למפתחים ולמעצבים להתאים אישית את הרווח שמעל הטקסט ומתחתיו.

כתב יד:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Shorthand:

text-box: trim-both cap alphabetic;

המאפיין הזה מאפשר לשלוט במרווח שמעל ומתחת לטקסט, למשל <h1>, <button> ו-<p>. כל גופן יוצר כמות שונה של מרווח כיווני בבלוק, שמשפיע על הגודל של הרכיב. קשה למדוד את המרווח הזה, ועד עכשיו לא הייתה אפשרות לשלוט בו.

הגופן יודע, ועכשיו גם ה-CSS יודע.

הרווח מעל ומתחת לגופן נוצר בגלל האופן שבו הטקסט מוצג באינטרנט, שנקרא 'חצי מרווח'. הנושא הזה מוסבר בצורה מעולה בפוסט של Matthias Ott שנקרא The Thing With Leading In CSS. בעיקרון, כשסידור האותיות נעשה ידנית, השתמשו בחתיכות של עופרת מתכתית כדי להפריד בין שורות הטקסט. האינטרנט, בהשראת המוביל, מפצל את ההובלה לשני חלקים ומפיץ חלק אחד מעל התוכן וחלק אחד מתחת לתוכן.

ההיסטוריה הזו חשובה כי text-box נותן לנו שמות לכל מחצית: מעל ומתחת. בנוסף, יש אפשרות לחתוך את החלקים האלה.

יש גם פריט מידע קודם שקשור ל-text-box. אולי תזכרו את הפוסט המעניין של איתן וואנג שנקרא Leading-Trim: The Future Of Digital Typesetting, שבו הוצג לראשונה leading-trim (השם הקודם של text-box).

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

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

תכונה ותחביר

לדעתי, אלה שני משפטי הפתיחה הכי נפוצים שתצטרכו כשאתם עובדים עם text-box:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

השימוש הנפוץ ביותר בתכונה הזו יהיה חיתוך של שני הסרטונים ל-cap alphabetic. ההדגמות הבאות משתמשות בפרמטר הזה הרבה פעמים. עם זאת, בדוגמה הקודמת מופיע גם ex alphabetic כי הוא שימושי לאיזון אופטי בדרכים ייחודיות משלו.

מגרש משחקים של כלי המחקר

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

פעולות שכדאי לנסות:

1. בדיקה ויזואלית של אופן הפעולה של text-box-trim בגרסאות טקסט של שורה אחת ושל כמה שורות.
2. להעביר את העכבר מעל וריאנט כדי לראות את ערכי החיתוך ששימשו ליצירת האפקט הזה.
3. שינוי הגופן.
4. חיתוך רק צד אחד של תיבת טקסט.
5. בודקים את התחביר במהלך ההפעלה.

מה אפשר לבנות ואילו בעיות אפשר לפתור?

יש פתרונות פשוטים הרבה יותר למיקום במרכז וליישור, שמתאפשרים בזכות היכולת הזו לחיתוך. אפשר אפילו להתקרב לריווח תקין בין שורות, כשמשתמשים בתווים כמו gap בין חלקי התוכן.

קל יותר למרכז

לרכיבים קטנים יותר, שמוצגים בשורה עם תוכן אחר, padding: 10px הוא סגנון סביר לציין עבור רכיב כדי ליצור מרווח שווה מכל הצדדים. עם זאת, התוצאה עלולה לבלבל אנשים, כי לעיתים קרובות יש מרווח נוסף בחלק העליון והתחתון.

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

button {
  padding-block: 5px;
  padding-inline: 10px;
}

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

הפונקציה text-box מאפשרת לנו להסיר את הרווח המוביל מהטקסט, וכך להשתמש בערכי ריווח שווים כמו 10px:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

הנה כמה רכיבי <button> שמראים איך חיתוך הרווח באמצעות text-box גורם לרכיב padding: 10px להיראות שווה מכל הצדדים ברכיב אינטראקטיבי מעשי. שימו לב איך הגופן החלופי יכול ליצור רווחים שונים מאוד בין השורות.

הנה <span> רכיבים, שלרוב משמשים להצגת קטגוריות או תגים. דוגמה נוספת שבה הפתרון הכי טוב הוא ריווח שווה מכל הצדדים, אבל עד שפיתחנו את text-box נאלצנו להשתמש בפתרונות עקיפים.

יישור קל יותר

גם הרווח הנוסף, הבלתי נשלט, של חצי שורה מעל (over) ומתחת (under) לתיבת טקסט מקשה על היישור. בדוגמאות הבאות אפשר לראות מקרים שבהם קשה ליישר טקסט בגלל המרווח בין השורות, ואיך חיתוך הצדדים של תיבת טקסט יכול ליצור יישור טוב יותר.

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

שימו לב שיש רווח לבן מעל השורה הראשונה של הטקסט המעוצב ומתחת לשורה האחרונה של הטקסט המעוצב בתרחישים עם גלישת שורות.

בדוגמה הבאה אפשר לראות איך התכונה מסתגלת באופן לוגי לשינוי בwriting-mode. כדאי לנסות לשנות את הטקסט ולראות איך הפריסה נשארת מיושרת.

להמשך הלימוד

רוצים לדעת יותר? בקישורים הבאים תוכלו לקרוא מידע נוסף על תרחישי שימוש שונים.

• אוסף הדגמות ב-Codepen
• מחקר והדגמות מצוינים מאת Jan Nicklas.
• Two CSS Properties for Trimming Text Box Whitespace באתר CSS Tricks.
• CSS Inline Layout on text edges.
• לא להתבלבל עם size-adjust או ascent-override
• ‫CSS Baseline: The Good, The Bad And The Ugly.
• המאפיין הזה חל על הרבה רכיבי HTML: CodePen.
• הפוסט בבלוג של Safari
• למה אני מתלהב מהאפשרות של חיתוך תיבות טקסט כמעצב