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

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

Adam Argyle

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

תמיכה בדפדפנים

• 114
• 114
• 121
• 17.5

מקור

להדגמה

ללא 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

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

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

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

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

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

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

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

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