חיפוש ]

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

שימו לב: יש להשתמש בדפדפן Google Chrome כדי לראות את ההשפעות של תכונת text-wrap. בנוסף, מומלץ לצפות בדוגמאות אלה במסכים שולחניים (לא במובייל) לתוצאות מדויקות.
This Is My Long & Beautiful Hero Section Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

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

This Is My Long & Beautiful Hero Section Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

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

This is my Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

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

This is my Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

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

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

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

Data on support for the css-text-wrap-balance feature across the major browsers from caniuse.com

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

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

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

סיכום

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

0 תגובות...

תגובה חדשה

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

Savvy WordPress Development