{"id":"l-css-3-1","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"ابنِ خطوطًا ومسافات مرنة باستخدام clamp()، واحسب الميل ونقطة التقاطع من مقاسين في التصميم، وأبقِ النص قابلًا لتغيير الحجم للمستخدمين الذين يغيّرون حجم الخط.","html":"

عنوان الواجهة الرئيسية في Waypoint، «Two days of front-end, in Lisbon»، حجمه 48px في تصميم الحاسوب المحمول و28px في تصميم الهاتف. كان في التطبيق الأول ثلاث media queries، وكان العنوان يقفز بين ثلاثة أحجام كلما غيّرت حجم النافذة. لا أحد يغيّر حجم النافذة للتسلية، لكن الناس يديرون الأجهزة اللوحية، ويقسمون الشاشات، ويفتحون الصفحة في ألواح جانبية ضيّقة، وكل قفزة بين هذه الأحجام بدت عرضية.

\n

الخطوط المرنة (fluid type) تستبدل القفزات بخط مستقيم بين التصميمين.

\n

القيمة المرنة خط مستقيم

\n

لديك نقطتان من التصميم: عند viewport بعرض 20rem (320px) يكون العنوان 1.75rem؛ وعند 60rem (960px) يكون 3rem. بينهما تريده أن يكبر بالتناسب؛ وخارجهما يجب أن يتوقّف. هذه هي clamp() بقيمة مفضّلة خطية:

\n
type.css
.hero h1 {\n  font-size: clamp(1.75rem, 1.125rem + 3.125vw, 3rem);\n}
\n

القيمة الوسطى خط مستقيم، intercept + slope × width. الميل هو مقدار تغيّر الحجم لكل وحدة من العرض: (3 − 1.75) ÷ (60 − 20) = 0.03125، وهي بوحدة الـ viewport 3.125vw. ونقطة التقاطع هي حيث يقطع ذلك الخط العرض صفر: 1.75 − 0.03125 × 20 = 1.125rem. من السهل أن تخطئ في هذا الحساب يدويًا، لذا إليك دالة تستطيع تشغيلها:

\n
JavaScript
function fluid(minSize, maxSize, minWidth, maxWidth, unit = 'vw') {\n  // sizes and widths in rem\n  const slope = (maxSize - minSize) / (maxWidth - minWidth);\n  const intercept = minSize - slope * minWidth;\n  const round = (n) => Math.round(n * 1000) / 1000;\n  return `clamp(${minSize}rem, ${round(intercept)}rem + ${round(slope * 100)}${unit}, ${maxSize}rem)`;\n}\n\nconsole.log(fluid(1.75, 3, 20, 60));          // hero heading\nconsole.log(fluid(1, 1.75, 20, 50, 'cqi'));   // card title, container-based
\n

جرّب أزواجًا أخرى. مقاسان من التصميم يدخلان، وclamp() واحدة تخرج.

\n

لماذا تهمّ الـ rem

\n

تستطيع أن تكتب font-size: 5vw وتسمّيها خطًا مرنًا. لا تفعل. وحدات الـ viewport لا تعرف شيئًا عن تفضيلات الخط لدى المستخدم: من يضبط حجم النص الافتراضي في متصفّحه على 20px يحصل على الـ 5vw نفسها التي يحصل عليها الجميع. ومعيار Resize Text في WCAG يشترط أن يتمكّن النص من التكبير حتى 200% دون فقدان المحتوى، والخطوط التي تتجاهل إعدادات المستخدم تخذل أكثر الناس حاجةً إليها.

\n

إدراج حدّ من rem يُبقي المستخدم داخل المعادلة. مع 1.125rem + 3.125vw يكبر جزء الـ rem حين يرفع المستخدم حجمه الافتراضي، وتتحرّك حدود الـ rem معه.

\n\n

وهناك حافة رياضية يجب الانتباه إليها: إن كانت النسبة بين MAX وMIN كبيرة والميل حادًّا، فقد يقلّص التكبير المدى الفعلي كثيرًا حتى لا ينتج عن تكبير 200% نصٌّ بحجم 200%. أبقِ الحدّ الأقصى في حدود 2.5 ضعف الحدّ الأدنى للنصوص والعناوين، وستكون في أمان.

\n

الـ viewport أم الحاوية؟

\n

vw هي الصواب للخطوط المرتبطة بالصفحة: عنوان الواجهة الرئيسية وعنوان الصفحة. أما الخطوط داخل الـ component فاستخدم لها وحدات الحاوية. عنوان بطاقة الجلسة في الشريط الجانبي بعرض 280px وفي العمود الرئيسي بعرض 640px يجب أن يختلفا، وvw لا تستطيع التمييز بينهما. ومع الخانة كحاوية حجم (من الدرس السابق)، تعمل المعادلة نفسها مع cqi:

\n
CSS
.slot { container-type: inline-size; }\n\n.session-card h3 {\n  font-size: clamp(1rem, 0.5rem + 2.5cqi, 1.75rem);\n}
\n

مسافات مرنة

\n

الخطوط التي تتدرّج بينما يبقى الـ padding ثابتًا تبدو خاطئة عند الطرفين: مزدحمة على الشاشات الكبيرة، ومتباعدة على الصغيرة. عرّف بضعة tokens للمسافات بالتقنية نفسها واستخدمها في كل مكان:

\n
tokens.css
:root {\n  --space-s: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);\n  --space-m: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);\n  --space-l: clamp(1.5rem, 1rem + 2.5vw, 3rem);\n}\n\n.session-card { padding: var(--space-m); }\n.schedule     { gap: var(--space-l); }
\n

