CSS3 والتصميم المتجاوب

الطباعة المتجاوبة

25 دقيقة الدرس 34 من 60

لماذا تحتاج الطباعة أن تكون متجاوبة

الطباعة ليست مجرد اختيار خط جميل. على الويب، يجب أن يكون النص قابلاً للقراءة على شاشة هاتف بحجم 4 بوصات وحاسوب محمول بحجم 13 بوصة وشاشة فائقة العرض بحجم 34 بوصة. العنوان الذي يبدو مثاليًا بحجم 48px على سطح المكتب قد يتجاوز الحدود أو يهيمن على الشاشة بالكامل على الهاتف. حجم نص المتن المريح على الجوال قد يبدو صغيرًا ومرهقًا على شاشة كبيرة يُنظر إليها من مسافة ذراع.

الطباعة المتجاوبة تعني أن نصك يتكيف تلقائيًا في الحجم والتباعد والنسب بناءً على منفذ العرض وسياق القراءة. عند تنفيذها بشكل جيد، تخلق تجربة قراءة مريحة في كل مكان دون أن يحتاج المستخدم إلى التكبير بالقرص أو التحديق. عند تنفيذها بشكل سيئ -- أو عدم تنفيذها أصلاً -- فهي أحد أكثر الأسباب شيوعًا لشعور المواقع بأنها مكسورة على أجهزة معينة.

في هذا الدرس، ستتعلم كل تقنية لجعل الطباعة متجاوبة، من الوحدات النسبية الأساسية إلى الطباعة المرنة الحديثة باستخدام clamp(). بنهاية الدرس، ستكون قادرًا على بناء نظام طباعة متجاوب كامل يعمل بسلاسة عبر جميع أحجام الشاشات.

استخدام الوحدات النسبية: rem و em

أساس الطباعة المتجاوبة هو استخدام الوحدات النسبية بدلاً من قيم البكسل الثابتة. أهم وحدتين نسبيتين للطباعة هما rem و em.

rem: وحدة Em الجذرية

وحدة rem نسبية إلى حجم خط العنصر الجذري (عنصر <html>). افتراضيًا، تحدد المتصفحات حجم الخط الجذري بـ 16px، لذا 1rem = 16px. الميزة الرئيسية لـ rem هي الاتساق: فهي تشير دائمًا إلى نفس القيمة الجذرية بغض النظر عن التداخل.

مثال: استخدام rem لأحجام الخطوط

/* الافتراضي في المتصفح: حجم خط html هو 16px */
/* لذا 1rem = 16px */

body {
    font-size: 1rem;      /* 16px */
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;    /* 40px */
    line-height: 1.2;
}

h2 {
    font-size: 2rem;      /* 32px */
    line-height: 1.3;
}

h3 {
    font-size: 1.5rem;    /* 24px */
    line-height: 1.4;
}

small {
    font-size: 0.875rem;  /* 14px */
}

/* التباعد بـ rem يحافظ على اتساق النسب */
.card {
    padding: 1.5rem;      /* 24px */
    margin-bottom: 2rem;  /* 32px */
}

/* إذا غيرت حجم الخط الجذري، كل شيء يتدرج */
html {
    font-size: 18px;  /* الآن 1rem = 18px، كل الأحجام تتكيف */
}

em: نسبية إلى الأب

وحدة em نسبية إلى حجم خط العنصر نفسه (أو أبيه، للخصائص غير font-size). هذا يجعل em مثالية للتباعد الداخلي للمكونات الذي يجب أن يتدرج مع حجم نص المكون:

مثال: استخدام em للتحجيم النسبي للمكونات

/* em نسبية إلى حجم خط العنصر نفسه */
.button {
    font-size: 1rem;
    padding: 0.5em 1.5em;   /* الحشوة تتدرج مع حجم الخط */
    border-radius: 0.25em;  /* نصف القطر يتدرج مع حجم الخط */
}

/* نفس الزر، أحجام مختلفة -- الحشوة تتكيف تلقائيًا */
.button--small {
    font-size: 0.875rem;    /* 14px -- الحشوة تصبح 7px 21px */
}

.button--large {
    font-size: 1.25rem;     /* 20px -- الحشوة تصبح 10px 30px */
}

