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

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

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

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

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

element {
  text-wrap: value;
}

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

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

• normal: ההתנהגות הסטנדרטית בה הטקסט נשבר באופן טבעי בתוך הקונטיינר.
• pretty: משפר את שבירת הטקסט למראה אסתטי יותר, מתקן את שבירת השורות ובכך מגביר את קריאות הטקסט.
• balance: מאזן את אורך השורות כך שיהיו באורך אחיד בתוך הבלוק.

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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