ثلاث درجات أو أربع تكفي. أكثر من ذلك ولن يتذكّر أحد أيّها يستخدم.

\n\n

دورك الآن

\n

عنوان البطاقة في التمرين يستخدم 5cqi، فيكبر بلا حدود ويتجاهل حجم خط المستخدم. استبدلها بـ clamp() تصيب 16px في خانة بعرض 320px و28px في خانة بعرض 800px، بحدود من rem. تغيّر الفحوصات عرض الخانة، بل وحجم خط الجذر أيضًا. وبعدها ستجعل الصفحة نفسها تعمل بالعربية، من اليمين إلى اليسار، باستخدام الخصائص المنطقية.

\n","toc":[{"id":"sec-1","text":"القيمة المرنة خط مستقيم","level":2},{"id":"sec-2","text":"لماذا تهمّ الـ rem","level":2},{"id":"sec-3","text":"الـ viewport أم الحاوية؟","level":2},{"id":"sec-4","text":"مسافات مرنة","level":2},{"id":"sec-5","text":"دورك الآن","level":2}],"takeaways":["القيمة المرنة خط مستقيم بين نقطتين: clamp(MIN, intercept + slope × width, MAX)، حيث الميل (slope) هو تغيّر الحجم مقسومًا على تغيّر العرض.","ضع rem في نقطة التقاطع (intercept) وفي الحدود ليظل النص يستجيب لحجم الخط الافتراضي لدى المستخدم وللتكبير؛ الأحجام المبنية على الـ viewport وحده لا تفعل ذلك.","استخدم vw للخطوط على مستوى الصفحة مثل عنوان الواجهة الرئيسية، وcqi للخطوط داخل الـ components التي تعيش في حاويات مختلفة العرض.","tokens المسافات المرنة مثل --space-m تُبقي الـ padding والفجوات متناسبة مع الخطوط دون breakpoint لكل منها."],"further":[{"title":"clamp() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp"},{"title":"Typography (web.dev Learn CSS)","url":"https://web.dev/learn/css/typography"},{"title":"Understanding Success Criterion 1.4.4: Resize Text (W3C)","url":"https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html"}],"quiz":[{"q":"

يجب أن يكون عنوانٌ 24px حين يكون عرض حاويته 400px، و40px عند 1200px، وأن يكبر خطيًا بينهما. أيّ قيمة مفضّلة تحقّق ذلك؟

","options":[{"text":"16px + 2cqi","why":"صحيح. الميل يساوي (40 − 24) / (1200 − 400) = 0.02، أي 2cqi؛ ونقطة التقاطع تساوي 24 − 0.02 × 400 = 16px."},{"text":"3cqi","why":"3cqi تساوي 12px عند 400px و36px عند 1200px؛ ودون نقطة تقاطع يمرّ الخط بالصفر، فلا يستطيع إصابة الهدفين معًا."},{"text":"24px + 2cqi","why":"هذا يساوي 32px عند 400px. نقطة التقاطع هي القيمة حين يكون العرض صفرًا، لا الحجم عند أصغر عرض."},{"text":"2px + 2cqi","why":"الميل صحيح، لكن 2px + 8px لا تساوي إلا 10px عند 400px؛ يجب أن تجعل نقطة التقاطع الخط يمرّ بـ 24px هناك."}],"answer":0},{"q":"

لماذا تُعدّ font-size: 4vw على نصوص المحتوى مشكلة في إمكانية الوصول؟

","options":[{"text":"قارئات الشاشة لا تستطيع قراءة نص حجمه بوحدات الـ viewport.","why":"قارئات الشاشة تتجاهل حجم الخط تمامًا؛ المشكلة بصرية."},{"text":"النص المحدّد حجمه بـ vw وحدها يتجاهل حجم الخط الافتراضي لدى المستخدم، فمن يضبط نصًا أكبر في متصفّحه لا يحصل عليه.","why":"صحيح. vw لا تتضمّن rem إطلاقًا؛ وخلطها بحدّ من rem (مع حدود بـ rem) يُبقي تفضيل المستخدم داخل الحساب."},{"text":"وحدات vw غير مدعومة في متصفّحات الهواتف.","why":"وحدات الـ viewport مدعومة في كل مكان؛ المشكلة أنها لا تستجيب لتفضيلات حجم الخط."}],"answer":1},{"q":"

