مقدمه

ضرب‌المثلی وجود دارد که می‌گوید «چیزهای خوب نصیب کسانی می‌شود که صبر می‌کنند» و این موضوع درباره تزئین متن در وب نیز صدق می‌کند. ماژول CSS Text Decoration Level 3 امکانات جدید و قدرتمندی را برای شخصی‌سازی خطوط زیر متن، روی متن و خط‌خورده در اختیار توسعه‌دهندگان قرار داده است.

در گذشته برای تغییر رنگ خط زیر متن، بسیاری از برنامه‌نویسان مجبور بودند به‌جای text-decoration از border-bottom استفاده کنند، اما اکنون با قابلیت‌های جدید CSS دیگر نیازی به این روش‌های جایگزین نیست.

توجه: پشتیبانی برخی از این ویژگی‌ها هنوز در همه مرورگرها کامل نیست و ممکن است نتایج در مرورگرهای مختلف متفاوت باشد.

ویژگی text-decoration

در نسخه‌های قدیمی CSS، ویژگی text-decoration فقط مقادیر زیر را می‌پذیرفت:

• none
• underline
• overline
• line-through

اما در CSS3 این ویژگی به یک Shorthand Property تبدیل شده و می‌تواند چند ویژگی دیگر را نیز همزمان تنظیم کند:

• text-decoration-color
• text-decoration-style
• text-decoration-line

مثال:

.fancy {
  text-decoration: hotpink double underline;
}

نتیجه:

• رنگ خط: صورتی
• نوع خط: دوتایی (Double)
• محل نمایش: زیر متن

ویژگی text-decoration-color

این ویژگی رنگ خط تزئینی متن را مشخص می‌کند.

.link {
  text-decoration-color: red;
}

در نهایت CSS راه مستقیمی برای تغییر رنگ underline فراهم کرده است.

ویژگی text-decoration-style

این ویژگی نوع خط تزئینی را تعیین می‌کند.

مقادیر مهم:

solid
double
dotted
dashed
wavy

مثال:

.wavy {
  text-decoration: underline;
  text-decoration-color: salmon;
  text-decoration-style: wavy;
}

خروجی:

متن دارای خط موج‌دار (Wavy) به رنگ نارنجی-صورتی خواهد بود.

ویژگی text-decoration-line

این ویژگی تعیین می‌کند خط تزئینی در کدام قسمت نمایش داده شود.

مقادیر:

underline
overline
line-through
blink

نکته:

مقدار blink منسوخ شده و تقریباً هیچ مرورگری از آن استفاده نمی‌کند.

مثال:

.strike {
  text-decoration-line: line-through;
  text-decoration-color: red;
}

نتیجه:

متن به‌صورت خط‌خورده نمایش داده می‌شود.

ویژگی text-decoration-skip

این ویژگی مشخص می‌کند خط تزئینی از روی چه بخش‌هایی عبور نکند.

مقادیر مهم:

objects
spaces
ink
edges
box-decoration

مقدار ink

باعث می‌شود خط زیر متن از روی بخش‌های پایینی حروف عبور نکند.

.ink {
  text-decoration: underline solid darkturquoise;
  text-decoration-skip: ink;
}

برای مثال در حروفی مانند:

g, p, y, j

خط زیر متن به حروف برخورد نمی‌کند و خوانایی بیشتر می‌شود.

مقدار objects

باعث می‌شود خط تزئینی از روی عناصر inline-block عبور نکند.

<p class="super">
  Getting <span style="display:inline-block;">Very</span> Fancy
</p>

.super {
  text-decoration: overline solid peru;
  text-decoration-skip: objects;
}

در این حالت خط از روی عنصر Very رد نمی‌شود.

سایر مقادیر

spaces

خط از روی فاصله‌ها و علائم نگارشی عبور نمی‌کند.

text-decoration-skip: spaces;

edges

میان دو عنصر تزئین‌شده فاصله ایجاد می‌کند.

text-decoration-skip: edges;

box-decoration

از روی Margin، Padding و Border به ارث رسیده عبور نمی‌کند.

text-decoration-skip: box-decoration;

البته این مقادیر هنوز در همه مرورگرها پشتیبانی کامل ندارند.

ویژگی text-underline-position

این ویژگی محل قرارگیری خط زیر متن را نسبت به حروف مشخص می‌کند.

مقادیر:

auto
under
left
right

مقدار auto

مقدار پیش‌فرض مرورگر است.

.auto {
  text-decoration: underline;
  text-underline-position: auto;
}

در این حالت خط تقریباً نزدیک خط پایه (Baseline) متن قرار می‌گیرد.

مقدار under

خط زیر متن پایین‌تر از حروف قرار می‌گیرد.

.under {
  text-decoration: underline;
  text-underline-position: under;
}

این مقدار مخصوصاً برای حروفی که بخش پایینی دارند بسیار مناسب است.

مثال:

g p q y j

خط زیر متن دیگر به این حروف برخورد نمی‌کند.

مقادیر left و right

برای زبان‌ها و حالت‌های نوشتاری عمودی استفاده می‌شوند.

text-underline-position: left;

text-underline-position: right;

نمونه کامل

.fancy-link {
  text-decoration-line: underline;
  text-decoration-color: #ff1493;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-position: under;
}

خروجی:

• خط زیر متن موج‌دار
• رنگ صورتی
• ضخامت ۲ پیکسل
• فاصله مناسب از حروف

مزایای قابلیت‌های جدید text-decoration

✅ تغییر رنگ مستقل خط زیر متن

✅ ایجاد خط موج‌دار، نقطه‌ای و دوتایی

✅ جلوگیری از برخورد خط با حروف

✅ کنترل دقیق محل قرارگیری خط

✅ جایگزین مناسب برای استفاده از border-bottom

نتیجه‌گیری

قابلیت‌های جدید text-decoration در CSS3 کنترل بسیار بیشتری روی ظاهر خطوط تزئینی متن فراهم می‌کنند. با استفاده از ویژگی‌هایی مانند text-decoration-color، text-decoration-style، text-decoration-skip و text-underline-position می‌توانید لینک‌ها و متن‌های خود را حرفه‌ای‌تر، خواناتر و زیباتر طراحی کنید؛ بدون اینکه مجبور باشید از ترفندهای قدیمی مانند border-bottom استفاده کنید.

از همراهی شما با پارمین کلود سپاسگزاریم.