קסטומיזציה של underlines בעזרת text-decoration

המודול CSS Text Decoration Module Level 3 נותן לנו כמה דרכים חדשות לעצב קווים תחתונים וקישוטי טקסט מעבר ל-underline / line-through הבסיסיים. תמיכת הדפדפנים עומדת היום על מעל 94% גלובלית, כך שאפשר להשתמש בתכונות האלו בפרודקשן בלי חשש.

תכונות כמו text-decoration-thickness ו-text-decoration-color נותנות שליטה על עובי הקו התחתון וצבעו בנפרד – דברים שבעבר דרשו מעקפים (workarounds). אם אתם עדיין מתחילים עם CSS, שווה לעבור קודם על המדריך המקיף ל-CSS למתחילים.

צורך נפוץ: לשנות את צבע הקו התחתון מבלי לשנות את צבע הטקסט. עוד אחד: להתאים את עובי הקו התחתון לעיצוב ספציפי.

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

התכונה text-decoration

במקור, התכונה text-decoration קיבלה רק את הערכים none, underline, overline או line-through.

עם ה-Level 3 spec היא הפכה ל-shorthand שמשלב בין text-decoration-line, text-decoration-style ו-text-decoration-color בהצהרה אחת. הנה קו תחתון כפול בצבע ורוד לוהט:

הנה שורת ה-CSS שבה השתמשנו:

text-decoration: #ff00d3 double underline;

בגרסאות ישנות של Safari ה-shorthand לא עבד כשהוא כלל text-decoration-style. הפתרון: להוסיף -webkit-text-decoration מיד אחרי התכונה הסטנדרטית, או לרשום כל תת-תכונה בשורה נפרדת.

כל תת-התכונות הזמינות היום:

• text-decoration-thickness
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-skip
• text-decoration-skip-ink
• text-decoration
• text-underline-offset
• text-underline-position

4 דוגמאות לתכונות ה decoration וה underline

בואו נעבור על כל תכונה עם דוגמה חיה. כל הדפדפנים המודרניים תומכים בתכונות האלה (מעל 94% כיסוי גלובלי):

א. text-decoration-thickness

text-decoration-thickness קובעת את עובי הקו. אפשר להשתמש בכל ערך אורך – px, em, ואפילו from-font שנותן לפונט עצמו להחליט:

ב. text-decoration-color

text-decoration-color מגדירה את צבע הקו התחתון בנפרד מצבע הטקסט. כל ערך צבע CSS תקני עובד כאן – hex, rgb(), hsl() או צבעים בשם:

ג. text-underline-offset

text-underline-offset מזיזה את הקו התחתון למעלה או למטה ביחס למיקום ברירת המחדל. ערכים חיוביים מרחיקים את הקו מהטקסט, שליליים מקרבים:

ד. text-decoration-skip-ink

שימו לב שבדוגמאות הקודמות הקו התחתון נשבר סביב החלקים של גליפים שיורדים מתחת לקו הבסיס (descenders) – כמו בזנבות של האותיות g, p, q, y, j באנגלית, או הצ׳ופצ׳יקים של אותיות כמו ׳ק׳ ו-׳ן׳ בעברית.

השבירה הזו היא התנהגות ברירת המחדל. הדפדפן מגדיר את text-decoration-skip-ink ל-auto, מה שגורם לו לדלג על הדיו במקומות שבהם הקו מתנגש עם גליף. הגדרת הערך ל-none מציירת את הקו ישר דרך כל אות:

בטיפוגרפיה, החלק של אות שיורד מתחת לקו הבסיס נקרא Descender (באנגלית: g, p, q, y, j). החלק שעולה מעל גובה ה-x נקרא Ascender (באנגלית: b, d, h, k, l).

הנה סרטון של Jen Simmons (כיום ב-Apple, לשעבר ב-Mozilla) שמכסה את התכונות בפירוט:

שאלות נפוצות

סיכום

תכונות ה-CSS Text Decoration Level 3 נותנות שליטה אמיתית על עיצוב קווים תחתונים – עובי, צבע, היסט והתנהגות דילוג דיו – בלי הפתרונות הישנים של border-bottom. שילוב של text-underline-offset עדין עם text-decoration-color בהיר נותן ללינקים מראה מלוטש בלי markup נוסף.

לטכניקת עיצוב טקסט נוספת ששווה להכיר, ראו את הפוסט שלי על אפקטים עם text-shadow ב-CSS.