random
أخبار ساخنة

شرح CSS Text Decoration انواع الخط واللون والشكل والسمك بالتفصيل

Samouel Ghaly
الصفحة الرئيسية

الشَّرْحُ الشَّامِلُ لِخَاصِّيَّةِ CSS Text Decoration

فِي مَجَالِ تَصْمِيمِ صَفَحَاتِ الوَيْبِ، تَلْعَبُ النُّصُوصُ الدَّوْرَ الأَكْبَرَ فِي إِيصَالِ المَعْلُومَاتِ. وَلَكِنْ لِجَعْلِ هَذِهِ النُّصُوصِ جَذَّابَةً وَتَفَاعُلِيَّةً، نَحْتَاجُ إِلَى تَقْنِيَّاتٍ تُمَكِّنُنَا مِنْ إِضَافَةِ لَمَسَاتٍ جَمَالِيَّةٍ عَلَيْهَا. هُنَا تَأْتِي خَاصِّيَّةُ CSS Text Decoration، وَهِيَ الأَدَاةُ المِثَالِيَّةُ لِلتَّحَكُّمِ فِي الخُطُوطِ الَّتِي تُوضَعُ فَوْقَ النُّصُوصِ، أَوْ تَحْتَهَا، أَوْ تَمُرُّ عَبْرَهَا.

لَقَدْ تَطَوَّرَتْ هَذِهِ الخَاصِّيَّةُ فِي السَّنَوَاتِ الأَخِيرَةِ ضِمْنَ مَعَايِيرِ CSS3، حَيْثُ لَمْ تَعُدْ مُجَرَّدَ أَمْرٍ بَسِيطٍ لِإِضَافَةِ خَطٍّ تَحْتَ الرَّابِطِ، بَلْ أَصْبَحَتْ خَاصِّيَّةً مُرَكَّبَةً (Shorthand) تَحْتَوِي عَلَى أَرْبَعِ خَصَائِصَ فَرْعِيَّةٍ دَقِيقَةٍ: نَوْعِ الخَطِّ، لَوْنِهِ، شَكْلِهِ الهَنْدَسِيِّ، وَسُمْكِهِ. دَعُونَا نُبْحِرُ فِي تَفَاصِيلِهَا المُمْتِعَةِ.

1. نَوْعُ الخَطِّ مَوْقِعُهُ: text-decoration-line

تُحَدِّدُ هَذِهِ الخَاصِّيَّةُ الفَرْعِيَّةُ مَوْقِعَ الخَطِّ النِّسْبِيِّ بِالنِّسْبَةِ لِلنَّصِّ. هِيَ تُمَثِّلُ الحَجَرَ الأَسَاسِيَّ، فَإِذَا لَمْ يَتِمَّ تَعْيِينُ مَوْقِعِ الخَطِّ، فَلَنْ تَظْهَرَ بَقِيَّةُ الزَّخَارِفِ.

أَهَمُّ القِيَمِ المِعْيَارِيَّةِ:

  • none: إلْغَاءُ أَيِّ زَخْرَفَةٍ أَوْ خُطُوطٍ مَوْجُودَةٍ (تُسْتَخْدَمُ كَثِيرًا لِإِزَالَةِ الخَطِّ الاِفْتِرَاضِيِّ تَحْتَ الرَّوَابِطِ <a>).
  • underline: رَسْمُ خَطٍّ تَحْتَ النَّصِّ (مُمْتَازٌ لِلرَّوَابِطِ أَوِ الكَلِمَاتِ المُرَادِ التَّأْكِيدُ عَلَيْهَا).
  • overline: رَسْمُ خَطٍّ فَوْقَ النَّصِّ تَمَامًا (يُسْتَخْدَمُ فِي تَصْمِيمَاتٍ خَاصَّةٍ أَوْ بَعْضِ التَّعْبِيرَاتِ الرِّيَاضِيَّةِ).
  • line-through: رَسْمُ خَطٍّ يَمُرُّ فِي مُنْتَصَفِ الكَلِمَاتِ (يُسْتَخْدَمُ لِإِظْهَارِ العُرُوضِ، الأَسْعَارِ المَلْغَاةِ، أَوْ المَهَامِّ المُنْجَزَةِ).

