CSS text-wrap: balance

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

Adam Argyle

הערך balance של המאפיין text-wrap הוא חלק מ-CSS Text Level 4. בדוגמאות שבהמשך הפוסט אפשר לראות איך שורה אחת של CSS יכולה לשפר משמעותית את פריסות הטקסט.

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

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

.unbalanced {
  max-inline-size: 50ch;
}

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

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

כדאי לראות אותם זה לצד זה, ללא תנועה וללא מידע על ניפוי באגים.

העין שלכם תהנה הרבה יותר מבלוק הטקסט המאוזן. הוא מושך יותר תשומת לב וקל יותר לקריאה.

למצוא את האיזון

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

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

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

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

כותרות מאוזנות

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

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

יכול להיות שהחלת הסגנון הזה לא תספק את התוצאות שציפיתם להן, כי הטקסט צריך להופיע בשורות עוקבות, ולכן צריך להגדיר לו אורך שורה מקסימלי. בדוגמאות שבהמשך הפוסט מוגדר max-inline-size. הסגנון הזה דומה ל-max-width, אבל אפשר להגדיר אותו פעם אחת לכל שפה.

מגבלות

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

שיקולי ביצועים

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

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

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

אינטראקציות עם מאפיין white-space

המאפיין balancing text מתחרה במאפיין white-space כי אחד מהם מבקש לא לבצע גלישת שורות והשני מבקש לבצע גלישת שורות מאוזנת. כדי לפתור את הבעיה, צריך לבטל את ההגדרה של מאפיין הרווח הלבן, ואז אפשר להחיל שוב את העיטוף המאוזן.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

האיזון לא ישנה את גודל השורה של הרכיב

יש יתרון לפתרונות מסוימים של JavaScript לעיטוף מאוזן של טקסט, כי הם משנים את max-width של רכיב המכיל עצמו. היתרון הנוסף הוא שהם 'מכווצים' לבלוק מאוזן. text-wrap: balance לא משפיע כך, ואפשר לראות זאת בדוגמה הבאה:

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

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

הסבר קצר על הטכניקה שבה הדפדפן משתמש

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