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;
line-fit-edge: alphabetic | text;

קיצור דרך:

text-box: trim-both cap alphabetic;

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

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

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

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

מקור

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