วิธีจัดรูปแบบเว็บไซต์ของคุณสำหรับพิมพ์ด้วย 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 pseudo-class การกำหนดสไตล์ของหน้าที่พิมพ์ครั้งแรกสามารถกำหนดได้:
		


@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;
}


ตอนนี้เราได้พูดถึงพื้นฐานการพิจารณาการพิมพ์แล้ว การรวมแนวคิดเหล่านี้เข้ากับสไตล์ชีตการพิมพ์ของคุณเป็นเรื่องง่าย แม้ว่าการพิมพ์จะไม่ใช่สิ่งที่เราคิดในท้ายที่สุดเมื่อใช้เว็บ แต่เป็นวิธีที่ยอดเยี่ยมในการมอบประสบการณ์ที่ยอดเยี่ยมแบบเดียวกันแก่ผู้ใช้ของคุณ ไม่ว่าพวกเขาจะเข้าถึงเนื้อหาด้วยวิธีใดก็ตาม

		
		
ต้องการเคล็ดลับการออกแบบเพิ่มเติมหรือไม่? สมัครสมาชิกเค้าโครง!
		
เราจะส่งการออกแบบที่สดใหม่และเนื้อหา WordPress ตรงไปยังกล่องจดหมายของคุณสัปดาห์ละครั้ง
		

		
		ได้โปรด!