ביטול שטח מיותר מעל ומתחת לתוכן הטקסט, כדי ליצור איזון אופטי.
תאריך פרסום: 14 בינואר 2025
החל מגרסה 133 של Chrome, האפשרות text-box
מאפשרת למפתחים ולמעצבים להתאים אישית את המרחב שמעל ומתחת לטקסט.
Browser Support
כתב יד:
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
הדגמה הבאה מאפשרת לבחון את התחביר ולראות את התוצאות באמצעות תפריטים נפתחים. אתם יכולים לשנות גופנים, לשנות את ערכי החיתוך של החלק העליון והתחתון ולעקוב אחרי התמונות והתוויות בצבעים שונים.
פעולות שכדאי לנסות:
- בדיקה חזותית של האופן שבו
text-box-trim
פועל בגרסת טקסט של שורה אחת ובגרסה של טקסט בכמה שורות. - העברת העכבר מעל וריאנט כדי לראות את ערכי החיתוך ששימשו להשגת האפקט הזה.
- שינוי הגופן.
- חיתוך של צד אחד בלבד של תיבת טקסט.
- כדאי לבדוק את התחביר תוך כדי משחק.
מה אפשר ליצור בעזרתו או אילו בעיות הוא פותר?
יכולות החיתוך האלה מאפשרות לפתור כמה בעיות של מרכוז ויישור בצורה פשוטה יותר. אפשר גם להתקרב יותר למרווחים תקינים, שבהם אפשר להשתמש בסמלים כמו 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/