كيفية تصميم موقع الويب الخاص بك للطباعة باستخدام CSS

ما علاقة الطباعة بالويب؟

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

كيف تصمم للطباعة

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

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

اعتبارات اللون والتخطيط

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

هذا ما يجعل النص باللون الأسود ، ويتخلص من أي لون للخلفية للحصول على أفضل طباعة:

@media print {
body {
color: #000;
background: #fff;
}
}


هناك احتمالات ، سيتم طباعة النص في Times New Roman. لا حرج في ذلك ، ولكن ماذا لو كنت تريد تحديد خط مختلف؟ تمامًا كما فعلت في الأنماط الافتراضية ، يمكن القيام بذلك في الطباعة أيضًا. بينما نحن فيه ، دعونا لا ننسى ارتفاع الخط.
		


body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}


إخفاء العناصر غير الضرورية
ربما تكون قد تم تكييفك للحفاظ على display: none عند الحد الأدنى ، ولكن هذا جيد تمامًا لأنماط الطباعة الخاصة بك. بإخفاء بعض العناصر ، فإنك تمنح المستخدمين طريقة أفضل للطباعة والاحتفاظ بأي شيء غير ضروري من النسخة المطبوعة. الهدف هو السماح لهم بطباعة المحتوى الأكثر أهمية بشكل فعال ، وليس صفحة الويب بالضبط.
هناك عناصر صفحة غير ضرورية ، مثل التنقل والتذييل والشريط الجانبي وصور الخلفية ، لذلك هذا هو المكان الذي تظهر فيه display: none مفيدًا.
@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}


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


من خلال إضافة هذا إلى ورقة أنماط الطباعة ، ستبدأ المقالات دائمًا في صفحة جديدة:
article {
page-break-before: always;
}


يعد الاحتفاظ بالقوائم غير المرتبة معًا في نفس الصفحة فكرة رائعة أيضًا:
ul {
page-break-inside: avoid;
}


لنأخذ خطوة إلى الأمام ونفعل الشيء نفسه للعناوين والصور والاقتباسات المحظورة والجداول وعناصر القائمة الأخرى:
h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}


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


@page {
margin: 2cm;
}


إذا كان من المقرر طباعة الصفحات ووضعها في غلاف ، ضع في اعتبارك أن هناك خيارًا لضبط الهوامش لكل صفحة أخرى. الصفحة اليسرى للصفحات 1 ، 3 ، 5 ... والصفحة اليمنى هي الصفحة 2 ، 4 ، 6 ...
@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}


يعد تخصيص الصفحة الأولى مفيدًا في حالات معينة. باستخدام الفئة الزائفة للصفحة :first ، يمكن تحديد نمط الصفحة المطبوعة الأولى:
@page :first {
margin: 1cm 2cm;
}



هل تضغط عليك الطباعة؟ إليك بعض النصائح لطباعة مشروعك كالمحترفين.

أفكار الصور والنص المقدمة
قد تنطبق هذه أو لا تنطبق على موقعك ، ولكن من الجيد ملاحظة ذلك مع ذلك.
		


لمنع الصور من القطع والنزيف على حافة الصفحة المطبوعة ، فإن إضافة إعلان بالعرض الأقصى سيمنع ذلك.
img {
max-width: 100% !important;
}


رسالة ترحيب لطيفة هي إضافة رائعة. سيكون محتوى الطباعة موجودًا لفترة من الوقت ، لذلك من الجيد دائمًا تضمين رسالة ودية أو تذكير.
header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}


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



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

		
		نعم من فضلك!