/* تحذير: em تتراكم عند التداخل! */
.parent {
    font-size: 1.2em;       /* 1.2 * 16 = 19.2px */
}
.parent .child {
    font-size: 1.2em;       /* 1.2 * 19.2 = 23.04px (تراكم!) */
}
.parent .child .grandchild {
    font-size: 1.2em;       /* 1.2 * 23.04 = 27.65px (يستمر بالنمو!) */
}

خطأ شائع: استخدام em لأحجام الخطوط في العناصر المتداخلة بعمق يسبب التراكم -- كل مستوى يضرب حجم الأب. لهذا يُفضل rem لأحجام الخطوط (فهي تشير دائمًا إلى الجذر، بدون تراكم). استخدم em للحشوة والهوامش ونصف قطر الحدود داخل المكونات حيث تريد أن تتدرج الأحجام مع حجم خط المكون.

تعيين حجم خط أساسي على عنصر HTML

حجم خط عنصر <html> هو المرساة لجميع حسابات rem. تعيينه بتأنٍ يمنحك رافعة تحكم قوية لنظام الطباعة بأكمله. هناك عدة استراتيجيات:

مثال: استراتيجيات حجم الخط الأساسي

/* الاستراتيجية 1: استخدام الافتراضي للمتصفح (نقطة بداية موصى بها) */
html {
    font-size: 100%;  /* = 16px في معظم المتصفحات */
}

/* الاستراتيجية 2: حيلة 62.5% لحساب أسهل */
html {
    font-size: 62.5%;  /* أساس 10px: الآن 1rem = 10px */
}
body {
    font-size: 1.6rem;  /* إعادة تعيين المتن إلى مكافئ 16px */
}
h1 {
    font-size: 3.2rem;  /* 32px -- سهل الحساب! */
}

/* الاستراتيجية 3: أساس أكبر قليلاً لقابلية القراءة */
html {
    font-size: 112.5%;  /* أساس 18px */
}

/* الاستراتيجية 4: تعديل الأساس عند نقاط التوقف */
html {
    font-size: 100%;     /* 16px على الجوال */
}

@media (min-width: 768px) {
    html {
        font-size: 106.25%;  /* 17px على الأجهزة اللوحية */
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 112.5%;   /* 18px على سطح المكتب */
    }
}

@media (min-width: 1400px) {
    html {
        font-size: 125%;     /* 20px على الشاشات الكبيرة */
    }
}

نصيحة احترافية: استخدم دائمًا نسبة مئوية لحجم الخط الجذري، وليس قيمة بكسل ثابتة أبدًا. استخدام html { font-size: 16px; } يتجاوز إعداد حجم خط المتصفح للمستخدم، والذي يعتمد عليه كثير من المستخدمين ذوي الإعاقات البصرية. استخدام html { font-size: 100%; } يحترم تفضيلاتهم مع الاستمرار في منحك أساسًا يمكن التنبؤ به لحسابات rem.

الطباعة المرنة مع clamp()

دالة clamp() هي الحل الحديث للطباعة المرنة. تتيح لك تعيين حجم خط يتدرج بسلاسة مع منفذ العرض مع فرض حدود دنيا وقصوى. الصياغة هي:

clamp(الحد_الأدنى, القيمة_المفضلة, الحد_الأقصى)

يستخدم المتصفح القيمة المفضلة لكنه لا ينخفض أبدًا عن الحد الأدنى أو يتجاوز الحد الأقصى. عادةً ما تتضمن القيمة المفضلة وحدة منفذ عرض (vw) بحيث تتدرج مع عرض منفذ العرض.

مثال: الطباعة المرنة مع clamp()

