الطباعة وتصميم النص

فهم الطباعة في Tailwind

الطباعة هي واحدة من أهم جوانب تصميم الويب. الطباعة الجيدة تعزز القراءة، وتؤسس تسلسلاً بصريًا، وتخلق مظهرًا احترافيًا. يوفر Tailwind مجموعة شاملة من الأدوات للتحكم في كل جانب من جوانب تصميم النص.

عائلات الخطوط

يتضمن Tailwind ثلاث عائلات خطوط افتراضية بناءً على مكدسات خطوط النظام للحصول على أداء مثالي:

<!-- Sans-serif (افتراضي) - نظيف، حديث -->
<p class="font-sans">
    هذا نص sans-serif. الأفضل لنص الجسم والعناوين وعناصر واجهة المستخدم.
    Uses: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, etc.
</p>

<!-- Serif - تقليدي، رسمي -->
<p class="font-serif">
    هذا نص serif. الأفضل للوثائق التقليدية، القراءة طويلة الشكل.
    Uses: Georgia, Cambria, "Times New Roman", Times, serif
</p>

<!-- Monospace - كود، تقني -->
<p class="font-mono">
    هذا نص monospace. الأفضل لمقتطفات الكود، الوثائق التقنية.
    Uses: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
</p>

عائلات خطوط مخصصة

يمكنك إضافة خطوط مخصصة (Google Fonts، خطوط محلية، إلخ) من خلال ملف التكوين الخاص بك:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                // إضافة عائلات خطوط مخصصة
                'display': ['Playfair Display', 'serif'],
                'body': ['Inter', 'system-ui', 'sans-serif'],
                'heading': ['Poppins', 'sans-serif'],
                'code': ['Fira Code', 'monospace'],
            },
        },
    },
}

// الاستخدام في HTML
<h1 class="font-display">عنوان العرض</h1>
<p class="font-body">نص الجسم</p>
<code class="font-code">const code = true;</code>

تحميل خطوط مخصصة

<!-- في رأس HTML الخاص بك -->
<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=Inter:wght@300;400;500;600;700;800;900&display=swap"
      rel="stylesheet">

<!-- أو استخدم @import في CSS -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
</style>

أحجام الخطوط

يوفر Tailwind مقياس حجم خط شامل من صغير جدًا إلى 9xl:

<p class="text-xs">نص صغير جدًا (0.75rem / 12px)</p>
<p class="text-sm">نص صغير (0.875rem / 14px)</p>
<p class="text-base">نص أساسي (1rem / 16px) - افتراضي</p>
<p class="text-lg">نص كبير (1.125rem / 18px)</p>
<p class="text-xl">نص كبير جدًا (1.25rem / 20px)</p>
<p class="text-2xl">نص 2X كبير (1.5rem / 24px)</p>
<p class="text-3xl">نص 3X كبير (1.875rem / 30px)</p>
<p class="text-4xl">نص 4X كبير (2.25rem / 36px)</p>
<p class="text-5xl">نص 5X كبير (3rem / 48px)</p>
<p class="text-6xl">نص 6X كبير (3.75rem / 60px)</p>
<p class="text-7xl">نص 7X كبير (4.5rem / 72px)</p>
<p class="text-8xl">نص 8X كبير (6rem / 96px)</p>
<p class="text-9xl">نص 9X كبير (8rem / 128px)</p>

تسلسل الطباعة العملي

