text-box-trim ב-CSS

Adam Argyle

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

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

Browser Support

• 133
• 133
• x
• 18.2

Source

כתב יד:

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

Shorthand:

text-box: trim-both cap alphabetic;

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

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

אפשר לנסות את זה ב-CodePen

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

כותרת מוצגת עם פס ורוד בוהק מעל הטקסט ומתחתיו כדי להדגים חצי מרווח. מקור

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

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

מגרש משחקים של מגלה נסתרות

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

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

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

1. בדיקה ויזואלית של אופן הפעולה של text-box-trim בגרסאות טקסט של שורה אחת ושל כמה שורות.
2. העברת העכבר מעל וריאנט כדי לראות את ערכי החיתוך ששימשו ליצירת האפקט הזה.
3. שינוי הגופן.
4. חיתוך רק צד אחד של תיבת טקסט.
5. בודקים את התחביר במהלך ההפעלה.

אפשר לנסות את זה ב-CodePen

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

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

בקבוצה הראשונה יש חצי מרווח בין השורות, ובקבוצה השנייה המרווח בין השורות קוצץ. התוצאה היא שהקבוצה השנייה צפופה יותר. רוצים לנסות את זה ב-CodePen?

קל יותר למרכז

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

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

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

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

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

הקבוצה השנייה של התגים צפופה יותר וממוקמת במרכז מבחינה אופטית, בזכות הקיצוץ של הרווחים המובילים.

יישור קל יותר

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

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

אפשר לנסות את זה ב-CodePen

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

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

אפשר לנסות את זה ב-CodePen

המשך הלימודים

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

• אוסף Codepen של כל ההדגמות.
• מחקר והדגמות מצוינים של יאן ניקלאס.
• Two CSS Properties for Trimming Text Box Whitespace באתר CSS Tricks.
• CSS Inline Layout on text edges.
• לא להתבלבל עם size-adjust או ascent-override
• CSS Baseline: The Good, The Bad And The Ugly.
• המאפיין מוחל על הרבה רכיבי HTML: CodePen.
• הפוסט בבלוג של Safari
• למה אני מתלהב מהאפשרות לחתוך תיבות טקסט כמעצב