/* حجم خط مرن أساسي */
h1 {
    /* الحد الأدنى: 2rem (32px)، المفضل: 5vw، الحد الأقصى: 4rem (64px) */
    font-size: clamp(2rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

p {
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
}

/* مقياس طباعة مرن كامل */
:root {
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --text-xl: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    --text-2xl: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    --text-3xl: clamp(1.875rem, 1rem + 3.5vw, 3rem);
    --text-4xl: clamp(2.25rem, 1rem + 5vw, 4rem);
}

/* استخدام الخصائص المخصصة */
body { font-size: var(--text-base); }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
.lead { font-size: var(--text-lg); }
.small { font-size: var(--text-sm); }
.caption { font-size: var(--text-xs); }

ملاحظة: القيمة المفضلة في clamp() تعمل بشكل أفضل عندما تجمع وحدة منفذ عرض مع وحدة ثابتة، مثل 1rem + 2vw. استخدام وحدة منفذ عرض وحدها (مثل 5vw فقط) يعني أن القيمة الوسطى ليس لها حد أدنى من مكون rem، مما يجعل الانتقال بين حدود clamp أقل سلاسة.

النهج القديم: استعلامات الوسائط لأحجام الخطوط

قبل أن يكون clamp() مدعومًا على نطاق واسع، استخدم المطورون استعلامات الوسائط لتغيير أحجام الخطوط عند نقاط توقف محددة. هذا النهج لا يزال يعمل وهو مفيد عندما تحتاج تحكمًا دقيقًا عند كل نقطة توقف، لكنه يخلق "قفزات" في الحجم بدلاً من تدرج سلس:

مثال: الطباعة القائمة على نقاط التوقف (النهج القديم)

/* الجوال أولاً: الأحجام الأساسية */
h1 { font-size: 1.75rem; }   /* 28px */
h2 { font-size: 1.5rem; }    /* 24px */
h3 { font-size: 1.25rem; }   /* 20px */
p  { font-size: 1rem; }      /* 16px */

/* الجهاز اللوحي */
@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }   /* 36px */
    h2 { font-size: 1.75rem; }   /* 28px */
    h3 { font-size: 1.5rem; }    /* 24px */
    p  { font-size: 1.0625rem; } /* 17px */
}

/* سطح المكتب */
@media (min-width: 1024px) {
    h1 { font-size: 3rem; }      /* 48px */
    h2 { font-size: 2.25rem; }   /* 36px */
    h3 { font-size: 1.75rem; }   /* 28px */
    p  { font-size: 1.125rem; }  /* 18px */
}

/* سطح مكتب كبير */
@media (min-width: 1400px) {
    h1 { font-size: 3.5rem; }    /* 56px */
    h2 { font-size: 2.5rem; }    /* 40px */
    h3 { font-size: 2rem; }      /* 32px */
}

عيب هذا النهج واضح: عند 767px يكون العنوان 28px، وعند 768px يقفز فجأة إلى 36px. لا يوجد انتقال سلس. نهج clamp() يزيل هذه القفزات تمامًا.

مقاييس الطباعة النمطية

يستخدم مقياس الطباعة النمطي نسبة ثابتة لتوليد مجموعة متناسقة من أحجام الخطوط. بدلاً من اختيار أحجام عشوائية، تضرب حجمًا أساسيًا في نسبة للحصول على كل خطوة في المقياس. هذا يخلق إيقاعًا بصريًا وتسلسلاً هرميًا يبدو مقصودًا ومتوازنًا.

مثال: تنفيذ مقياس طباعة نمطي

/* نسب مقياس الطباعة الشائعة:
   الثانية الصغرى:    1.067
   الثانية الكبرى:    1.125
   الثالثة الصغرى:    1.2
   الثالثة الكبرى:    1.25
   الرابعة التامة:    1.333
   الرابعة الزائدة:   1.414
   الخامسة التامة:    1.5
   النسبة الذهبية:    1.618
*/

/* مثال: مقياس الثالثة الكبرى (النسبة 1.25) مع أساس 1rem */
/* كل خطوة: السابقة * 1.25 */
:root {
    --scale-ratio: 1.25;
    --text-sm: 0.8rem;          /* 1 / 1.25 */
    --text-base: 1rem;           /* الأساس */
    --text-md: 1.25rem;          /* 1 * 1.25 */
    --text-lg: 1.563rem;         /* 1.25 * 1.25 */
    --text-xl: 1.953rem;         /* 1.563 * 1.25 */
    --text-2xl: 2.441rem;        /* 1.953 * 1.25 */
    --text-3xl: 3.052rem;        /* 2.441 * 1.25 */
}

