الفصل 11: التنسيق المتقدم للنصوص (بالعامية المصرية)

text-align – text-transform – text-decoration – letter-spacing

---

✍️ 1️⃣ text-align – محاذاة النص

الخاصية دي بتخليك تتحكم في مكان الكلام جوه العنصر:
على الشمال؟ في النص؟ على اليمين؟ حسب اختيارك.

cssCopy codep {
  text-align: center;
}

القيم اللي ممكن تستخدمها:

القيمة	معناها بالعربي
left	محاذاة على الشمال (الافتراضي في الإنجليزي)
right	محاذاة على اليمين (الافتراضي في العربي)
center	في النص بالظبط
justify	يوزّع الكلام على السطر بحيث يملأه كله

📌 مثال:

cssCopy codeh1 {
  text-align: right;
}

---

🔠 2️⃣ text-transform – تحويل شكل الحروف

دي بتتحكم في طريقة عرض الحروف:

cssCopy codeh2 {
  text-transform: uppercase;
}

القيم اللي ممكن تستخدمها:

القيمة	معناها
uppercase	يحوّل الكلام لحروف كابيتال
lowercase	يحوّل كله لحروف صغيرة
capitalize	يخلي أول حرف من كل كلمة كابيتال
none	يخلي الكلام زى ما هو

📌 مثال:

cssCopy codep {
  text-transform: capitalize;
}

---

🔗 3️⃣ text-decoration – تزيين النص

دي خاصة مهمة في اللينكات مثلًا، عشان نتحكم في الخط اللي بيبقى تحت الكلام.

cssCopy codea {
  text-decoration: none;
}

القيم اللي تقدر تستخدمها:

القيمة	معناها
none	يشيل أي تزيين (زي الخط تحت اللينك)
underline	خط تحت الكلام
overline	خط فوق الكلام
line-through	خط في نُص الكلام (زي المحذوف)

📌 مثال:

cssCopy codeh3 {
  text-decoration: line-through;
}

---

↔️ 4️⃣ letter-spacing – المسافة بين الحروف

لو عايز تفرد الحروف عن بعض شوية:

cssCopy codeh1 {
  letter-spacing: 2px;
}

• القيمة بتكون بوحدة px أو em
• ممكن تكون بالسالب لو عايزهم يقربوا من بعض

📌 مثال:

cssCopy codep {
  letter-spacing: 1.5px;
}

---

💡 استخدام كل الحاجات دي مع بعض:

cssCopy code.title {
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
  letter-spacing: 3px;
}

---

✅ نصايح سريعة:

• استخدم capitalize مع العناوين عشان شكلها يبقى أنيق
• خليك حذر في استخدام letter-spacing مع الخط العربي (ممكن يبوظ شكله)
• text-align: justify مفيد في المقالات الطويلة