شَرْحُ خَصَائِصِ مُحَاذَاةِ النُّصُوصِ فِي CSS
تَعْدِيلُ مَظْهَرِ النُّصُوصِ وَتَوْجِيهِهَا هُوَ الرَّكِيزَةُ الأَسَاسِيَّةُ لِأَيِّ تَصْمِيمٍ نَاجِحٍ عَلَى الوَيْبِ. فِي لُغَةِ CSS، تَتَعَدَّى مُحَاذَاةُ النُّصُوصِ مُجَرَّدَ وَضْعِ الكَلِمَاتِ فِي اليَمِينِ أَوِ اليَسَارِ؛ بَلْ تَمْتَدُّ لِتَشْمَلَ التَّحَكُّمَ فِي تَدَفُّقِ الأَسْطُرِ، وَمُحَاذَاةِ العَنَاصِرِ رَأْسِيًّا، وَتَحْدِيدِ هُوِيَّةِ اللُّغَةِ المَكْتُوبَةِ. فِي هَذَا الدَّلِيلِ، سَنَشْرَحُ أَرْبَعَ خَصَائِصَ جَوْهَرِيَّةٍ مَعَ الأَمْثِلَةِ التَّطْبِيقِيَّةِ.
1. الخَاصِّيَّةُ: text-align (المُحَاذَاةُ الأُفُقِيَّةُ)
تُسْتَخْدَمُ هَذِهِ الخَاصِّيَّةُ لِتَحْدِيدِ المُحَاذَاةِ الأُفُقِيَّةِ لِلنَّصِّ دَاخِلَ العُنْصُرِ الحَاضِنِ (Block Element).
أَبْرَزُ القِيَمِ المُنَاسِبَةِ:
-
right: مُحَاذَاةُ النَّصِّ إِلَى اليَمِينِ (مِثَالِيَّةٌ لِلُّغَةِ العَرَبِيَّةِ). -
left: مُحَاذَاةُ النَّصِّ إِلَى اليَسَارِ (مِثَالِيَّةٌ لِلُّغَاتِ اللَّاتِينِيَّةِ). -
center: وَضْعُ النَّصِّ فِي المُنْتَصَفِ (تُسْتَخْدَمُ غَالِبًا لِلْعَنَاوِينِ). -
justify: ضَبْطُ النَّصِّ تِلْقَائِيًّا لِيَتَسَاوَى بِدَايَةُ وَنِهَايَةُ الأَسْطُرِ عَلَى الجَانِبَيْنِ (مِثْلَ الجَرَائِدِ).
مِثَالٌ كُودِيٌّ:
p.article-title {
text-align: center; /* العُنْوَانُ فِي المُنْتَصَفِ */
}
p.article-body {
text-align: justify; /* ضَبْطُ أَسْطُرِ المَقَالِ */
}2. الخَاصِّيَّةُ: text-align-last (مُحَاذَاةُ السَّطْرِ الأَخِيرِ)
عِنْدَمَا نَسْتَخْدَمُ text-align: justify;، قَدْ يَبْدُو
السَّطْرُ الأَخِيرُ فِي الفَقْرَةِ غَرِيبًا إِذَا تَمَّ تَمْدِيدُهُ قَسْرًا.
هُنَا يَأْتِي دَوْرُ text-align-last الَّتِي تَتَحَكَّمُ فِي
مُحَاذَاةِ السَّطْرِ الأَخِيرِ فَقَطْ مِنَ الفَقْرَةِ
قَبْلَ الِانْتِقَالِ لِفَقْرَةٍ جَدِيدَةٍ.
أَبْرَزُ القِيَمِ:
-
right/left/center: مُحَاذَاةُ السَّطْرِ الأَخِيرِ لِلْجِهَةِ المُحَدَّدَةِ. -
justify: إِجْبَارُ السَّطْرِ الأَخِيرِ أَيْضًا عَلَى التَّمَدُّدِ لِيَمْلأَ الكُلَّ (غَالِبًا لَا يُفَضَّلُ جَمَالِيًّا لِقِصَرِ الكَلِمَاتِ).
مِثَالٌ كُودِيٌّ:
p.preview-text {
text-align: justify;
text-align-last: center; /* جَعْلُ خِتَامِ الفَقْرَةِ مُتَوَسِّطًا */
}3. الخَاصِّيَّةُ: direction (اتِّجَاهُ النَّصِّ وَالعَنَاصِرِ)
هَذِهِ لَيْسَتْ مُجَرَّدَ مُحَاذَاةٍ، بَلْ هِيَ تَحْدِيدُ اتِّجَاهِ تَدَفُّقِ القِرَاءَةِ (رَاقِبْ نُقَاطَ النِّهَايَةِ وَعَلَامَاتِ الِاسْتِفْهَامِ). كَمَا أَنَّهَا تُؤَثِّرُ عَلَى اتِّجَاهِ أَعْمِدَةِ الجَدَاوِلِ وَمُحَاذَاةِ القَوَائِمِ.
القِيَمُ الأَسَاسِيَّةُ:
-
rtl: (Right-to-Left) مِنَ اليَمِينِ إِلَى اليَسَارِ (لِلْعَرَبِيَّةِ وَالعِبْرِيَّةِ). -
ltr: (Left-to-Right) مِنَ اليَسَارِ إِلَى اليَمِينِ (لِلْإِنْجِلِيزِيَّةِ وَبَاقِي اللُّغَاتِ).
<html> لِيَفْهَمَ
المُتَصَفِّحُ بِنْيَةَ المَوْقِعِ كَامِلًا، لَكِنْ يُمْكِنُكَ
اسْتِخْدَامُهَا دَاخِلَ عَنَاصِرَ مُعَيَّنَةٍ (مِثْلَ فِقْرَةٍ مُقْتَبَسَةٍ
بِلُغَةٍ أُخْرَى).
مِثَالٌ كُودِيٌّ:
blockquote.english-quote {
direction: ltr; /* تَوْجِيهُ الِاقْتِبَاسِ الإِنْجِلِيزِيِّ صَحِيحًا دَاخِلَ المَوْقِعِ العَرَبِيِّ */
text-align: left;
}4. الخَاصِّيَّةُ: vertical-align (المُحَاذَاةُ الرَّأْسِيَّةُ)
هَذِهِ الخَاصِّيَّةُ مَشْهُورَةٌ بِأَنَّهَا تُسَبِّبُ ارْتِبَاكًا
لِلْمُطَوِّرِينَ؛ لِأَنَّهَا لَا تَعْمَلُ عَلَى عَنَاصِرِ
الكُتَلِ (Block Elements) مِثْلَ <div> أَوْ
<p>. بَلْ تُسْتَخْدَمُ حَصْرًا مَعَ العَنَاصِرِ
السَّطْرِيَّةِ (Inline) مِثْلَ النُّصُوصِ وَالصُّوَرِ، وَخَلَايَا
الجَدَاوِلِ (Table Cells).
أَبْرَزُ القِيَمِ:
-
baseline: القِيمَةُ الاِفْتِرَاضِيَّةُ، حَيْثُ يُحَاذِي العُنْصُرَ خَطَّ أَسَاسِ النَّصِّ. -
top: مُحَاذَاةُ أَعْلَى العُنْصُرِ مَعَ أَعْلَى عُنْصُرٍ فِي السَّطْرِ. -
middle: وَضْعُ العُنْصُرِ فِي المُنْتَصَفِ الرَّأْسِيِّ (مُفِيدَةٌ جِدًّا لِمُحَاذَاةِ أَيْقُونَةٍ بِجَانِبِ كَلِمَةٍ). -
bottom: مُحَاذَاةُ أَسْفَلِ العُنْصُرِ مَعَ أَسْفَلِ السَّطْرِ. -
super/sub: رَفْعُ النَّصِّ كَأُسٍّ (Superscript) أَوْ خَفْضُهُ كَدَلِيلٍ (Subscript).
مِثَالٌ كُودِيٌّ:
img.icon {
vertical-align: middle; /* جَعْلُ الأَيْقُونَةِ فِي مُنْتَصَفِ سَطْرِ النَّصِّ تَمَامًا */
}
span.square {
vertical-align: super; /* لِكِتَابَةِ مِثْلَ: مِتْر مُرَبَّع م² */
}مِثَالٌ تَطْبِيقِيٌّ جَامِعٌ
تَخَيَّلْ أَنَّ لَدَيْنَا جَدْوَلًا لِعَرْضِ بَيَانَاتِ المُوَظَّفِينَ، وَنُرِيدُ تَنْسِيقَ النُّصُوصِ فِيهِ بِاحْتِرَافِيَّةٍ:
table.employees-table {
direction: rtl; /* تَدَفُّقُ الجَدْوَلِ عَرَبِيٌّ */
width: 100%;
}
table.employees-table th {
text-align: center; /* عَنَاوِينُ الأَعْمِدَةِ فِي المُنْتَصَفِ */
vertical-align: bottom; /* مُحَاذَاةُ النَّصِّ لِأَسْفَلِ الخَلِيَّةِ */
}
table.employees-table td {
text-align: right; /* النُّصُوصُ تَبْدَأُ مِنَ اليَمِينِ */
vertical-align: middle; /* جَعْلُ بَيَانَاتِ المُوَظَّفِ مُتَوَسِّطَةً رَأْسِيًّا */
}direction: rtl; مَبْدَأَكَ الأَوَّلَ، ثُمَّ نَسِّقْ
جَمَالِيَّاتِ فَقَرَاتِكَ بِـ text-align: justify;، وَاضْبِطْ
نِهَايَاتِهَا الرَّائِعَةَ بِاسْتِخْدَامِ text-align-last!