גלישת טקסט ב-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, אבל אפשר להגדיר אותו פעם אחת לכל שפה.

מגבלות

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

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

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

* {
  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% מרוחב הקו הממוצע.