تظهر بطاقة جلسة في شريط جانبي عرضه 280px وفي عمود رئيسي عرضه 700px في الصفحة نفسها. أيّ وحدة يجب أن يستخدمها عنوانها المرن؟

","options":[{"text":"vw، لأنها الوحدة المعتادة للخطوط المرنة.","why":"الـ viewport واحد للبطاقتين، فتعطي vw العنوانين الحجم نفسه رغم اختلاف الخانتين كثيرًا."},{"text":"em، لأنها تتدرّج مع حجم خط العنصر الأب.","why":"em تستجيب لحجم الخط لا للعرض المتاح، فلا تستطيع جعل العنوان مرنًا."},{"text":"cqi، داخل clamp() بحدود من rem.","why":"صحيح. cqi تقيس حاوية البطاقة، فتتدرّج كل بطاقة مع خانتها، وحدود rem تُبقي النتيجة مقروءة وقابلة للتعديل من المستخدم."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n

Fluid Type Without Breakpoints

\n

One clamp() instead of three media queries.

\n
\n
","css":".slot {\n container-type: inline-size;\n width: 480px; /* the checks change this width */\n}\n.session-card {\n padding: 16px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card h3 {\n margin: 0 0 8px;\n line-height: 1.2;\n font-size: 5cqi;\n}\n"},"solution":{"html":"
\n
\n

Fluid Type Without Breakpoints

\n

One clamp() instead of three media queries.

\n
\n
","css":".slot {\n container-type: inline-size;\n width: 480px; /* the checks change this width */\n}\n.session-card {\n padding: 16px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card h3 {\n margin: 0 0 8px;\n line-height: 1.2;\n font-size: clamp(1rem, 0.5rem + 2.5cqi, 1.75rem);\n}\n"},"checks":[{"id":"min-at-320","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; return Math.abs((await at(320)) - 16) < 0.3;"},{"id":"max-at-800","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; return Math.abs((await at(800)) - 28) < 0.3;"},{"id":"linear-between","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; return Math.abs((await at(560)) - 22) < 0.3;"},{"id":"clamped-outside","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; const small = await at(200); const big = await at(1200); return Math.abs(small - 16) < 0.3 && Math.abs(big - 28) < 0.3;"},{"id":"respects-user-size","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; const root = document.documentElement; root.style.fontSize = '20px'; await tick(16); const small = await at(200); const big = await at(1200); root.style.fontSize = ''; await tick(16); return Math.abs(small - 20) < 0.3 && Math.abs(big - 35) < 0.3;"}],"title":"عنوان بطاقة مرن","prompt":"

عنوان البطاقة يستخدم font-size: 5cqi، فيكبر بلا نهاية ويتجاهل حجم خط المستخدم. استبدله بـ clamp() بحيث يكون العنوان:

\n\n

اكتب الحدود بـ rem: الفحص الأخير يضبط حجم خط الجذر على 20px، ويجب أن تتدرّج الحدود معه (إلى 20px و35px). الخانة حاوية حجم أصلًا، لذا تقيسها cqi.

\n","hints":["الميل = (28 − 16) / (800 − 320) = 0.025، أي 2.5cqi.","نقطة التقاطع = 16 − 0.025 × 320 = 8px. اكتبها بـ rem لتتبع حجم خط المستخدم.","font-size: clamp(1rem, 0.5rem + 2.5cqi, 1.75rem);"],"explanation":"

القيمة المفضّلة هي الخط المستقيم المارّ بنقطتي التصميم: ميل 12px على 480px يساوي 0.025 (2.5cqi)، ونقطة التقاطع التي تضع 16px عند 320px هي 8px، أي 0.5rem. وتُبقي clamp() النتيجة بين 1rem و1.75rem. ولأن الحدود ونقطة التقاطع بـ rem، فإن المستخدم الذي يضبط حجمًا افتراضيًا 20px يحصل على مدى من 20px إلى 35px بدل أن يُحدّ من جديد بأحجام المصمّم؛ أما حدود الـ px فكانت ستفشل في هذا الفحص الأخير.

\n","checkLabels":{"min-at-320":"16px في خانة بعرض 320px","max-at-800":"28px في خانة بعرض 800px","linear-between":"22px في المنتصف، عند 560px","clamped-outside":"يبقى عند 16px تحت المدى وعند 28px فوقه","respects-user-size":"الحدود تتبع حجم خط المستخدم (rem لا px)"}},"words":586,"readMinutes":3}