زخرفة النصوص (Text Decoration)

في عالم الطباعة وتصميم الكتب القديمة، كان الكاتب يستخدم المسطرة والقلم لرسم خط تحت العناوين الهامة، أو لشطب جملة خاطئة. في عالم الويب ولغة CSS، الأداة التي تقوم بهذا الدور هي خاصية text-decoration.

قد يظن المبتدئ أن هذه الخاصية وظيفتها الوحيدة هي "إزالة الخط من تحت الروابط"، ولكن هذا ظلم كبير لها! هذه الخاصية تطورت بشكل مذهل في السنوات الأخيرة. الآن يمكنك رسم خطوط متموجة (Wavy) مثل تصحيح الإملاء، وتغيير لون الخط ليكون مختلفاً عن لون النص، والتحكم في سمكه، وحتى إبعاده عن الحروف لكي لا يقطع ذيل حرف الـ "ي" أو "g". في هذا الدرس الموسع، سنشرح كل ذرة في هذه الخاصية، وسنعرف متى نستخدمها، ومتى نستبدلها بالحدود (Borders).

1. المفهوم الأساسي والأنواع (Line)

الخاصية الأم هي text-decoration-line. وهي تحدد "مكان" الخط بالنسبة للنص. هل هو تحته؟ فوقه؟ أم يقطعه؟

القيم الأساسية (Values)

none: (الأهم) لا يوجد خط. تُستخدم بكثرة لإزالة الخط الافتراضي من الروابط (Links).
underline: خط أسفل النص. الشكل القياسي للروابط التشعبية.
line-through: خط يمر بمنتصف النص (مشطوب). يُستخدم للدلالة على المهام المنجزة أو الأسعار القديمة قبل الخصم.
overline: خط فوق النص. نادر الاستخدام في الويب العادي، لكنه يستخدم في المعادلات الرياضية أحياناً.

أمثلة أساسية للأنواع


/* إزالة الخط من الروابط */
a {
    text-decoration-line: none;
}

/* عنوان تحته خط */
h1 {
    text-decoration-line: underline;
}

/* سعر قديم مشطوب */
.old-price {
    text-decoration-line: line-through;
    color: gray; /* النص رمادي والخط رمادي */
}

هل تعلم؟ يمكنك دمج خطين معاً! مثلاً: text-decoration-line: underline overline; سيرسم خطاً فوق وتحت النص في نفس الوقت.

2. تلوين الخطوط (Color) - الإبداع يبدأ هنا

في الماضي، كان لون الخط مرتبطاً إجبارياً بلون النص. إذا كان النص أزرق، فالخط أزرق. لكن مع خاصية text-decoration-color، أصبح بإمكاننا الفصل بينهما.

هذا يفتح آفاقاً واسعة للتصميم، مثل وضع خط أحمر تحت نص أسود للفت الانتباه (مثل تصحيح المعلم للواجب).

مثال: نص بلون وخط بلون آخر


.spelling-error {
    color: black; /* لون الكلام */
    text-decoration-line: underline;
    
    /* لون الخط تحت الكلام */
    text-decoration-color: red; 
}

3. نمط الخط (Style) - متموج، منقط، ومزدوج

هل مللت من الخط المستقيم (Solid)؟ خاصية text-decoration-style تمنحك أشكالاً مختلفة للخط، تماماً مثل حدود الـ Border.

الأنماط المتاحة

القيمة	الشكل	الاستخدام الشائع
`solid`	خط متصل (ـــــــ)	الروابط والعناوين (الافتراضي).
`double`	خط مزدوج (═══)	للتأكيد القوي أو العناوين الكلاسيكية.
`dotted`	منقط (..........)	لتوضيح أن الكلمة لها شرح (Tooltip) عند المرور عليها.
`dashed`	متقطع (_ _ _ _)	أقل استخداماً، أحياناً للمسودات.
`wavy`	متموج (~~~~~~)	للأخطاء الإملائية أو التصاميم المرحة.

مثال: الخط المتموج (Wavy)


.error-word {
    text-decoration-line: underline;
    text-decoration-style: wavy; /* خط متموج */
    text-decoration-color: red;  /* أحمر */
}

4. سُمك الخط (Thickness) - الدقة الحديثة

قديماً، كان سمك الخط يعتمد على حجم النص. نص كبير = خط سميك. الآن، خاصية text-decoration-thickness تسمح لك بتحديد سمك الخط بالبيكسل أو النسبة المئوية، بغض النظر عن حجم الخط.