<article class="max-w-3xl mx-auto p-8">

    <!-- العنوان الرئيسي - الأكبر، الأجرأ -->
    <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-4 leading-tight">
        الدليل الكامل للطباعة الحديثة للويب
    </h1>

    <!-- العنوان الفرعي - حجم متوسط، وزن أخف -->
    <p class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
        تعلم كيفية إنشاء نص جميل وقابل للقراءة يعزز تجربة المستخدم
        ويؤسس تسلسلاً بصريًا واضحًا.
    </p>

    <!-- معلومات التعريف - صغيرة، خفية -->
    <div class="flex items-center gap-4 text-sm text-gray-500 mb-12">
        <span>نُشر: 15 يناير 2026</span>
        <span>•</span>
        <span>8 دقائق قراءة</span>
        <span>•</span>
        <span>بواسطة أحمد محمد</span>
    </div>

    <!-- عنوان القسم -->
    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 mt-12">
        فهم الطباعة
    </h2>

    <!-- فقرة الجسم - حجم قراءة مريح -->
    <p class="text-lg text-gray-700 mb-6 leading-relaxed">
        الطباعة هي فن وتقنية ترتيب النوع لجعل اللغة المكتوبة
        مقروءة وقابلة للقراءة وجذابة عند عرضها. الطباعة الجيدة تعزز
        تجربة المستخدم من خلال جعل المحتوى سهل الاستهلاك والفهم.
    </p>

    <!-- عنوان القسم الفرعي -->
    <h3 class="text-2xl md:text-3xl font-semibold text-gray-900 mb-3 mt-8">
        المبادئ الأساسية
    </h3>

    <!-- قائمة بحجم مناسب -->
    <ul class="list-disc list-inside text-lg text-gray-700 space-y-2 mb-6">
        <li>القراءة: يجب أن يكون النص سهل القراءة</li>
        <li>التسلسل: يجب أن يبرز المحتوى المهم</li>
        <li>الاتساق: استخدم مجموعة محدودة من الأنماط</li>
        <li>التباعد: ارتفاع سطر وتباعد حروف مناسب</li>
    </ul>

    <!-- اقتباس - تصميم مميز -->
    <blockquote class="border-l-4 border-blue-500 pl-6 py-4 my-8 bg-blue-50">
        <p class="text-xl font-medium text-gray-800 italic mb-2">
            "الطباعة هي ما تبدو عليه اللغة."
        </p>
        <cite class="text-sm text-gray-600 not-italic">— Ellen Lupton</cite>
    </blockquote>

    <!-- عنوان صغير -->
    <h4 class="text-xl font-semibold text-gray-900 mb-2 mt-6">
        نصائح عملية
    </h4>

    <!-- نص صغير - تسمية توضيحية، تذييل -->
    <p class="text-sm text-gray-500 mt-12">
        آخر تحديث: 15 يناير 2026 | © 2026 دليل الطباعة
    </p>

</article>

وزن الخط

التحكم في سماكة النص باستخدام أدوات وزن الخط:

<p class="font-thin">رفيع (100)</p>
<p class="font-extralight">خفيف جدًا (200)</p>
<p class="font-light">خفيف (300)</p>
<p class="font-normal">عادي (400) - افتراضي</p>
<p class="font-medium">متوسط (500)</p>
<p class="font-semibold">شبه عريض (600)</p>
<p class="font-bold">عريض (700)</p>
<p class="font-extrabold">عريض جدًا (800)</p>
<p class="font-black">أسود (900)</p>

أفضل ممارسات وزن الخط

<!-- عنوان أساسي: عريض أو عريض جدًا -->
<h1 class="text-4xl font-bold">العنوان الرئيسي</h1>

<!-- عنوان ثانوي: شبه عريض -->
<h2 class="text-3xl font-semibold">عنوان القسم</h2>

<!-- نص الجسم: عادي (400) -->
<p class="text-base font-normal">نص فقرة عادي</p>

<!-- التركيز: متوسط أو شبه عريض -->
<strong class="font-semibold">نص مهم</strong>

<!-- إلغاء التركيز: خفيف -->
<span class="font-light text-gray-500">نص أقل أهمية</span>

ارتفاع السطر (Leading)

يتحكم ارتفاع السطر في التباعد الرأسي بين أسطر النص:

