text-box-trim ב-CSS

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

Adam Argyle

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

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

כתב יד:

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

קיצור דרך:

text-box: trim-both cap alphabetic;

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

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

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

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

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

מגרש משחקים של Explorer

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

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

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. נסו לשנות את הטקסט ולראות איך הפריסה ממשיכה להתאים.

המשך המחקר

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

• https://codepen.io/collection/zxQBaL – אוסף ב-Codepen של כל הדגמות שלמעלה
• https://github.com/jantimon/text-box-trim-examples – מחקר ודמואים מצוינים של Jan Nicklas
• https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
• https://drafts.csswg.org/css-inline-3/#text-edges
• לא להתבלבל עם size-adjust או ascent-override https://web.dev/articles/css-size-adjust
• https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
• https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
• חלים על רכיבי HTML רבים https://codepen.io/nileshprajapati/pen/RweKdmw
• פוסט בבלוג של Safari‏ https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
• https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/