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

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

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 — אלמנים ויתומים

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

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

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

מקור התמונה הוא למה צריך להסיר יתומים מגוף הטקסט.

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

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

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