<!-- ارتفاعات سطر نسبية -->
<p class="leading-none">لا ارتفاع سطر (1)</p>
<p class="leading-tight">ارتفاع سطر ضيق (1.25)</p>
<p class="leading-snug">ارتفاع سطر مريح (1.375)</p>
<p class="leading-normal">ارتفاع سطر عادي (1.5) - افتراضي</p>
<p class="leading-relaxed">ارتفاع سطر مريح (1.625)</p>
<p class="leading-loose">ارتفاع سطر فضفاض (2)</p>

<!-- ارتفاعات سطر ثابتة -->
<p class="leading-3">ارتفاع السطر: 0.75rem (12px)</p>
<p class="leading-4">ارتفاع السطر: 1rem (16px)</p>
<p class="leading-5">ارتفاع السطر: 1.25rem (20px)</p>
<p class="leading-6">ارتفاع السطر: 1.5rem (24px)</p>
<p class="leading-10">ارتفاع السطر: 2.5rem (40px)</p>

أفضل ممارسات ارتفاع السطر

<!-- العناوين: ارتفاع سطر أضيق -->
<h1 class="text-5xl font-bold leading-tight">
    عنوان متعدد الأسطر مع تباعد ضيق للتأثير البصري
</h1>

<!-- نص الجسم: ارتفاع سطر مريح -->
<p class="text-lg leading-relaxed">
    فقرات الجسم تستفيد من ارتفاع سطر أكثر سخاءً (1.625 أو 1.75)
    للقراءة المريحة. هذا يقلل من إجهاد العين ويحسن الفهم.
</p>

<!-- نص صغير: ارتفاع سطر عادي -->
<p class="text-sm leading-normal">
    النص الصغير مثل التسميات التوضيحية يستخدم ارتفاع سطر عادي (1.5).
</p>

<!-- الأزرار/واجهة المستخدم: Leading-none للمحاذاة العمودية -->
<button class="px-4 py-2 bg-blue-600 text-white leading-none">
    نص الزر
</button>

تباعد الأحرف (Tracking)

يتحكم تباعد الأحرف في المسافة الأفقية بين الأحرف:

<p class="tracking-tighter">تباعد حروف أضيق (-0.05em)</p>
<p class="tracking-tight">تباعد حروف ضيق (-0.025em)</p>
<p class="tracking-normal">تباعد حروف عادي (0em) - افتراضي</p>
<p class="tracking-wide">تباعد حروف واسع (0.025em)</p>
<p class="tracking-wider">تباعد حروف أوسع (0.05em)</p>
<p class="tracking-widest">تباعد حروف الأوسع (0.1em)</p>

حالات استخدام تباعد الأحرف

<!-- نص أحرف كبيرة: تباعد أوسع للقراءة -->
<h3 class="text-sm uppercase tracking-wider text-gray-600">
    تسمية القسم
</h3>

<!-- عناوين أحرف كبيرة بالكامل: تباعد أوسع -->
<h2 class="text-2xl uppercase tracking-widest font-bold">
    المنتجات المميزة
</h2>

<!-- عناوين كبيرة: تباعد أضيق للكثافة البصرية -->
<h1 class="text-6xl font-bold tracking-tight">
    عنوان البطل
</h1>

<!-- نص الجسم: تباعد عادي (افتراضي) -->
<p class="text-base tracking-normal">
    نص الفقرة العادي يستخدم تباعد الأحرف الافتراضي.
</p>

<!-- العلامات/التسميات: تباعد أوسع قليلاً -->
<span class="text-xs uppercase tracking-wide bg-blue-100 text-blue-800 px-2 py-1">
    جديد
</span>

محاذاة النص

<p class="text-left">نص محاذى لليسار (افتراضي في اللغات LTR)</p>
<p class="text-center">نص محاذى للمنتصف</p>
<p class="text-right">نص محاذى لليمين</p>
<p class="text-justify">نص مبرر يمتد لملء العرض الكامل</p>

<!-- محاذاة متجاوبة -->
<p class="text-center md:text-left">
    محاذى للمنتصف على الموبايل، لليسار على التابلت وما فوق
</p>

زخرفة النص

