התכונה text-wrap ב- CSS: הסבר על pretty ו balance

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

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

מהי התכונה text-wrap?

התכונה text-wrap היא חלק ממודול הטקסט של CSS (CSS Text Module Level 4) ונועדה כאסטרטגיה לטיפול בשבירת טקסט (wrapping).

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

יש לציין כי text-wrap היא למעשה תכונת קיצור (shorthand) המשלבת שתי תכונות משנה (longhand): text-wrap-mode ששולטת האם הטקסט נשבר בכלל, ו-text-wrap-style שקובעת את הסגנון של השבירה. כלומר, כשאתם כותבים text-wrap: balance אתם למעשה מגדירים את text-wrap-style לערך balance.

תחביר בסיסי – Syntax

element {
  text-wrap: value;
}

הערכים של text-wrap ב- CSS

הערכים הקיימים עבור text-wrap הינם:

• wrap: ההתנהגות הסטנדרטית בה הטקסט נשבר באופן טבעי בתוך הקונטיינר (זהה ל-normal).
• nowrap: מונע שבירת שורות – הטקסט ימשיך בשורה אחת וייגלש מהקונטיינר במידת הצורך.
• pretty: משפר את שבירת הטקסט למראה אסתטי יותר, מתקן את שבירת השורות ובכך מגביר את קריאות הטקסט.
• balance: מאזן את אורך השורות כך שיהיו באורך אחיד בתוך הבלוק.
• stable: שומר על יציבות השורות בעת עריכת תוכן – שורות שלפני נקודת העריכה לא ישתנו. שימושי במיוחד עבור אלמנטים עם contenteditable.

התעמקות בערכים pretty ו-balance

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

הבנת ההבדלים בין הערכים תעזור לכם לבחור את האפשרות הנכונה לצרכים העיצוביים שלכם:

הערך Pretty

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

לדוגמה, pretty מתקן מִקּוּף (שימוש במקף לחיבור מילים) אם שורות עם מקף בסופן מופיעות בסוף פסקה. כמו כן, הוא יכול לבצע התאמות עדינות לשורות קודמות כדי ליצור מקום לשבירה טובה יותר.

מעבר לכך, כאשר משתמשים בתכונה text-align עבור הטקסט, pretty יוודא שההתאמות המתבצעות לא יובילו לשבירות מביכות או בעיות בריווח. כלומר השימוש ב-text-wrap: pretty עוזר להציג טיפוגרפיה מקצועית ומוקפדת יותר.

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

p {
  text-wrap: pretty;
}

הערך Balance

לעומת זאת, balance מבטיח שהשורות בתוך הבלוק יהיו באורך דומה. אפשרות זו עוזרת למנוע תרחישים בהם שורה אחת קצרה משמעותית מאחרות, דבר העלול להפר את הזרימה הוויזואלית של הטקסט.

div {
  text-wrap: balance;
}

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

חשוב לדעת שקיימת מגבלה על מספר השורות ש-balance יכול לאזן. בדפדפני Chromium (כמו Chrome ו-Edge) המגבלה היא 6 שורות, ובדפדפן Firefox המגבלה היא 10 שורות. מעבר למספר זה, האלגוריתם לא יפעל והטקסט ישבר כרגיל. לכן, מומלץ להשתמש ב-balance בעיקר עבור כותרות וטקסטים קצרים.

See the Pen
Animated comparison of balanced and unbalanced headlines by Roee Yossef (@roeey)
on CodePen.

הערך Stable

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

ללא stable, עריכת מילה באמצע פסקה עלולה לגרום לכל השורות הסובבות לזוז ולהשתנות. עם stable, רק השורה הנערכת מושפעת, מה שיוצר חוויית עריכה חלקה הרבה יותר.

[contenteditable] {
  text-wrap: stable;
}

תמיכת הדפדפנים ב-stable טובה: Safari 17.5+, Firefox 121+ ו-Chrome/Edge 130+.

מתי להשתמש בכל ערך

בחירת ערך text-wrap המתאים תלויה בהקשר. הנה מדריך מהיר:

• כותרות וטקסטים קצרים: השתמשו ב-balance כדי לחלק את הטקסט באופן שווה בין השורות. עובד בצורה הטובה ביותר על אלמנטים עם 6 שורות או פחות.
• טקסט גוף ופסקאות ארוכות: השתמשו ב-pretty כדי למנוע מילים בודדות (orphans) ולשפר את איכות שבירת השורות מבלי להשפיע על הפריסה הכללית.
• תוכן הניתן לעריכה: השתמשו ב-stable על אלמנטים עם contenteditable כדי למנוע הזזות פריסה בזמן שהמשתמש מקליד.
• אלמנטים בשורה אחת: השתמשו ב-nowrap עבור תוויות, תגיות, או כל אלמנט שלא אמור לעבור לשורה שנייה.

דפוס נפוץ בסביבת ייצור הוא לשלב balance עבור כותרות ו-pretty עבור טקסט גוף:

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

דוגמאות מעשיות

בואו נבחן דוגמה מעשית בה ניתן ליישם את שני הערכים pretty ו-balance. דמיינו את אזור ה- Hero באתר שלכם עם כותרת שבורה באופן לא אחיד.

שימוש ב-text-wrap: balance בכותרת יבטיח שהשורות יחולקו באופן שווה, פעולה שתיצור מראה אחיד ונכון יותר. השימוש ב-balance מבטיח עיצוב מאוזן ללא תלות באורך הכותרת.

שימו לב בדוגמה הבאה שקיימת ״מילה יתומה״ בסוף הטקסט:

במקרה זה, השימוש ב-text-wrap: pretty יפתור את הבעיה ללא תלות ברוחב המסך. הוא מבטיח שלא יהיו מילים יתומות בטקסט בשום מצב.

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

תכונות המשנה: text-wrap-mode ו-text-wrap-style

כפי שציינו, text-wrap היא תכונת קיצור (shorthand) המשלבת שתי תכונות משנה. בואו נכיר אותן:

text-wrap-mode שולטת האם הטקסט נשבר בכלל. היא מקבלת שני ערכים: wrap (ברירת מחדל) ו-nowrap. תכונה זו הגיעה לסטטוס Baseline 2024, כלומר היא נתמכת בכל הדפדפנים המודרניים.

text-wrap-style קובעת את סגנון שבירת הטקסט ומקבלת ערכים כמו auto, balance, pretty ו-stable. תכונה זו עדיין בשלבי אימוץ ולא כל הערכים נתמכים בכל הדפדפנים.

/* שימוש בתכונות המשנה בנפרד */
h1 {
  text-wrap-mode: wrap;
  text-wrap-style: balance;
}

/* זהה לכתיבה המקוצרת */
h1 {
  text-wrap: balance;
}

תמיכה בדפדפנים

התכונה text-wrap הגיעה לסטטוס Baseline 2024, כלומר היא נתמכת בכל הדפדפנים המודרניים העיקריים. עם זאת, לא כל הערכים נתמכים באופן אחיד:

• balance: נתמך ב-Chrome 114+, Firefox 121+, Safari 17.5+ ו-Edge 114+.
• pretty: נתמך ב-Chrome 117+, Edge 117+ ו-Safari 26+, אך Firefox עדיין לא תומך בערך זה.
• stable: נתמך ב-Chrome 130+, Firefox 121+ ו-Safari 17.5+.

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

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

למרות שהתכונה text-wrap יכולה לשפר את מראה וקריאות התוכן באתר שלכם, יש לקחת בחשבון את ההשפעה של תכונה זו על ביצועי האתר:

• עומס עיבוד: האלגוריתם לשבירת טקסט של pretty ו-balance דורש משאבים רבים יותר בהשוואה לערך wrap, דבר שעשוי להוביל לזמני עיבוד ארוכים יותר, במיוחד בבלוקים גדולים של טקסט.
• השפעה על מכשירים חלשים: במכשירים עם כוח עיבוד מוגבל, השימוש ב-pretty או balance עלול לגרום לביצועים איטיים יותר, דבר שעלול לפגוע בחוויית המשתמש.
• רספונסיביות: בעיצוב רספונסיבי, ערכים אלו עלולים לגרום לשינויים במבנה הפריסה (layout shifts) כשהדפדפן מחשב מחדש את שבירת השורות.
• מגבלת שורות ב-balance: כפי שציינו, balance מוגבל ל-6 שורות ב-Chromium ו-10 שורות ב-Firefox. אם הטקסט חורג מהמגבלה, האלגוריתם לא יפעל ולא תהיה השפעה על הביצועים.

שאלות נפוצות

שאלות נפוצות בנושא התכונה text-wrap ב-CSS:

סיכום

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