גלישת טקסט ב-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 & Orphans

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

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

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

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

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

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