HTML وCSS / أنظمة عرض قابلة للصيانة / الدرس 18
الطباعة والوسائط المقسمة إلى صفحات
صمم مستندا مطبوعا مفيدا بمحتوى صريح وتقسيم مقروء واختبار فعلي بدلا من افتراض نقل الشاشة كما هي.
في هذه الصفحة
أهداف الدرس
- الصفحة المطبوعة سياق قراءة آخر
- مذكرة طباعة مركزة
- التحقق من اكتمال المحتوى وحدود التصدير
الصفحة المطبوعة سياق قراءة آخر
للطباعة مساحة محدودة ولا توسع تفاعليا وتتحكم الإعدادات والطابعة بجزء من الناتج. قد يضيع شريط ثابت أو جواب مطوي أو لوحة تمرير على الورق. حدد المهمة كفاتورة أو مذكرة أو مقال، واحفظ العناوين والنص وأزل التحكم غير المفيد فقط. لا تخف أخطاء أو شروطا لتجميل الصفحة؛ يجب أن يمثل السجل المعلومة بصدق.
فصل الطباعة عن افتراضات الشاشة
استخدم @media print للعرض و@page لإعدادات مدعومة كالهوامش. تبقى رؤوس المتصفح والورق والتحجيم والخلفيات خاضعة للتنفيذ والمستخدم، فلا تضمن تقسيما متطابقا. بسط الأعمدة وأزل الثابت المغطي وأظهر النص المعتمد على التمرير. قد يغيب اللون فاحفظ الفرق بالكلمات والحدود. افحص معاينة الطباعة الفعلية لا صورة الشاشة.
مذكرة طباعة مركزة
يحوي المثال زر عرض محليا ومقالا، وتخفي الطباعة الزر وتحدد نصا داكنا وهوامش. الزر لا يرسل ولا يدعي وظيفة طباعة؛ ويمكن لتطبيق إضافة استدعاء مراجع، وتبقى قائمة المتصفح كافية. لا يعتمد المقال على صورة خلفية لتعريف موضوعه. افحص خيار الخلفيات والطباعة أحادية اللون قبل الاعتماد على التعبئة للفروق المهمة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Print handout</title>
<style>
body { font-family: system-ui, sans-serif; } @media print { .screen-only { display: none; } body { color: #000; background: #fff; } } @page { margin: 18mm; }
</style>
</head>
<body>
<main><button class="screen-only" type="button">Screen demonstration control</button><article><h1>Workshop handout</h1><p>Bring a text editor and keep these notes for reference.</p><h2>Preparation</h2><p>Review the semantic document examples.</p></article></main>
</body>
</html>
Print keeps the handout and omits the screen-only button.تزيل الطباعة التحكم المحلي فقط وتحفظ المقال، وتطلب الهوامش دون ادعاء تطابق الطابعات. النتيجة المتوقعة: تحفظ الطباعة المذكرة وتحذف زر الشاشة.
ضوابط التجزئة طلبات مقيدة
تطلب break-inside: avoid إبقاء الصندوق معا حيث يمكن ولا تضمن عدم تقسيم ما يزيد عن الصفحة. اربط العناوين بما يليها وكرر رؤوس الجداول عند الملاءمة وتجنب أغلفة ضخمة. يجمع المثال أقساما قصيرة ويطلب تجنب الفصل دون عدد صفحات مضمون. تفقد الروابط النقر على الورق وقد تحتاج وجهة مرئية، مع تجنب الأسرار وعناوين التتبع الطويلة والمرجع الجزئي غير المفيد.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fragmentation preferences</title>
<style>
section { padding: 1rem; border: 1px solid; margin-block: 1rem; } @media print { section { break-inside: avoid; } h2 { break-after: avoid; } }
</style>
</head>
<body>
<main><h1>Session notes</h1><section><h2>Structure</h2><p>Use headings and meaningful elements.</p></section><section><h2>Presentation</h2><p>Adapt spacing and layout to the reading context.</p></section></main>
</body>
</html>
Print tries to keep each short section and its heading together.تطلب الأقسام بقاءها معا حيث يمكن ولا تضمن القواعد عدد صفحات محددا. النتيجة المتوقعة: تحاول الطباعة حفظ القسم القصير وعنوانه معا.
التحقق من اكتمال المحتوى وحدود التصدير
افحص المعاينة بأوراق وهوامش وخلفيات ومحتوى طويل مختلف. احفظ المعلومات في اللوحات وتأكد من قراءة الجداول والصور والمعرفات. لا تصبح PDF ميسرة تلقائيا لصحة HTML؛ تحتاج الوسوم وترتيب القراءة ومتطلبات الأرشفة فحصا مستقلا. احتفظ بنسخة الويب الميسرة عند الملاءمة. سجل المتصفح والإعدادات وافحص اكتمال المحتوى لا جمال التقسيم فقط.
الأخطاء الشائعة وإصلاحها
يقص المحتوى داخل لوحة تمرير
- لماذا يحدث؟
- بقيت قيود الشاشة.
- كيف تصلحه؟
- بسط تخطيط الطباعة.
- كيف تتجنب تكراره؟
- افحص المحتوى المطلوب بالمعاينة.
ينقسم قسم رغم break-inside
- لماذا يحدث؟
- لا يتسع في الصفحة.
- كيف تصلحه؟
- اسمح بالتجزئة أو صغر التجميع.
- كيف تتجنب تكراره؟
- اعتبر التجنب طلبا مقيدا.
توصف PDF بالميسرة دون فحص
- لماذا يحدث؟
- اعتُبرت دلالة HTML ضمانا لوسوم PDF.
- كيف تصلحه؟
- تحقق من بنية التصدير ومتطلباته.
- كيف تتجنب تكراره؟
- افصل فحص الويب وPDF.
اختبر فهمك
1. ماذا يتغير إذا حوى التقرير جدولا يتمرر أفقيا؟
اعرض الحل المشروح
تحقق من وجود الأعمدة كلها. ادرس اتجاه الورق أو تبسيط الجدول أو تخطيطا مقروءا أو تمثيلا مطبوعا مكافئا. قد يحذف إخفاء التجاوز الأعمدة ويفسد التقرير.
2. لماذا تختبر الطباعة مع تعطيل الخلفيات؟
اعرض الحل المشروح
قد تحذف المسارات الخلفيات فتضيع دلالة تعبئة لونية وحدها. احفظ التسميات والتباين والحدود أو الإشارات، ولتبق المهمة مفهومة دون إعداد طابعة شخصي معين.
أهم ما تعلمته
- الطباعة سياق قراءة مختلف.
- لا تتجاوز تفضيلات التقسيم الحدود المادية.
- تحقق من الاكتمال وإتاحة التصدير منفصلين.