שיטת טיפוגרפיה קלאסית של מעברי שורה בכתב יד לבלוקים של טקסט מאוזנים.
הערך 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, אבל אפשר להגדיר אותו פעם אחת לכל שפה.
מגבלות
המשימה של איזון טקסט אינה בחינם. הדפדפן צריך לעבור על איטרציות בלופ כדי לגלות את פתרון האריזה המאוזן ביותר. כלל מסוים מצמצם את עלות הביצועים הזו – היא פועלת רק ב-6 קווים עטופים או פחות.
שיקולי ביצועים
לא כדאי להשתמש באיזון של גלישת טקסט על העיצוב כולו. זו בקשה מיותרת, בגלל המגבלה של 6 שורות, והיא עלולה להשפיע על מהירות העיבוד של הדף.
* {
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% מרוחב השורה הממוצע.