هذه الخاصية ممتازة في "شاشات الريتنا" عالية الدقة، حيث نريد أحياناً خطوطاً رفيعة جداً وأنيقة.

مثال: التحكم في السمك


h2 {
    text-decoration-line: underline;
    
    /* خط سميك جداً */
    text-decoration-thickness: 5px; 
    
    /* أو نسبة مئوية من حجم الخط */
    /* text-decoration-thickness: 10%; */
}

5. الاختصار (Shorthand) - سطر واحد يكفي

بدلاً من كتابة 4 خصائص منفصلة، يمكننا جمعها كلها في خاصية واحدة هي text-decoration.

الترتيب الشائع:
line color style thickness

(ملاحظة: الترتيب ليس صارماً جداً في المتصفحات الحديثة، لكن يفضل الالتزام به للنظام).

الكود المختصر


/* الطريقة الطويلة */
.example-1 {
    text-decoration-line: underline;
    text-decoration-color: blue;
    text-decoration-style: dashed;
    text-decoration-thickness: 2px;
}

/* الطريقة المختصرة (نفس النتيجة) */
.example-2 {
    text-decoration: underline blue dashed 2px;
}

6. خصائص مساعدة متطورة (Offset & Skip)

هناك خاصيتان إضافيتان تجعلان التصميم احترافياً للغاية، وتجعل القراءة أسهل.

أ. إزاحة الخط (text-underline-offset)

هذه الخاصية حديثة ورائعة. هي تحدد "المسافة" بين النص والخط الذي تحته. في السابق، كان الخط يلتصق بالحروف. الآن يمكنك إبعاده قليلاً ليعطي شكلاً جمالياً.

text-underline-offset: 5px; (ابعد الخط 5 بيكسل عن الكلام).

ب. تخطي الحبر (text-decoration-skip-ink)

عندما ترسم خطاً تحت كلمة تحتوي على حروف تنزل للأسفل (مثل: g, j, p, q, y)، هل يجب أن يقطع الخط ذيل الحرف؟

auto: (الافتراضي) يقوم المتصفح بقطع الخط قليلاً عند ذيل الحرف لكي يظل الحرف مقروءاً.
none: يمر الخط فوق ذيل الحرف (أقل جمالية).

مثال: تصميم عصري للروابط


a.modern-link {
    text-decoration: underline 2px solid blue;
    
    /* إبعاد الخط عن النص ليكون مريحاً للعين */
    text-underline-offset: 4px;
    
    /* التأكد من عدم تشويه الحروف النازلة مثل (y, g) */
    text-decoration-skip-ink: auto;
}

a.modern-link:hover {
    /* تغيير نمط الخط عند المرور بالماوس */
    text-decoration-color: red;
}

7. مقارنة هامة: text-decoration أم border-bottom؟

هذا سؤال يسأله المحترفون. كلاهما يضع خطاً تحت النص. أيهما أستخدم؟

وجه المقارنة	text-decoration	border-bottom
الارتباط بالنص	جزء من النص نفسه. يتحرك معه، ويأخذ لونه افتراضياً.	جزء من الصندوق (Box Model). مستقل عن النص.
المسافة (Offset)	محدودة بخاصية `offset` الحديثة.	مرنة جداً باستخدام `padding-bottom`.
تعدد الأسطر	يعمل بشكل ممتاز! يضع خطاً تحت كل سطر إذا كانت الجملة طويلة.	يضع خطاً فقط في نهاية الصندوق بالكامل، وليس تحت كل سطر.
الاستخدام الأمثل	للروابط والنصوص داخل الفقرات.	للعناوين الرئيسية التي تحتاج مسافات كبيرة أو تصميمات معقدة.

القاعدة الذهبية: إذا كان الخط تحت "كلام" قد ينكسر لعدة أسطر، استخدم text-decoration. إذا كان الخط تحت "صندوق" أو عنوان ثابت، استخدم border-bottom.

حالات الاستخدام الشائعة (Best Practices)

الروابط (Links): لا تقم بإزالة الخط من الروابط (text-decoration: none) إلا إذا قمت بتمييز الرابط بطريقة أخرى واضحة جداً (مثل تغيير اللون أو الخلفية)، لأن الخط هو العلامة العالمية للرابط.
الأسعار (E-commerce): استخدم line-through دائماً عند عرض السعر الأصلي بجوار السعر المخفض.
إمكانية الوصول (Accessibility): تجنب استخدام underline للنصوص العادية التي ليست روابط، لأن المستخدم سيحاول الضغط عليها وسيشعر بالإحباط.

زخرفة النصوص Css