גלישת טקסט ב-CSS: יפה

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

Adam Argyle
Adam Argyle

החל מגרסה 117 של Chrome, יש לך אפשרות להשתמש בתכונה חדשה לגלישת טקסט – text-wrap: pretty מ-CSS Text Level 4.

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

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

פסקה מוצגת עם אלמנה בהתחלה ויתום בסוף, בהשוואה לאותה פסקה ללא היתומים או האלמנים.
התמונה הגיעה מ-Google Fonts — Widows יתומים

החל מגרסה 117 של Chrome, אפשר להימנע מ'יתומים' באמצעות שורה אחת של CSS: text-wrap: pretty.

התכונה עושה קצת יותר מאשר רק לוודא שפסקאות לא מסתיימות ב מילה אחת, היא מתאימה גם את המקף אם מופיעים קווים רציפים עם קווים מפרידים בסוף פסקה או משנה את השורות הקודמות כדי לפנות מקום. כמו כן, להתאים בדיוק להצדקה של הטקסט. text-wrap: pretty הוא עבור לרוב, גלישת שורות ושבירת טקסט טובה יותר, כרגע מתמקדים ביתומים. בעתיד, עשויים להופיע שיפורים נוספים ב-text-wrap: pretty.

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

יש גם text-wrap: balance, שלא מונע יתומים, אך מבטיח שהטקסט יתגלש באופן שיוצר בבלוק טקסט הרמוני. אני אישית משתמש/ת ב-balance לכותרות וב-pretty עבור בין הפסקאות.

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

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