/* تطبيق المقياس */
body { font-size: var(--text-base); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
small { font-size: var(--text-sm); }

/* متجاوب: استخدام نسبة أضيق على الشاشات الصغيرة */
/* الثالثة الصغرى (1.2) للجوال، الثالثة الكبرى (1.25) لسطح المكتب */
:root {
    --text-sm: 0.833rem;
    --text-base: 1rem;
    --text-md: 1.2rem;
    --text-lg: 1.44rem;
    --text-xl: 1.728rem;
    --text-2xl: 2.074rem;
    --text-3xl: 2.488rem;
}

@media (min-width: 1024px) {
    :root {
        --text-sm: 0.8rem;
        --text-base: 1rem;
        --text-md: 1.25rem;
        --text-lg: 1.563rem;
        --text-xl: 1.953rem;
        --text-2xl: 2.441rem;
        --text-3xl: 3.052rem;
    }
}

نصيحة احترافية: يمكنك الجمع بين المقاييس النمطية و clamp() للحصول على أفضل ما في العالمين. استخدم قيم مقياس الجوال كحد أدنى وقيم مقياس سطح المكتب كحد أقصى وحسابًا قائمًا على منفذ العرض كقيمة مفضلة. هذا يمنحك تحجيمًا متناسقًا عند كل عرض لمنفذ العرض.

طول السطر (المقياس): قاعدة 45-75 حرفًا

طول السطر، المسمى أيضًا "المقياس" في مصطلحات الطباعة، هو أحد أكثر جوانب التصميم المتجاوب إهمالاً. تُظهر الأبحاث باستمرار أن سطور النص بين 45 و 75 حرفًا (شاملة المسافات) توفر أكثر تجربة قراءة راحة. الأسطر الأقصر من 45 حرفًا تجعل العين تقفز إلى الخلف بشكل متكرر. الأسطر الأطول من 75 حرفًا تصعب إيجاد بداية السطر التالي.

مثال: التحكم في طول السطر بوحدات ch

/* وحدة ch = عرض حرف "0" في الخط الحالي */
/* توفر تقريبًا لعدد الأحرف في كل سطر */

/* عرض القراءة المثالي */
.prose {
    max-width: 65ch;  /* حوالي 65 حرفًا في السطر */
    margin: 0 auto;
}

/* أعرض للمحتوى التقني مع أمثلة الكود */
.technical-content {
    max-width: 75ch;
}

/* أضيق للنص الكبير مثل الاقتباسات البارزة */
blockquote.pull-quote {
    max-width: 45ch;
    font-size: var(--text-xl);
    margin: 2rem auto;
}

/* طول سطر متجاوب */
.article-body {
    max-width: 65ch;
    padding: 0 1rem;
    margin: 0 auto;
}

/* على الشاشات العريضة جدًا، توسيط المحتوى */
@media (min-width: 1200px) {
    .article-body {
        max-width: 70ch;
        padding: 0;
    }
}

/* عروض مختلفة لعناصر مختلفة */
.card p {
    max-width: 45ch;  /* البطاقات أضيق */
}

.hero p {
    max-width: 55ch;  /* نص البطل أعرض قليلاً */
    font-size: var(--text-lg);
}

ملاحظة: وحدة ch تستند إلى عرض رمز "0"، وليس متوسط عرض الحرف. في الخطوط المتناسبة، سيختلف عدد الأحرف الفعلي في كل سطر. استخدم ch كتقريب عملي وليس عدادًا دقيقًا للأحرف. لمعظم خطوط المتن، 65ch تنتج سطورًا من حوالي 60-70 حرفًا، وهو ما يقع ضمن النطاق المثالي.

تعديلات ارتفاع السطر المتجاوبة

ارتفاع السطر (المسافة بين السطور) يؤثر على قابلية القراءة بقدر حجم الخط. يتغير ارتفاع السطر المثالي بناءً على حجم الخط وطول السطر وحجم الشاشة. النص الأكبر يحتاج ارتفاع سطر أقل نسبيًا، بينما النص الأصغر على الشاشات الضيقة يحتاج مساحة تنفس أكبر.

مثال: ارتفاع السطر المتجاوب

/* إرشادات ارتفاع السطر الأساسية:
   نص المتن: 1.5 - 1.7
   العناوين: 1.1 - 1.3
   النص الصغير: 1.6 - 1.8
   نص العرض الكبير: 1.0 - 1.15
*/

body {
    line-height: 1.6;  /* افتراضي جيد لنص المتن */
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;  /* ضيق للعناوين الكبيرة */
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.2;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.3;
}

p {
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
    line-height: 1.6;
}

/* ارتفاع سطر مرن باستخدام clamp */
.article-body {
    /* ارتفاع سطر أضيق على الشاشات الكبيرة (حيث السطور أطول)،
       أكثر اتساعًا على الشاشات الصغيرة */
    line-height: clamp(1.5, 1.3 + 0.8vw, 1.7);
}

/* تعديل ارتفاع السطر لسياقات مختلفة */
.narrow-column p {
    line-height: 1.5;  /* السطور الأقصر تحتاج مسافة أقل بين السطور */
}

.wide-column p {
    line-height: 1.8;  /* السطور الأطول تحتاج مسافة أكبر بين السطور */
}

/* ارتفاع سطر مضغوط لعناصر واجهة المستخدم */
.nav-item {
    line-height: 1.2;
}

.button {
    line-height: 1;  /* توسيط عمودي لنص الزر ذو السطر الواحد */
}

تسلسل العناوين الهرمي عبر أحجام الشاشات

التسلسل الهرمي الواضح للعناوين ضروري لكل من قابلية القراءة وإمكانية الوصول. على الشاشات الكبيرة، يمكنك تحمل فروقات حجم كبيرة بين مستويات العناوين. على الشاشات الصغيرة، يجب أن تكون الفروقات أدق لأن هناك مساحة أقل. المفتاح هو الحفاظ على تسلسل هرمي مرئي عند كل نقطة توقف مع عدم السماح أبدًا للعناوين بأن تصبح كبيرة جدًا لمنفذ العرض.

مثال: تسلسل عناوين هرمي متجاوب

/* استخدام clamp لعناوين متجاوبة سلسة */
h1 {
    font-size: clamp(1.875rem, 1.5rem + 2.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.875rem);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.4em;
}

h4 {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1.25em;
    margin-bottom: 0.3em;
}

h5 {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1em;
    margin-bottom: 0.3em;
}

h6 {
    font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-top: 1em;
    margin-bottom: 0.3em;
}

/* عناوين العرض لأقسام البطل */
.display-1 {
    font-size: clamp(2.5rem, 2rem + 4vw, 5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.display-2 {
    font-size: clamp(2rem, 1.5rem + 3vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

وحدات منفذ العرض للطباعة ومشكلة إمكانية الوصول

يمكن استخدام وحدات منفذ العرض (vw، vh) مباشرة لأحجام الخطوط، مما يخلق نصًا يتدرج خطيًا مع منفذ العرض. ومع ذلك، استخدام وحدات منفذ العرض وحدها يخلق مشكلة إمكانية وصول خطيرة.

مثال: وحدات منفذ العرض ومشاكلها

/* استخدام vw وحدها -- لا تفعل هذا */
h1 {
    font-size: 5vw;
    /* عند منفذ عرض 320px: 16px (صغير جدًا!) */
    /* عند منفذ عرض 1920px: 96px (كبير جدًا!) */
    /* المشكلة: لا يمكن للمستخدم تكبيرها! */
    /* تكبير نص المتصفح يؤثر فقط على px و em و rem -- وليس vw */
}

/* لماذا هذا فشل في إمكانية الوصول: */
/* المستخدمون الذين يحددون حجم خط أكبر في إعدادات المتصفح */
/* لن يروا أي تغيير لأن vw تتجاهل تفضيلاتهم */
/* WCAG 1.4.4 يتطلب أن يكون النص قابلاً لتغيير الحجم حتى 200% */

/* الطريقة الصحيحة: دمج vw مع وحدة نسبية */
h1 {
    font-size: calc(1.5rem + 3vw);
    /* جزء rem يستجيب لتكبير/إعدادات المستخدم */
    /* جزء vw يضيف تدرجًا قائمًا على منفذ العرض */
    /* عند 320px: 24px + 9.6px = 33.6px */
    /* عند 1920px: 24px + 57.6px = 81.6px */
    /* لا يزال بإمكان المستخدم تكبير جزء rem */
}

/* أفضل: استخدام clamp لتعيين الحدود */
h1 {
    font-size: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    /* متاح للوصول: قيم rem تستجيب للتكبير */
    /* محدود: لا تكون صغيرة جدًا أو كبيرة جدًا أبدًا */
}

تحذير إمكانية الوصول: لا تستخدم أبدًا وحدات منفذ العرض (vw، vh) كوحدة وحيدة لأحجام الخطوط. عندما يكون حجم النص بوحدات منفذ العرض فقط، لا يمكن للمستخدمين تغيير حجمه باستخدام تكبير المتصفح أو إعدادات حجم الخط. هذا ينتهك معيار نجاح WCAG 1.4.4 (تغيير حجم النص). ادمج دائمًا وحدات منفذ العرض مع rem أو em، أو استخدم clamp() مع حدود دنيا وقصوى قائمة على rem.

calc() للطباعة المرنة (نهج ما قبل clamp)

قبل أن يكون clamp() مدعومًا، استخدم المطورون calc() لإنشاء طباعة مرنة. تُسمى هذه التقنية أحيانًا "أقفال CSS" لأنها تقفل حجم الخط بين قيمة دنيا وقصوى. فهمها قيّم لصيانة الكود القديم ولاستيعاب الرياضيات وراء الطباعة المرنة.

مثال: الطباعة المرنة مع calc()

/* صيغة "أقفال CSS":
   font-size: calc(الحجم_الأدنى + (الحجم_الأقصى - الحجم_الأدنى) *
              ((100vw - منفذ_العرض_الأدنى) / (منفذ_العرض_الأقصى - منفذ_العرض_الأدنى)));
*/

/* مثال: التدرج من 16px عند منفذ عرض 320px إلى 24px عند منفذ عرض 1200px */
h2 {
    /* أقل من 320px: ثابت عند 1rem */
    font-size: 1rem;
}

@media (min-width: 320px) {
    h2 {
        /* مرن بين 320px و 1200px */
        font-size: calc(1rem + (1.5 - 1) * ((100vw - 20rem) / (75 - 20)));
        /* مبسط: */
        font-size: calc(1rem + 0.5 * ((100vw - 20rem) / 55));
    }
}

@media (min-width: 1200px) {
    h2 {
        /* أعلى من 1200px: ثابت عند 1.5rem */
        font-size: 1.5rem;
    }
}

/* المكافئ الحديث مع clamp -- أبسط بكثير! */
h2 {
    font-size: clamp(1rem, 0.727rem + 0.909vw, 1.5rem);
    /* نفس النتيجة، سطر واحد، لا حاجة لاستعلامات وسائط */
}

/* توليد القيمة المفضلة لـ clamp:
   المفضلة = الحجم_الأدنى - (منفذ_العرض_الأدنى * الميل) + الميل * 100vw
   حيث الميل = (الحجم_الأقصى - الحجم_الأدنى) / (منفذ_العرض_الأقصى - منفذ_العرض_الأدنى)
   الميل = (24 - 16) / (1200 - 320) = 8/880 = 0.00909
   0.00909 * 100 = 0.909vw
   التقاطع = 16 - (320 * 0.00909) = 16 - 2.909 = 13.09px = 0.818rem
   النتيجة: clamp(1rem, 0.818rem + 0.909vw, 1.5rem)
*/

حزم خطوط النظام للأداء

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

مثال: حزم خطوط النظام

/* حزمة خطوط النظام الحديثة -- يستخدمها GitHub و Bootstrap وغيرهم */
body {
    font-family:
        system-ui,            /* المتصفحات الحديثة: الافتراضي لنظام التشغيل */
        -apple-system,        /* Safari على macOS و iOS */
        BlinkMacSystemFont,   /* Chrome على macOS */
        "Segoe UI",           /* Windows */
        Roboto,               /* Android */
        "Helvetica Neue",     /* macOS قديم */
        Arial,                /* بديل عالمي */
        sans-serif;           /* بديل عام */
}

/* حزمة خطوط النظام أحادية العرض للكود */
code, pre, kbd {
    font-family:
        ui-monospace,           /* المتصفحات الحديثة */
        SFMono-Regular,         /* Safari */
        "SF Mono",              /* macOS */
        Menlo,                  /* macOS قديم */
        Consolas,               /* Windows */
        "Liberation Mono",     /* Linux */
        "Courier New",          /* عالمي */
        monospace;              /* بديل عام */
}

/* حزمة خطوط النظام المذيلة */
.article-body {
    font-family:
        ui-serif,
        Georgia,
        Cambria,
        "Times New Roman",
        Times,
        serif;
}

/* إذا كنت تحتاج خطوطًا مخصصة، أضف دائمًا بديل نظام */
body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}

h1, h2, h3 {
    font-family: "Playfair Display", ui-serif, Georgia, serif;
}

تحميل الخطوط وتحول التخطيط (CLS)

عند استخدام خطوط ويب مخصصة، يجب على المتصفح تنزيل ملف الخط قبل أن يتمكن من عرض النص. خلال فترة التحميل هذه، يمكن أن يكون النص إما غير مرئي (FOIT -- وميض النص غير المرئي) أو يُعرض بخط بديل (FOUT -- وميض النص غير المنسق). كلاهما يسبب تحول التخطيط التراكمي (CLS)، وهو مقياس أساسي في مؤشرات الويب الحيوية يؤثر على تجربة المستخدم وتحسين محركات البحث.

مثال: تحسين تحميل الخطوط

/* 1. استخدام font-display للتحكم في سلوك التحميل */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;  /* عرض البديل فورًا، التبديل عند التحميل */
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* قيم font-display:
   auto     -- المتصفح يقرر (عادة FOIT)
   block    -- نص غير مرئي لمدة تصل إلى 3 ثوانٍ، ثم بديل
   swap     -- بديل فورًا، تبديل عند تحميل الخط (موصى به)
   fallback -- فترة قصيرة جدًا غير مرئية، ثم بديل دائم
   optional -- فترة غير مرئية دقيقة، قد يتخطى الخط المخصص تمامًا
*/

/* 2. مطابقة مقاييس الخط البديل لتقليل تحول التخطيط */
/* استخدام size-adjust ووصفات أخرى */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

body {
    font-family: "Inter", "Inter Fallback", sans-serif;
}

مثال: التحميل المسبق للخطوط الحرجة في HTML

/* في <head> HTML، حمّل مسبقًا الخطوط المستخدمة فوق الطي */
/* <link rel="preload" href="/fonts/inter-regular.woff2" */
/*       as="font" type="font/woff2" crossorigin> */

/* حمّل مسبقًا ملف خط واحد أو اثنين فقط (عادي وعريض). */
/* التحميل المسبق لخطوط كثيرة يهدر عرض النطاق الترددي. */

/* استخدم <link rel="preconnect"> لخدمات الخطوط الخارجية */
/* <link rel="preconnect" href="https://fonts.googleapis.com"> */
/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */

نصيحة احترافية: أفضل أداء للخطوط يأتي من الاستضافة الذاتية لملفات WOFF2 واستخدام font-display: swap مع خطوط بديلة مطابقة بعناية. هذا المزيج يعطي المستخدمين نصًا قابلاً للقراءة فورًا مع حد أدنى من تحول التخطيط عند تحميل الخط المخصص. استخدم أدوات مثل Fontaine أو Capsize لحساب قيم size-adjust و ascent-override تلقائيًا لخطك البديل.

نظام طباعة متجاوب عملي

دعنا نجمع كل شيء معًا في نظام طباعة متجاوب كامل وجاهز للإنتاج. يستخدم هذا النظام خصائص CSS المخصصة لمقياس الطباعة و clamp() للتحجيم المرن وأطوال سطور مناسبة وقيم افتراضية معقولة.

مثال: نظام طباعة متجاوب كامل

/* ========================================
   نظام الطباعة المتجاوبة
   ======================================== */

/* 1. تكوين الجذر */
html {
    /* احترام تفضيلات المستخدم، استخدام النسبة المئوية */
    font-size: 100%;

    /* تمكين تنعيم الخطوط */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* منع تضخم النص على الجوال */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 2. مقياس الطباعة المرن باستخدام clamp() */
:root {
    /* عائلات الخطوط */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono",
                 Menlo, Consolas, monospace;

    /* مقياس الطباعة: أحجام مرنة (حد أدنى للجوال -> حد أقصى لسطح المكتب) */
    --step--2: clamp(0.694rem, 0.66rem + 0.17vw, 0.8rem);
    --step--1: clamp(0.833rem, 0.78rem + 0.27vw, 1rem);
    --step-0:  clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
    --step-1:  clamp(1.2rem, 1.09rem + 0.57vw, 1.563rem);
    --step-2:  clamp(1.44rem, 1.28rem + 0.8vw, 1.953rem);
    --step-3:  clamp(1.728rem, 1.5rem + 1.14vw, 2.441rem);
    --step-4:  clamp(2.074rem, 1.75rem + 1.62vw, 3.052rem);
    --step-5:  clamp(2.488rem, 2.04rem + 2.24vw, 3.815rem);

    /* ارتفاعات السطور */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* التباعد القائم على الطباعة */
    --space-xs: 0.25em;
    --space-sm: 0.5em;
    --space-md: 1em;
    --space-lg: 1.5em;
    --space-xl: 2em;

    /* المقياس (طول السطر) */
    --measure-narrow: 45ch;
    --measure-normal: 65ch;
    --measure-wide: 80ch;
}

/* 3. الطباعة الأساسية */
body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-normal);
    color: var(--text-dark, #1a1a1a);
}

/* 4. العناوين */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    text-wrap: balance;  /* فواصل سطور أفضل للعناوين */
}

h1 {
    font-size: var(--step-5);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

h2 {
    font-size: var(--step-4);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

h3 {
    font-size: var(--step-3);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}

h4 {
    font-size: var(--step-2);
    line-height: var(--leading-snug);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}

h5 {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    margin-top: var(--space-md);
}

h6 {
    font-size: var(--step-0);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-md);
}

/* 5. نص المتن */
p {
    max-width: var(--measure-normal);
    margin-bottom: var(--space-md);
}

.lead {
    font-size: var(--step-1);
    line-height: var(--leading-relaxed);
    max-width: var(--measure-narrow);
}

small, .text-sm {
    font-size: var(--step--1);
}

.text-xs {
    font-size: var(--step--2);
}

/* 6. حاوية النثر */
.prose {
    max-width: var(--measure-normal);
    margin-inline: auto;
}

.prose p + p {
    margin-top: var(--space-md);
}

.prose h2 + p,
.prose h3 + p {
    margin-top: var(--space-sm);
}

/* 7. الكود */
code {
    font-family: var(--font-mono);
    font-size: 0.9em;  /* أصغر قليلاً من النص المحيط */
}

pre {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    max-width: var(--measure-wide);
    overflow-x: auto;
}

/* 8. الاقتباسات */
blockquote {
    font-size: var(--step-1);
    font-style: italic;
    line-height: var(--leading-relaxed);
    max-width: var(--measure-narrow);
    margin: var(--space-xl) auto;
    padding-right: var(--space-md);
    border-right: 3px solid currentColor;
}

/* 9. التعديلات المتجاوبة */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* 10. طباعة الورق */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        font-family: Georgia, serif;
    }

    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }
    h4 { font-size: 14pt; }

    p, li {
        max-width: none;
        orphans: 3;
        widows: 3;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}

ملاحظة: خاصية text-wrap: balance هي ميزة CSS أحدث توزع النص بشكل أكثر تساويًا عبر السطور في العناوين، مما يمنع كلمة واحدة حائرة في السطر الأخير. هي مدعومة في Chrome و Edge و Firefox. طبقها دائمًا على العناوين بدلاً من نص المتن، لأنها قد تكون مكلفة حسابيًا على الفقرات الطويلة.

تمرين عملي

ابنِ نظام طباعة متجاوب كامل لمدونة. ابدأ بتعريف مقياس طباعة مرن باستخدام clamp() مع 6 خطوات حجم على الأقل مخزنة في خصائص CSS مخصصة. عيّن حجم الخط الجذري إلى 100% لاحترام تفضيلات المستخدم. طبّق مقياس الطباعة على جميع مستويات العناوين (h1 إلى h6) مع ارتفاعات سطور مناسبة -- أضيق للعناوين الكبيرة وأكثر استرخاءً لنص المتن. عيّن max-width بقيمة 65ch على حاوية النثر لطول سطر مثالي. أضف حزمة خطوط نظام كافتراضي وحزمة أحادية العرض لعناصر الكود. أنشئ فئة .lead للفقرات التمهيدية التي تكون أكبر قليلاً من نص المتن. اختبر نظامك بعرض الصفحة عند عروض 320px و 768px و 1024px و 1920px -- يجب أن يتدرج النص بسلاسة بدون أي قفزات حادة في الحجم. تحقق من إمكانية الوصول باستخدام ميزة التكبير في متصفحك لزيادة حجم النص إلى 200%؛ يجب أن يبقى كل النص قابلاً للقراءة ولا يجب أن يتجاوز أي محتوى أو يُقطع. أخيرًا، أضف ورقة أنماط طباعة تستخدم أحجامًا بالنقاط مناسبة للورق.