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