text-box-trim ב-CSS

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

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

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 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

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

צילום מסך של הדגמה של כלי הניתוחים של תחביר. הצגת הגופן ורשימה נפתחת לבחירת גופן אחר. תצוגה מקדימה של תחביר עם תיבת טקסט: תחביר אלפביתי של trim-both cap מודגש ומוצג. לבסוף, יש עוד 3 תפריטים נפתחים לבחירת ערכי חיתוך.

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

  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;
}
מוצגות שתי דוגמאות. בתמונה הראשונה מוצג אלמנט עם ריווח: 10px וחצי רווח גובה שורה. בתמונה השנייה מוצג אותו רכיב עם text-box: trim-both cap alphabetic. התוצאה היא שהלחצן השני ממורכז באופן אופטי.
https://codepen.io/web-dot-dev/pen/NPKMbgq

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

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

המשך המחקר

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