<!-- خط سفلي -->
<p class="underline">نص مسطر</p>
<p class="underline decoration-2">خط سفلي بسماكة 2px</p>
<p class="underline decoration-blue-500">خط سفلي أزرق</p>
<p class="underline decoration-wavy">خط سفلي متموج</p>
<p class="underline decoration-dotted">خط سفلي منقط</p>
<p class="underline decoration-double">خط سفلي مزدوج</p>

<!-- خط علوي -->
<p class="overline">نص بخط علوي</p>

<!-- خط عبر -->
<p class="line-through">نص مشطوب</p>

<!-- بدون زخرفة -->
<a href="#" class="no-underline">رابط بدون خط سفلي</a>

<!-- حالات التحويم -->
<a href="#" class="no-underline hover:underline">
    خط سفلي عند التحويم
</a>

إزاحة الخط السفلي

<p class="underline underline-offset-1">إزاحة صغيرة (1px)</p>
<p class="underline underline-offset-2">إزاحة متوسطة (2px)</p>
<p class="underline underline-offset-4">إزاحة كبيرة (4px)</p>
<p class="underline underline-offset-8">إزاحة كبيرة جدًا (8px)</p>

<!-- رابط أنيق مع خط سفلي مخصص -->
<a href="#" class="underline underline-offset-4 decoration-2 decoration-blue-500
                     hover:decoration-blue-700 transition-colors">
    رابط جميل
</a>

تحويل النص

<p class="uppercase">نص بأحرف كبيرة</p>
<p class="lowercase">نص بأحرف صغيرة</p>
<p class="capitalize">حرف كبير لكل كلمة</p>
<p class="normal-case">حالة عادية (يزيل التحويل)</p>

<!-- حالة استخدام شائعة: التسميات والعلامات -->
<span class="text-xs uppercase tracking-wide text-gray-600">
    تسمية الفئة
</span>

فيض النص والاقتطاع

<!-- اقتطاع مع علامة حذف (سطر واحد) -->
<p class="truncate w-64">
    هذا نص طويل جدًا سيتم اقتطاعه مع علامة حذف...
</p>

<!-- علامة حذف نصية (يتطلب white-space وoverflow) -->
<p class="overflow-hidden text-ellipsis whitespace-nowrap w-64">
    نص طويل سيتم قطعه مع علامة حذف
</p>

<!-- قص (بدون علامة حذف) -->
<p class="overflow-hidden text-clip whitespace-nowrap w-64">
    نص طويل سيتم قصه بدون علامة حذف
</p>

<!-- اقتطاع متعدد الأسطر (يتطلب إضافة @tailwindcss/line-clamp) -->
<p class="line-clamp-3">
    ستتم قتطاع هذه الفقرة بعد 3 أسطر مع علامة حذف في النهاية.
    سيتم إخفاء أي محتوى يتجاوز السطر الثالث. هذا مثالي لبطاقات المعاينة
    حيث تريد إظهار كمية محدودة من النص قبل أن ينقر المستخدم
    لقراءة المزيد.
</p>

إضافة Line Clamp

# تثبيت الإضافة
npm install -D @tailwindcss/line-clamp

// أضف إلى tailwind.config.js
plugins: [
    require('@tailwindcss/line-clamp'),
]

<!-- الاستخدام -->
<p class="line-clamp-1">اقتطاع سطر واحد</p>
<p class="line-clamp-2">اقتطاع سطرين</p>
<p class="line-clamp-3">اقتطاع ثلاثة أسطر</p>
<p class="line-clamp-none">إزالة الاقتطاع</p>

إضافة Typography

توفر إضافة Typography الرسمية إعدادات طباعة افتراضية جميلة للصفحات الثقيلة بالمحتوى:

# تثبيت
npm install -D @tailwindcss/typography

// أضف إلى tailwind.config.js
plugins: [
    require('@tailwindcss/typography'),
]

استخدام فئة Prose