مِثَالٌ كُودِيٌّ:

.old-price {
    text-decoration-line: line-through; /* خَطٌّ يَشْطُبُ السِّعْرَ القَدِيمَ */
}
.new-link {
    text-decoration-line: underline; /* خَطٌّ تَحْتَ الرَّابِطِ */
}

2. شَكْلُ الخَطِّ وَهَيْئَتُهُ: text-decoration-style

بَعْدَ أَنْ حَدَّدْنَا مَوْقِعَ الخَطِّ، يُمْكِنُنَا الآنَ الِابْتِعَادُ عَنِ المَظْهَرِ التَّقْلِيدِيِّ الجَامِدِ وَتَحْدِيدِ شَكْلِ الخَطِّ نَفْسِهِ لِيُضْفِيَ جَمَالِيَّةً حَدِيثَةً عَلَى الوَاجِهَةِ.

القِيَمُ المَتَاحَةُ:

  • solid: خَطٌّ مُسْتَمِرٌّ وَمُصْمَتٌ (وَهُوَ المَظْهَرُ الاِفْتِرَاضِيُّ).
  • double: خَطٌّ مُزْدَوِجٌ (خَطَّانِ مُتَوَازِيَانِ رَفِيعَانِ).
  • dotted: خَطٌّ يَتَكَوَّنُ مِنْ نُقَاطٍ دَائِرِيَّةٍ مُتَتَالِيَةٍ.
  • dashed: خَطٌّ مُتَقَطِّعٌ يَتَكَوَّنُ مِنْ شَرَطَاتٍ صَغِيرَةٍ.
  • wavy: خَطٌّ تَمَوُّجِيٌّ (مِثْلَ الخَطِّ الأَحْمَرِ الَّذِي يَظْهَرُ تَحْتَ الأَخْطَاءِ الإِمْلَائِيَّةِ فِي بَرَامِجِ النُّصُوصِ، وَهُوَ رَائِعٌ لِجَذْبِ الِانْتِبَاهِ).

مِثَالٌ كُودِيٌّ:

.important-note {
    text-decoration-line: underline;
    text-decoration-style: wavy; /* جَعْلُ الخَطِّ المَوْجُودِ تَحْتَ النَّصِّ مُمَوَّجًا */
}

3. لَوْنُ الخَطِّ الزَّخْرَفِيِّ: text-decoration-color

فِي المَاضِي، كَانَ لَوْنُ الخَطِّ يَتْبَعُ لَوْنَ الكَلِمَاتِ تِلْقَائِيًّا. أَمَّا الآنَ، فَتَمْنَحُكَ خَاصِّيَّةُ text-decoration-color الحُرِّيَّةَ الكَامِلَةَ لِتَكْوِينِ تَنَاغُمٍ بَصَرِيٍّ عَبْرَ فَصْلِ لَوْنِ الخَطِّ عَنْ لَوْنِ النَّصِّ الأَسَاسِيِّ.

تَقْبَلُ هَذِهِ الخَاصِّيَّةُ جَمِيعَ أَنْظِمَةِ الأَلْوَانِ المَعْرُوفَةِ فِي CSS مِثْلَ (HEX, RGB, RGBA, HSL) بِالإِضَافَةِ إِلَى الكَلِمَاتِ المَحْجُوزَةِ مِثْلَ `transparent` لِجَعْلِهِ شَفَّافًا.

مِثَالٌ كُودِيٌّ:

.alert-text {
    color: #2c3e50; /* لَوْنُ النَّصِّ كُحْلِيٌّ */
    text-decoration-line: underline;
    text-decoration-color: #e74c3c; /* لَوْنُ الخَطِّ الَّذِي تَحْتَهُ أَحْمَرُ نَاصِعٌ */
}

4. سُمْكُ الخَطِّ وَثَخَانَتُهُ: text-decoration-thickness

