text-box-trim ב-CSS

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

Adam Argyle

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

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

Browser Support

• 133
• 133
• x
• 18.2

כתב יד:

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 יודע!

https://codepen.io/web-dot-dev/pen/xbKjRxL

המרווח שמעל ומתחת לגופן נובע מהאופן שבו הטקסט מוצג באינטרנט, שנקרא 'רווח חצי-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. כדאי לבדוק את התחביר תוך כדי משחק.

https://codepen.io/web-dot-dev/pen/RNbyooE

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

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

https://codepen.io/web-dot-dev/pen/RNbyoKE

מרכוז קל יותר

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

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

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

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

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

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

https://codepen.io/web-dot-dev/pen/NPKMbgq

הערה: בדוגמאות הבאות יוצגו גופן רגיל ללא serif וגופן חלופי מעוצב או 'כיפי'. הצגת כמה גופנים תעזור להמחיש את היכולות הדינמיות של 'text-box' ואת האופן שבו הוא פועל במשפחת גופנים שונות.

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

https://codepen.io/web-dot-dev/pen/mybLOMg

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

https://codepen.io/web-dot-dev/pen/mybLOMg

יישור קל יותר

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

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

https://codepen.io/web-dot-dev/pen/yyBjVpg

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

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

https://codepen.io/web-dot-dev/pen/dPbeOJQ

המשך המחקר

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

• 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/