<article class="prose lg:prose-xl max-w-none">
    <h1>عنوان المقال</h1>
    <p>
        تطبق فئة prose إعدادات طباعة افتراضية جميلة على HTML الفانيلا.
        لا تحتاج إلى إضافة فئات أدوات لكل عنصر - تتعامل الإضافة
        معها تلقائيًا.
    </p>

    <h2>عنوان القسم</h2>
    <p>
        العناوين والفقرات والقوائم والاقتباسات وكتل الكود والجداول - كل شيء
        يتم تصميمه تلقائيًا بتباعد وألوان وأحجام خطوط مثالية.
    </p>

    <ul>
        <li>تصميم قائمة صحيح</li>
        <li>تباعد متسق</li>
        <li>جميل افتراضيًا</li>
    </ul>

    <blockquote>
        يتم تصميم الاقتباسات بحدود خفية وتنسيق مميز.
    </blockquote>

    <pre><code>const code = true;
console.log('كتل الكود أيضًا!');</code></pre>
</article>

معدلات Prose

<!-- معدلات الحجم -->
<article class="prose-sm">Prose صغير</article>
<article class="prose">Prose أساسي (افتراضي)</article>
<article class="prose-lg">Prose كبير</article>
<article class="prose-xl">Prose كبير جدًا</article>
<article class="prose-2xl">Prose 2X كبير</article>

<!-- معدلات اللون -->
<article class="prose prose-slate">نظام ألوان Slate</article>
<article class="prose prose-gray">نظام ألوان Gray</article>
<article class="prose prose-zinc">نظام ألوان Zinc</article>
<article class="prose prose-neutral">نظام ألوان Neutral</article>
<article class="prose prose-stone">نظام ألوان Stone</article>

<!-- عكس للخلفيات الداكنة -->
<article class="prose prose-invert bg-gray-900">
    نص فاتح على خلفية داكنة
</article>

<!-- Prose متجاوب -->
<article class="prose md:prose-lg lg:prose-xl">
    صغير على الموبايل، أكبر على الديسكتوب
</article>

الملخص

في هذا الدرس، استكشفنا أدوات الطباعة الشاملة لـ Tailwind:

• عائلات الخطوط: Sans، serif، mono، والخطوط المخصصة
• أحجام الخطوط: مقياس شامل من xs إلى 9xl
• وزن الخط: رفيع (100) إلى أسود (900)
• ارتفاع السطر: التحكم في التباعد الرأسي بين الأسطر
• تباعد الأحرف: ضبط المسافة الأفقية بين الأحرف
• محاذاة النص: لليسار، المنتصف، اليمين، مبرر
• زخرفة النص: خط سفلي، خط علوي، خط عبر مع التخصيص
• تحويل النص: أحرف كبيرة، أحرف صغيرة، حرف كبير لكل كلمة
• فيض النص: اقتطاع، علامة حذف، line-clamp
• إضافة Typography: إعدادات افتراضية جميلة للصفحات الثقيلة بالمحتوى

أفضل الممارسات الرئيسية:

• إنشاء تسلسل واضح مع حجم الخط والوزن
• استخدام ارتفاعات سطر أضيق للعناوين (1.1-1.3)
• استخدام ارتفاعات سطر مريحة لنص الجسم (1.5-1.75)
• إضافة تباعد حروف أوسع للنص بأحرف كبيرة
• حد عائلات الخطوط إلى 2-3 كحد أقصى للاتساق
• حمّل فقط أوزان الخطوط التي تستخدمها فعليًا
• استخدام إضافة Typography لمحتوى المقالات/المدونات
• جعل الطباعة متجاوبة - اضبط الأحجام وارتفاعات الأسطر على الموبايل

تهانينا! لقد أكملت الدروس الخمسة الأولى من Tailwind CSS. أنت الآن تفهم مبادئ Utility-First، التثبيت، الأساسيات، الألوان، والطباعة. في الدروس التالية، سنغوص في أدوات التخطيط، التصميم المتجاوب، وميزات Tailwind المتقدمة.