שיפור הפריסה והקריאוּת של הטקסט

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

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

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

הטמעה

1. זיהוי רכיבי טקסט:

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

ב-text-wrap: pretty, בוחרים רכיבים שעשויים להכיל קטעי טקסט ארוכים שבהם מילים בודדות (מילים מיותמות) או מעברי שורות לא טובים בולטים במיוחד. הוא כולל את הרכיבים הבאים:

• <p>
• <blockquote>
• <li>
• כל רכיב אחר שעשוי להכיל קטעי טקסט ארוכים.

בחירת שיטת האריזה המתאימה

2. מחילים את גלישת הטקסט שנבחרה:

כדאי להחיל את text-wrap: balance במיוחד על רכיבים קצרים עם כמה שורות, כמו כותרות (h1-h6), כותרות משנה או ציטוטים מובלטים.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

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

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

מגבלות קריטיות וביצועים

text-wrap: balance

• מגבלת שורות: דפדפנים מגבילים את מספר השורות שהם מנסים לאזן כדי לשמור על הביצועים (בדרך כלל 6 שורות ב-Chromium ו-10 שורות ב-Firefox). אם הטקסט חורג מהמגבלה הזו, הדפדפן חוזר להתנהגות הרגילה של wrap. מומלץ להימנע משימוש ב-text-wrap: balance בבלוקים של טקסט שעלולים לחרוג מהמגבלות האלה.
• החלה ממוקדת: אל תפעילו את text-wrap: balance באופן גלובלי (למשל, * { text-wrap: balance; }). האלגוריתם החוזר של "חיפוש בינארי" שבו משתמשים דפדפנים דורש משאבי מחשוב רבים. הגבילו את השימוש בו לרכיבי טקסט ספציפיים וקצרים.
• אינטראקציה עם רוחב: text-wrap: balance לא משנה את רוחב המאגר (inline-size). היא משפיעה רק על האופן שבו הטקסט גולש בתוך הרוחב הזה. זה יכול להשאיר רווח ריק בסוף הקונטיינר, מה שעלול להשפיע על פריסות שמסתמכות על בלוקים של טקסט ברוחב מלא.

text-wrap: pretty

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

אסטרטגיות חלופיות

בדפדפנים שלא תומכים ב-text-wrap: balance או ב-text-wrap: pretty, המערכת מתעלמת מהמאפיין והטקסט יגלוש לפי התנהגות ברירת המחדל של wrap. זהו שיפור הדרגתי (progressive enhancement) שמופחת בצורה חיננית (graceful degradation) לטיפוגרפיה רגילה. כך התוכן שלכם יהיה קריא לחלוטין בכל הדפדפנים, ויספק חוויה מעולה בדפדפנים שתומכים בו.

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