הגדירו גלישת טקסט שעברה אופטימיזציה, כדי לשמור על יופי על פני מהירות.
החל מגרסה 117 של Chrome אפשר להשתמש בתכונה חדשה של גלישת טקסט –text-wrap: pretty
מ-CSS Text Level 4.
p {
text-wrap: pretty;
}
אלמנים ויתומים טיפוגרפיים הן מילים בודדות שעומדות בפני עצמן בסוף פסקה או גוש טקסט. אלמנות הן מילים לבדן בחלק העליון של קטע טקסט, ויתומים נמצאים לבד בסוף קטע הטקסט. הן יכולות להפריע לצורך שבעיניים שלנו מרפרפות בטקסט, ולהקשות על הקריאה של התוכן. חלק מהמעצבים נמנעים מלהציג אותם בכל מחיר ועושים מאמצים רבים כדי למנוע מהם.
החל מגרסה 117 של Chrome, אפשר להימנע ממתן יתומים באמצעות שורה אחת של CSS: text-wrap: pretty
.
התכונה עושה קצת יותר מאשר רק לוודא שפסקאות לא יסתיימו במילה אחת, היא גם מתאימה את המקף אם קווים רציפים עם מקף מופיעים בסוף פסקה או מתאימים את השורות הקודמות כדי לפנות מקום. הוא גם יותאם להצדקה של הטקסט. text-wrap: pretty
מיועד בדרך כלל לעטיפת שורות ולפיצול טקסט טובים יותר, שמתמקד כרגע ביתומים.
בעתיד, יכול להיות שנציע ב-text-wrap: pretty
שיפורים נוספים.
![השוואה בין פסקה עם יתומים לבין פסקה ללא יתומים, כשלכל אחת יש תג רע או טוב.](https://developer.chrome.com/static/blog/css-text-wrap-pretty/image/a-comparison-a-paragraph-8806ede4d3829.png?authuser=5&hl=he)
יש גם את הקוד text-wrap: balance
, שלא מונע יתומים, אבל כן מבטיח שהטקסט גולש באופן שיוצר גוש טקסט הרמוני. אני משתמש באופן אישי ב-balance
לכותרות, וב-pretty
לפסקאות.
אם אתם מעוניינים בפרטים על האלגוריתם המשמש לקביעת מספר השורות האופטימלי, או שיקולי הביצועים, זהו קישור למסמך העיצוב שיצר המהנדס שמאחורי התכונה Koji Ishii.
אם יש לכם הצעות או שיפורים נוספים של מעבר שורה, נשמח לשמוע אותם. דווחו על בעיה במעקב אחר באגים ב-Chromium וציינו בה את הפרטים ודוגמאות למעברי שורה תקינים או לא תקינים, ונחזור אליכם.