استخدام CSS لتنسيق المستندات للطباعة

استخدام CSS لتنسيق المستندات للطباعة

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





فصل المخاوف

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



Heading

نستخدم الترميز الدلالي:






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

h1 { font-weight: normal; }

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



بما في ذلك ورقة أنماط الطباعة

بطريقة مماثلة لتضمين ورقة أنماط الشاشة ، يمكننا تحديد ورقة أنماط للطباعة. عادةً ما يتم تضمين ورقة أنماط الشاشة على النحو التالي:


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




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


في هذا المثال ، فإن ملف print.css سيتم استخدام ورقة الأنماط فقط عند طباعة المستند. هذه آلية مفيدة للغاية. يمكننا جمع كل الأنماط الشائعة (ربما عائلة الخطوط أو تباعد الأسطر) في ورقة أنماط تنطبق على جميع الوسائط ، وتنسيقات خاصة بالوسائط في أوراق أنماط فردية. مرة أخرى ، هذا استخدام آخر لفصل الاهتمامات.



بعض الأمثلة على نمط التصريحات

خلفية نظيفة

من شبه المؤكد أنك لا تريد إهدار الحبر في طباعة خلفية ملونة أو صورة خلفية. ابدأ بإعادة تعيين أي قيم افتراضية لهذه القيم التي ربما تم تعيينها في المستند الخاص بك:

body {
background: white;
color: black;
}

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

* {
background-image: none !important;
}

متعلق ب: كيفية تعيين صورة الخلفية في CSS

ما الذي يسبب الإعلانات على هاتفي

السيطرة على الهوامش

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

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

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

@page {
margin: 2cm;
}

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

كيفية تنزيل الصور من الفيسبوك

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

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

إخفاء المحتوى غير ذي الصلة

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

#contents, div.ad { display: none; }

من الواضح أن الارتباطات التشعبية ليست ذات صلة بالمواد المطبوعة ، لذلك قد ترغب في إزالة أي أنماط تميزها عن النص المحيط:

a { text-decoration: none; color: inherit; }

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

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

يعطي CSS نتائج مثل ما يلي:

a [href]: بعد يستهدف المنصب على وجه التحديد بعد ( :بعد، بعدما ) كل عنصر ارتباط ( إلى ) يحتوي بالفعل على عنوان URL ( [href] ). ال المحتوى الإعلان هنا يدرج قيمة href السمة بين قوسين. لاحظ أنه يمكن تطبيق قواعد النمط الأخرى للتحكم في عرض المحتوى الذي تم إنشاؤه.

معالجة فواصل الصفحات

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

table { page-break-inside: avoid; }

من المفترض أن يساعد ذلك في منع الجداول من أن تمتد عبر صفحات متعددة ، بشرط ألا يكون أي منها أطول من صفحة واحدة. بصورة مماثلة:

h1, h2 { page-break-before: always; }

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

التطبيق الأكثر شعبية في العالم
h1 + h2 { page-break-before: avoid; }

عرض أنماط الطباعة

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

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

من اللوحة الجديدة التي تظهر ، حدد قائمة طعام ، من ثم أدوات أكثر ، تليها استدعاء :

ثم قم بالتمرير لأسفل إلى ملف محاكاة نوع وسائط CSS ضبط. تسمح لك القائمة المنسدلة بالتبديل بين عرض الشاشة وطباعة المستند:

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

الطباعة إلى ملف PDF

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

هذا يجعل HTML ، إلى جانب ورقة أنماط الطباعة ، وسيلة ممتازة لإنشاء مستند عالي الجودة يمكن إرساله كمرفق ، وكذلك طباعته.

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

يشارك يشارك سقسقة بريد الالكتروني كيفية طباعة صفحات الويب إلى PDF باستخدام Microsoft Edge

هل سبق لك أن صادفت مقالًا مثيرًا للاهتمام أردت حفظه لوقت لاحق؟ حسنًا ، يمكنك الحفظ بتنسيق PDF باستخدام Edge في ثلاث خطوات سهلة.

اقرأ التالي مواضيع ذات صلة
  • برمجة
  • طباعة
  • CSS
نبذة عن الكاتب بوبي جاك(تم نشر 58 مقالة)

بوبي متحمس للتكنولوجيا وعمل كمطور برمجيات لأكثر من عقدين من الزمن. إنه شغوف بالألعاب ، ويعمل كمحرر المراجعات في مجلة Switch Player ، وهو منغمس في جميع جوانب النشر عبر الإنترنت وتطوير الويب.

المزيد من Bobby Jack

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك