تحكم كامل في المسافات بين النصوص في CSS

✨ تحكم كامل في المسافات بين النصوص في CSS

اليوم سنتعلم كيف نتحكم بكل دقة في المسافات التي تجعل نص موقعك يبدو جميلاً وسهل القراءة. تخيل أنك تقرأ كتاباً، إذا كانت الأسطر متلاصقة جداً سيكون من الصعب متابعتها، وإذا كانت الحروف متباعدة بشكل غريب ستفقد التركيز. في عالم الويب، لدينا ثلاث خصائص سحرية في CSS لعلاج هذه المشاكل: line-height و letter-spacing و word-spacing. هيا نبدأ!

📏 ما هو line-height؟ (ارتفاع السطر)

خاصية line-height تتحكم في المسافة الرأسية بين أسطر النص داخل العنصر. ببساطة، هي تحدد مقدار المساحة فوق وتحت كل سطر من النص. استخدامها الصحيح يحسن بشكل كبير سهولة قراءة الفقرات الطويلة.

القيمة: يمكن تعيينها بعدة طرق:

• رقم بدون وحدة (الأفضل للوراثة): مثل 1.5 أو 1.8. هذا الرقم مضروب في حجم الخط (font-size) للعنصر نفسه.
• بكسل (px): قيمة ثابتة مثل 24px.
• نسبة مئوية (%): مثل 150%.

مثال عملي:

/* ملف style.css */
p {
  font-size: 18px;
  line-height: 1.6; /* 18px * 1.6 = 28.8px بين كل سطر */
}

.intro-text {
  line-height: 2; /* مسافة أكبر بين الأسطر لجذب الانتباه */
}

footer p {
  line-height: 1.2; /* مسافة أقل لأن النص في الفوتر عادةً قصير */
}

في المثال أعلاه، النص داخل <p> العادية سيكون لديه مسافة بين الأسطر تساوي 18px * 1.6 = 28.8px. استخدام الرقم بدون وحدة (مثل 1.6) هو الأفضل لأنه يرث الحساب بناءً على حجم الخط، مما يمنع المشاكل إذا قمت بتغيير font-size لاحقاً.

🔠 ما هو letter-spacing؟ (تباعد الحروف)

خاصية letter-spacing تتحكم في المسافة الأفقية بين كل حرفين متجاورين في النص. تُستخدم عادةً لتحسين قراءة العناوين الكبيرة أو لإضافة لمسة تصميمية معينة.

القيمة: تُحدد بوحدات مثل px أو em. يمكن أن تكون القيمة موجبة (لزيادة التباعد) أو سالبة (لتقليل التباعد وجعل الحروف أقرب).

مثال عملي:

/* ملف style.css */
h1 {
  letter-spacing: 2px; /* يزيد المسافة بين حروف العنوان الرئيسي */
}

.logo {
  letter-spacing: 4px;
  font-weight: bold;
  /* يجعل شعار الموقع يبدو أنيقاً وواضحاً */
}

.dense-text {
  letter-spacing: -0.5px; /* يجعل الحروف أقرب قليلاً (استخدم بحذر) */
}

انتبه: الإكثار من letter-spacing بالقيم الإيجابية الكبيرة قد يجعل الكلمات صعبة القراءة. والقيم السالبة يجب استخدامها بحذر شديد كي لا تلتصق الحروف ببعضها.

🧱 ما هو word-spacing؟ (تباعد الكلمات)

خاصية word-spacing تتحكم في المسافة الأفقية بين كل كلمتين متجاورتين في النص. تأثيرها يشبه ضبط "المسافة بين الكلمات" في برامج معالجة النصوص مثل مايكروسوفت وورد.

القيمة: تُحدد أيضاً بوحدات مثل px أو em. يمكن أن تكون موجبة أو سالبة.

مثال عملي:

/* ملف style.css */
.poem {
  word-spacing: 5px; /* يعطي إحساساً بالفن والمساحة، كما في القصائد */
}

.narrow-column {
  word-spacing: -1px; /* قد يساعد في ضغط النص قليلاً داخل الأعمدة الضيقة */
}

في التطبيق العملي، word-spacing تُستخدم بشكل أقل تكراراً من line-height و letter-spacing، ولكنها أداة مفيدة عندما تريد تأثيراً تصميمياً محدداً أو تحسيناً دقيقاً للقراءة في ظروف خاصة.

🎨 مثال شامل يجمع كل الخصائص

لنرى كيف تعمل هذه الخصائص معاً لتحويل مظهر النص. سنقوم بتصميم عنوان رئيسي وفقرة بمظهر مريح للعين.

<!-- ملف index.html -->
<article>
  <h2 class="article-title">مستقبل التصميم الرقمي</h2>
  <p class="article-body">التصميم الجيد ليس مجرد شكل جميل، بل هو يجعل استخدام التطبيق أو الموقع تجربة سهلة وممتعة للمستخدم. الاهتمام بتفاصيل مثل تباعد الأسطر والحروف يلعب دوراً كبيراً في هذه التجربة.</p>
</article>

/* ملف style.css */
.article-title {
  font-size: 32px;
  letter-spacing: 1px; /* تباعد بسيط للحروف للوضوح */
  word-spacing: 3px;   /* مسافة مريحة بين كلمات العنوان */
  /* لم نحدد line-height للعنوان لأنه عادة سطر واحد */
}

.article-body {
  font-size: 18px;
  line-height: 1.7;     /* مسافة مريحة جداً بين أسطر الفقرة */
  letter-spacing: 0.3px; /* تباعد دقيق جداً لحروف الفقرة */
  /* لم نستخدم word-spacing هنا لأن القيمة الافتراضية مناسبة عادةً */
}

في هذا المثال، أصبح العنوان واضحاً وأنيقاً، بينما أصبح نص الفقرة مريحاً للقراءة لفترات طويلة بسبب ارتفاع السطر المناسب (line-height: 1.7).

🚀 ملخص سريع

• line-height: تحكم في المسافة بين الأسطر. استخدم قيماً بين 1.4 و 1.8 للفقرات لتحقيق أفضل قراءة. 📏
• letter-spacing: تحكم في المسافة بين الحروف. استخدمه بحكمة للعناوين أو لتحسين وضوح الخطوط. 🔠
• word-spacing: تحكم في المسافة بين الكلمات. أداة للتحكم الدقيق أو للتأثيرات التصميمية الخاصة. 🧱

تذكر: التوازن هو المفتاح. الهدف هو تحسين تجربة القارئ وجعل النص واضحاً وجميلاً دون مبالغة.