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

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

Adam Argyle

הערך balance של text-wrap הוא חלק מרמת טקסט 4 של CSS. עיינו בדוגמאות שבפוסט כדי ללמוד איך עושים זאת שורת ה-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

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

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

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

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

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

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

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

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