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

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

אדם ארגייל

Twitter GitHub

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

תמיכה בדפדפן

• 114
• 114
• 121

מקור

לניסיון הדגמה

בלי 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% מרוחב השורה הממוצע.