تنسيق النصوص — تصميم CSS

تنسيق النصوص والخطوط

النص هو معظم محتوى أي موقع؛ تنسيقه الجيد يصنع الفرق بين موقع مريح وموقع منفّر.

عائلة الخط

body {
    font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

قائمة احتياطية: إن لم يتوفر الأول يُجرَّب التالي، وتنتهي دائماً بعائلة عامة (sans-serif أو serif أو monospace). الأسماء التي فيها مسافات توضع بين علامات تنصيص.

خطوط الويب العربية (Google Fonts)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">

خطوط عربية شائعة: Cairo، Tajawal، Almarai، IBM Plex Sans Arabic، Noto Naskh Arabic. حمّل الأوزان التي تستخدمها فقط (كل وزن ملف إضافي)، و display=swap يعرض النص بخط احتياطي ريثما يُحمَّل الخط.

الحجم والوزن

html { font-size: 100%; }          /* 16px عادةً — احترم إعداد المستخدم */
body { font-size: 1rem; }
h1 { font-size: 2.25rem; font-weight: 700; }
small { font-size: 0.875rem; }

- استخدم rem للخطوط: تتبع إعداد حجم الخط في متصفح المستخدم (ضعاف البصر يكبّرونه). الوحدات بالتفصيل في درس الوحدات.

- font-weight: من 100 إلى 900 (400 عادي، 700 عريض) — لكن الخط يجب أن يدعم الوزن فعلاً.

ارتفاع السطر والمسافات

body { line-height: 1.7; }        /* بلا وحدة: 1.7 × حجم خط العنصر */
p { margin-block-end: 1em; max-width: 70ch; }

- النص العربي يحتاج ارتفاع سطر أكبر من اللاتيني (1.6–1.9) بسبب النقاط والحركات.

- اكتب line-height بلا وحدة ليُحسب نسبةً لكل عنصر.

- max-width: 70ch يحدد طول السطر (~70 حرفاً): الأسطر الطويلة جداً متعبة للعين.

- ⚠️ لا تستخدم letter-spacing مع العربية: الحروف العربية متصلة، والمسافات بينها تكسر الكلمات.

المحاذاة: start و end

p { text-align: start; }      /* بداية السطر: يمين في rtl ويسار في ltr */
.price { text-align: end; }
h1 { text-align: center; }

start و end أفضل من right و left: تعمل صحيحة مع العربية والإنجليزية دون تعديل. تجنب justify مع العربية في الشاشات الضيقة: يصنع فراغات كبيرة بين الكلمات.

الاتجاه

الاتجاه يُضبط في HTML بـ dir="rtl" على <html> (الأصح لأنه معنى وليس شكلاً). خاصية CSS direction: rtl موجودة لكنها للحالات الخاصة. نص إنجليزي داخل صفحة عربية: <span dir="ltr"> في HTML.

تنسيقات نصية أخرى

a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
.caps { text-transform: uppercase; }          /* للإنجليزية فقط: لا أحرف كبيرة في العربية */
.title { text-shadow: 0 1px 2px rgb(0 0 0 / 20%); }
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* قص بـ ... */

إزالة خط الروابط داخل النص تجعلها غير مميزة؛ إن أزلته فميّزها بلون واضح ووزن.

تمرين

أضف خط Tajawal بوزنين لصفحتك، واجعل حجم الأساس 1rem وارتفاع السطر 1.8، وحدد عرض الفقرات بـ 70ch، واستخدم text-align: start في كل مكان كنت تستخدم فيه right.

/* خصائص الخط الأساسية */
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* العناوين */
h1 {
    font-size: 2.5rem;      /* 40px */
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #2c3e50;
}

/* الفقرات */
p {
    font-size: 1rem;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 1em;
}

/* الروابط */
a {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
    color: #2980b9;
}

/* نص مميز */
.highlight-text {
    font-style: italic;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* خط عربي */
.arabic-text {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    direction: rtl;          /* النص العربي من اليمين لليسار */
    text-align: start;       /* start = اليمين في rtl */
}