هَذِهِ هِيَ الإِضَافَةُ الأَحْدَثُ وَالأَكْثَرُ طَلَبًا مِنْ قِبَلِ المُصَمِّمِينَ. فِى المَاضِي كُنَّا نَلْجَأُ لِحِيَلٍ مُعَقَّدَةٍ مِثْلَ `border-bottom` لِلتَّحَكُّمِ فِي سُمْكِ خَطِّ الرَّابِطِ، لَكِنْ مَعَ text-decoration-thickness أَصْبَحَ بِإِمْكَانِنَا تَحْدِيدُ مَدَى غِلَظِ الخَطِّ الزَّخْرَفِيِّ بِكُلِّ سُهُولَةٍ.

أَبْرَزُ القِيَمِ:

  • auto: يَتْرُكُ لِلْمُتَصَفِّحِ حُرِّيَّةَ تَحْدِيدِ السُّمْكِ المُنَاسِبِ بِنَاءً عَلَى حَجْمِ الخَطِّ الأَسَاسِيِّ.
  • from-font: إِذَا كَانَ نَوْعُ الخَطِّ المُسْتَخْدَمِ (Font Family) يَمْتَلِكُ بَيَانَاتٍ دَاخِلِيَّةً عَنِ السُّمْكِ المُفَضَّلِ لِلْخُطُوطِ، فَتَتِمُّ طَبَاعَتُهُ بِنَاءً عَلَيْهَا.
  • القِيَمُ الرَّقَمِيَّةُ دَقِيقَةُ الحَجْمِ: مِثْلَ 2px أَوْ 0.1em أَوْ percent (10%).

مِثَالٌ كُودِيٌّ:

.bold-heading {
    text-decoration-line: underline;
    text-decoration-thickness: 4px; /* خَطٌّ تَحْتِيٌّ سَمِيكٌ جِدًّا بِمِقْدَارِ 4 بِكْسِل */
}

الخَاصِّيَّةُ المُخْتَصَرَةُ (Shorthand Property)

لِتَوْفِيرِ الوَقْتِ وَجَعْلِ المِلَفَّاتِ أَصْغَرَ حَجْمًا، لَا دَاعِيَ لِكِتَابَةِ الأَسْطُرِ الأَرْبَعَةِ مُنْفَصِلَةً. يُمْكِنُكَ دَمْجُ كُلِّ تِلْكَ القِيَمِ فِي خَاصِّيَّةٍ وَاحِدَةٍ جَامِعَةٍ هِيَ text-decoration حَسَبَ التَّرْتِيبِ التَّالِي: 

text-decoration: [line] [style] [color] [thickness];

مِثَالٌ جَامِعٌ:

.premium-badge {
    /* خَطٌّ تَحْتِيٌّ، مُمَوَّجٌ، لَوْنُهُ جَزَرِيٌّ، بِسُمْكِ 3 بكسل */
    text-decoration: underline wavy #e67e22 3px; 
}
💡 نَصِيحَةٌ مِهْنِيَّةٌ حَصْرِيَّةٌ (Accessibility & UX): عِنْدَ تَصْمِيمِ الرَّوَابِطِ، لَا تَقُمْ بِإِزَالَةِ الخَطِّ التَّحْتِيِّ (Underline) تَمَامًا نِهَائِيًّا إِلَّا إِذَا كَانَتْ هُنَاكَ طَرِيقَةٌ أُخْرَى وَاضِحَةٌ تُمَيِّزُ الرَّابِطَ عَنِ النَّصِّ العَادِيِّ (مِثْلَ تَغْيِيرِ الأَلْوَانِ بِشَكْلٍ صَارِخٍ). الخَطُّ التَّحْتِيُّ لِلرَّوَابِطِ هُوَ رَمْزٌ عَالَمِيٌّ يُسَاعِدُ ذَوِي الِاحْتِيَاجَاتِ البَصَرِيَّةِ عَلَى تَمْيِيزِ العَنَاصِرِ التَّفَاعُلِيَّةِ بِسُهُولَةٍ.
google-playkhamsatmostaqltradent