random
أخبار ساخنة

تعلم تنسيق النصوص في CSS تحويل حالة الحروف وتباعد النصوص وتنسيق الالتفاف

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

دَلِيلُ مُحْتَرِفِي CSS لِتَبَاعُدِ النُّصُوصِ وَالْتِفَافِهَا

بَعْدَ تَعَلُّمِ كَيْفِيَّةِ تَغْيِيرِ أَلْوَانِ النُّصُوصِ وَحَجْمِهَا، نَنْتَقِلُ الآنَ إِلَى المَرْحَلَةِ الأَكْثَرِ تَقَدُّمًا فِي تَنْسِيقِ النُّصُوصِ (Typography). هَذِهِ المَرْحَلَةُ هِيَ الَّتِي تَفْصِلُ بَيْنَ المُصَمِّمِ المُبْتَدِئِ وَالمُحْتَرِفِ؛ حَيْثُ نَتَحَكَّمُ فِيهَا بِدِقَّةٍ فِي كَيْفِيَّةِ تَبَاعُدِ الحُرُوفِ، وَتَحْوِيلِ حَالَتِهَا، وَكَيْفِيَّةِ تَعَامُلِ المُتَصَفِّحِ مَعَ الكَلِمَاتِ الطَّوِيلَةِ عِنْدَ نِهَايَةِ السَّطْرِ. سَنَسْتَعْرِضُ فِي هَذَا المَوْضُوعِ ثَلَاثَ رَكَائِزَ أَسَاسِيَّةً لِتَنْسِيقِ النُّصُوصِ بِمِثَالِيَّةٍ.

1. تَحْوِيلُ حَالَةِ الحُرُوفِ: text-transform

تُسْتَخْدَمُ هَذِهِ الخَاصِّيَّةُ لِلتَّحَكُّمِ فِي حَالَةِ الحُرُوفِ الأَبْجَدِيَّةِ الإِنْجِلِيزِيَّةِ (أَوِ اللَّاتِينِيَّةِ عُمُومًا). وَرَغْمَ أَنَّهَا لَا تُؤثِّرُ عَلَى الحُرُوفِ العَرَبِيَّةِ لِعَدَمِ وُجُودِ حَالَتَيْنِ لِلْحَرْفِ فِيهَا، إِلَّا أَنَّهَا جَوْهَرِيَّةٌ لِأَيِّ مُطَوِّرٍ عَرَبِيٍّ يَقُومُ بِبِنَاءِ مَوْقِعٍ مُتَعَدِّدِ اللُّغَاتِ أَوْ يَحْتَوِي مَوْقِعُهُ عَلَى أَسْمَاءِ أَعْلَامٍ أَجْنَبِيَّةٍ.

الأَقْسَامُ وَالقِيَمُ الرَّئِيسِيَّةُ:

  • uppercase: تَحْوِيلُ جَمِيعِ حُرُوفِ النَّصِّ إِلَى حُرُوفٍ كَبِيرَةٍ (Capital Letters)، وَتُسْتَخْدَمُ غَالِبًا فِي العَنَاوِينِ الرَّئِيسِيَّةِ لِإِعْطَائِهَا مَظْهَرًا قَوِيًّا.
  • lowercase: تَحْوِيلُ جَمِيعِ حُرُوفِ النَّصِّ إِلَى حُرُوفٍ صَغِيرَةٍ (Small Letters).
  • capitalize: تَحْوِيلُ الحَرْفِ الأَوَّلِ فَقَطْ مِنْ كُلِّ كَلِمَةٍ إِلَى حَرْفٍ كَبِيرٍ (تُسْتَخْدَمُ لِأَسْمَاءِ الأَشْخَاصِ وَعَنَاوِينِ المَقَالَاتِ).
  • none: إِبْقَاءُ النَّصِّ كَمَا هُوَ دُونَ أَيِّ تَعْدِيلٍ (القِيمَةُ الاِفْتِرَاضِيَّةُ).

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

h2.english-title {
    text-transform: uppercase; /* جَعْلُ العُنْوَانِ بِحُرُوفٍ كَبِيرَةٍ كَامِلَةً */
}
span.user-name {
    text-transform: capitalize; /* جَعْلُ الحَرْفِ الأَوَّلِ مِنْ اِسْمِ المُسْتَخْدِمِ كَبِيرًا */
}

2. أَبْعَادُ وَتَبَاعُدِ النُّصُوصِ (Spacing)

التَّنَفُّسُ البَصَرِيُّ لِلنَّصِّ هُوَ سِرُّ القِرَاءَةِ المُريْحَةِ. تَمْنَحُنَا لُغَةُ CSS ثَلَاثَ خَصَائِصَ فَرِيدَةٍ لِتَحْدِيدِ المِسَاحَاتِ دَاخِلَ الكُتْلَةِ النَّصِّيَّةِ:

أ- تَبَاعُدُ الحُرُوفِ: letter-spacing

تَتَحَكَّمُ فِي المِسَاحَةِ بَيْنَ كُلِّ حَرْفٍ وَآخَرَ. (تُسْتَخْدَمُ مَعَ اللُّغَاتِ اللَّاتِينِيَّةِ لِتَوْسِيعِ العَنَاوِينِ، وَيُفَضَّلُ تَجَنُّبُهَا مَعَ العَرَبِيَّةِ لِأَنَّهَا قَدْ تَفْصِلُ الحُرُوفَ المَوْصُولَةَ).

ب- تَبَاعُدُ الكَلِمَاتِ: word-spacing

تُحَدِّدُ الفَرَاغَ بَيْنَ الكَلِمَاتِ نَفْسِهَا. هِيَ فَعَّالَةٌ جِدًّا مَعَ اللُّغَةِ العَرَبِيَّةِ عِنْدَمَا نُرِيدُ تَوْسِيعَ السَّطْرِ دُونَ الِاعْتِمَادِ الكَامِلِ عَلَى الضَّبْطِ (Justify).

جـ- ارْتِفَاعُ السَّطْرِ: line-height

الخَاصِّيَّةُ الأَهَمُّ عَلَى الإِطْلَاقِ! تُحَدِّدُ المِسَاحَةَ الرَّأْسِيَّةَ بَيْنَ الأَسْطُرِ. فِي النُّصُوصِ العَرَبِيَّةِ، نَحْتَاجُ دَائِمًا إِلَى قِيمَةِ line-height أَعْلَى مِنَ الاِفْتِرَاضِيَّةِ (تَتَرَاوَحُ بَيْنَ 1.6 إِلَى 1.8) لِأَنَّ الحُرُوفَ العَرَبِيَّةَ تَحْتَوِي عَلَى نُقَاطٍ وَحَرَكَاتٍ تَشْكِيلِيَّةٍ صَاعِدَةٍ وَهَابِطَةٍ تَتَطَلَّبُ مِسَاحَةً كَافِيَّةً لِكَيْ لَا تَتَدَاخَلَ.

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

p.arabic-paragraph {
    word-spacing: 2px;      /* زِيَادَةُ الفَرَاغِ بَيْنَ الكَلِمَاتِ بِمِقْدَارِ 2 بِكْسِل */
    line-height: 1.8;       /* ارْتِفَاعٌ مِثَالِيٌّ لِمَقَالٍ عَرَبِيٍّ مُشَكَّلٍ */
}

3. تَنْسِيقُ الِالْتِفَافِ وَالفَيَضَانِ (Text Wrapping & Overflow)

مَاذَا يَحْدُثُ عِنْدَمَا تَكُونُ الكَلِمَةُ طَوِيلَةً جِدًّا (مِثْلَ رَابِطِ URL طَوِيلٍ) وَتَصِلُ إِلَى حَافَّةِ الصُّنْدُوقِ الحَاضِنِ؟ هُنَا نَحْتَاجُ لِتَوْجِيهِ المُتَصَفِّحِ لِكَيْ لَا يَنْكَسِرَ التَّصْمِيمُ.

أ- الخَاصِّيَّةُ: white-space

تَتَحَكَّمُ فِي كَيْفِيَّةِ التَّعَامُلِ مَعَ المِسَاحَاتِ الفَارِغَةِ وَالِانْتِقَالِ لِأَسْطُرٍ جَدِيدَةٍ.

  • normal: تِلْقَائِيٌّ، يَلْتَفُّ النَّصُّ عِنْدَ نِهَايَةِ السَّطْرِ.
  • nowrap: مَنْعُ النَّصِّ مِنَ الِالْتِفَافِ نِهَائِيًّا، حَيْثُ يَسْتَمِرُّ كُلُّ النَّصِّ عَلَى سَطْرٍ وَاحِدٍ أُفُقِيٍّ حَتَّى لَوْ خَرَجَ عَنِ الشَّاشَةِ.

ب- الخَاصِّيَّةُ: word-break وَ overflow-wrap

تُجْبِرُ هَذِهِ الخَصَائِصُ المُتَصَفِّحَ عَلَى كَسْرِ الكَلِمَةِ الطَّوِيلَةِ نَفْسِهَا وَنَقْلِ جُزْءٍ مِنْهَا لِلسَّطْرِ التَّالِي إِذَا كَانَتْ سَتُسَبِّبُ فَيَضَانًا (Overflow).

  • word-break: break-all;: يَقُومُ بِقَطْعِ الكَلِمَةِ عِنْدَ أَيِّ حَرْفٍ تَصِلُ فِيهِ إِلَى الحَافَّةِ.
  • overflow-wrap: break-word;: (المَعْرُوفَةُ سَابِقًا بِـ word-wrap) وَهِيَ الأَكْثَرُ ذَكَاءً؛ لِأَنَّهَا تَبْحَثُ أَوَّلًا عَنْ مَكَانٍ لِلْكَلِمَةِ فِي السَّطْرِ التَّالِي، فَإِذَا كَانَتْ لَا تَزَالُ أَطْوَلَ مِنَ المِسَاحَةِ، تَقُومُ بِكَسْرِهَا.

جـ- قَصُّ النَّصِّ مَعَ النُّقَاطِ الثَّلَاثِ: text-overflow

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

مِثَالٌ جَامِعٌ لِقَصِّ النَّصِّ الزَّائِدِ:

.card-description-preview {
    white-space: nowrap;       /* مَنْعُ النَّصِّ مِنَ الِانْتِقَالِ لِسَطْرٍ جَدِيدٍ */
    overflow: hidden;          /* إِخْفَاءُ أَيِّ كَلِمَاتٍ تَخْرُجُ عَنِ الصُّنْدُوقِ */
    text-overflow: ellipsis;   /* إِضَافَةُ النُّقَاطِ الثَّلَاثِ (...) فِي النِّهَايَةِ تِلْقَائِيًّا */
}
💡 نَصِيحَةُ المُحْتَرِفِينَ لِلْقِرَاءَةِ العَرَبِيَّةِ: إِنَّ إِعْطَاءَ الفَقَرَاتِ العَرَبِيَّةِ الطَّوِيلَةِ خَاصِّيَّةَ line-height: 1.7; مَعَ ضَبْطِ تَدَفُّقِ الكَلِمَاتِ عَبْرَ overflow-wrap: break-word; يُؤَمِّنُ لِمَوْقِعِكَ حِمَايَةً كَامِلَةً مِنَ اِنْفِجَارِ التَّصْمِيمِ عَلَى شَاشَاتِ الهَوَاتِفِ الذَّكِيَّةِ، وَيَضْمَنُ تَنَاسُقَ الخُطُوطِ دُونَ تَدَاخُلِ الحَرَكَاتِ الإِعْرَابِيَّةِ.
google-playkhamsatmostaqltradent