การใช้ CSS เพื่อจัดรูปแบบเอกสารสำหรับการพิมพ์

การใช้ CSS เพื่อจัดรูปแบบเอกสารสำหรับการพิมพ์

หากคุณเคยพิมพ์การจองตั๋วหรือเส้นทางไปยังโรงแรมจากเว็บ คุณอาจไม่ค่อยประทับใจกับผลลัพธ์ที่ได้ ดังนั้น คุณอาจไม่ทราบว่าเอกสารที่พิมพ์สามารถจัดรูปแบบในลักษณะเดียวกับที่แสดงบนหน้าจอ โดยใช้ Cascading Style Sheets (CSS)





การแยกความกังวล

ประโยชน์หลักของ CSS คือการแยกเนื้อหาออกจากการนำเสนอ ในแง่ที่ง่ายที่สุด นี่หมายถึงแทนที่จะเป็นมาร์กอัปโวหารที่ล้าสมัยเช่น:



Heading

เราใช้มาร์กอัปความหมาย:






ไม่เพียงแต่จะสะอาดกว่านี้เท่านั้น แต่ยังหมายถึงการนำเสนอของเราแยกออกจากเนื้อหาของเราด้วย เบราว์เซอร์แสดงผล ชั่วโมง1 เป็นข้อความตัวหนาขนาดใหญ่โดยค่าเริ่มต้น แต่เราสามารถเปลี่ยนสไตล์นั้นได้ทุกเมื่อด้วยสไตล์ชีต:

h1 { font-weight: normal; }

ด้วยการรวบรวมการประกาศสไตล์เหล่านั้นในไฟล์แยกต่างหาก และการอ้างอิงไฟล์นั้นจากเอกสาร HTML ของเรา เราสามารถใช้การแยกได้ดียิ่งขึ้น สไตล์ชีตสามารถนำกลับมาใช้ใหม่ได้ และเราสามารถเปลี่ยนไฟล์เดียวได้ตลอดเวลาเพื่ออัปเดตการจัดรูปแบบในทุกเอกสารที่ใช้



รวมสไตล์ชีตการพิมพ์

ในทำนองเดียวกันกับการรวมสไตล์ชีตหน้าจอ เราสามารถระบุสไตล์ชีตสำหรับพิมพ์ได้ โดยทั่วไป สไตล์ชีตของหน้าจอจะรวมไว้ดังนี้:


อย่างไรก็ตาม คุณลักษณะเพิ่มเติมคือ ครึ่ง อนุญาตให้กำหนดเป้าหมายตามบริบทที่แสดงเอกสาร โดยค่าเริ่มต้น องค์ประกอบก่อนหน้านี้จะเทียบเท่ากับ:




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


ในตัวอย่างนี้ print.css สไตล์ชีตจะใช้เมื่อเอกสารถูกพิมพ์ออกมาเท่านั้น นี่เป็นกลไกที่มีประโยชน์มาก เราสามารถรวบรวมสไตล์ทั่วไปทั้งหมด (อาจเป็นตระกูลฟอนต์หรือระยะห่างบรรทัด) ในสไตล์ชีตที่ใช้กับสื่อทั้งหมด และการจัดรูปแบบเฉพาะสื่อในสไตล์ชีตแต่ละรายการ นี่เป็นอีกการใช้การแยกข้อกังวล



ตัวอย่างการประกาศรูปแบบบางส่วน

พื้นหลังที่สะอาด

คุณแทบไม่ต้องการเปลืองหมึกพิมพ์พื้นหลังที่มีสีสันหรือภาพพื้นหลัง เริ่มต้นด้วยการรีเซ็ตค่าเริ่มต้นสำหรับค่าเหล่านี้ที่อาจมีการตั้งค่าไว้ในเอกสารของคุณ:

body {
background: white;
color: black;
}

คุณอาจต้องการป้องกันไม่ให้พิมพ์ภาพพื้นหลังใดๆ ซึ่งควรเป็นภาพตกแต่ง ดังนั้นจึงไม่ใช่ส่วนที่จำเป็นในเนื้อหาของคุณ:

* {
background-image: none !important;
}

ที่เกี่ยวข้อง: วิธีตั้งค่าภาพพื้นหลังใน CSS

ตั้งค่าอีเมลใหม่ยังไงคะ

การควบคุมระยะขอบ

อีกจุดที่ชัดเจนในการพิจารณาเกี่ยวกับการพิมพ์คือระยะขอบของหน้า แม้ว่า CSS จะมีวิธีการตั้งค่าขนาดขอบ แต่คุณควรจำไว้ว่าเบราว์เซอร์และเครื่องพิมพ์ของคุณอาจมีผลต่อการตั้งค่าระยะขอบด้วย

ตัวอย่างเช่น ในกล่องโต้ตอบการพิมพ์ของ Chrome มีการตั้งค่าระยะขอบที่มีค่าต่างๆ รวมทั้ง ไม่มี และ กำหนดเอง ซึ่งจะแทนที่สิ่งใดก็ตามที่ระบุผ่าน CSS:

ด้วยเหตุผลนี้ ขอแนะนำให้ทิ้งการตัดสินใจเรื่องระยะขอบไว้กับผู้อ่านในหน้าเว็บสาธารณะ อย่างไรก็ตาม สำหรับการใช้งานส่วนตัวหรือสำหรับการสร้างเค้าโครงเริ่มต้น การตั้งค่าระยะขอบการพิมพ์ผ่าน CSS อาจเหมาะสม NS @หน้าหนังสือ กฎอนุญาตให้ตั้งค่าระยะขอบและควรใช้ดังนี้:

@page {
margin: 2cm;
}

CSS ยังมีความจุสำหรับรูปแบบการพิมพ์ที่ซับซ้อนมากขึ้น เช่น การเปลี่ยนระยะขอบตามว่าหน้านั้นเป็นเลขคี่ (ขวา) เลขคู่ (ซ้าย) หรือหน้าปก

กองทุนผู้สร้าง tiktok ทำงานอย่างไร

น่าเสียดายที่ระบบรองรับได้ไม่ดี โดยเฉพาะตัวเลือกหน้าปก แต่สามารถใช้ได้ในระดับที่น้อยที่สุด ลักษณะต่อไปนี้สร้างหน้าที่มีระยะขอบด้านล่างใหญ่กว่าด้านบนเล็กน้อย และระยะขอบที่ขอบของหน้าด้านนอกใหญ่กว่าเล็กน้อยเล็กน้อย:

@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 ดั้งเดิมได้ และวิธีแก้ไขที่ตรงไปตรงมาก็คือให้แทรก URL เหล่านี้ไว้หลังข้อความที่เชื่อมโยงโดยอัตโนมัติ:

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

CSS นี้ให้ผลลัพธ์ดังต่อไปนี้:

a[href]:หลัง กำหนดเป้าหมายเฉพาะตำแหน่งหลังจาก ( :หลังจาก ) แต่ละองค์ประกอบลิงก์ ( ถึง ) ที่มี URL ( [href] ). NS เนื้อหา ประกาศที่นี่แทรกค่าของ href คุณลักษณะระหว่างวงเล็บ โปรดทราบว่าสามารถใช้กฎรูปแบบอื่นเพื่อควบคุมการแสดงเนื้อหาที่สร้างขึ้นได้

การจัดการตัวแบ่งหน้า

เพื่อหลีกเลี่ยงไม่ให้ตัวแบ่งหน้าทิ้งเนื้อหาที่แยกออกมา หรือแบ่งหน้าอย่างเชื่องช้า ให้ใช้ประโยชน์จากคุณสมบัติตัวแบ่งหน้า: หน้าแตกก่อน , หน้าแตกหลัง และ หน้าแตกข้างใน . ตัวอย่างเช่น:

table { page-break-inside: avoid; }

วิธีนี้จะช่วยป้องกันไม่ให้ตารางครอบคลุมหลายหน้า หากไม่มีตารางใดสูงไปกว่าหน้าเดียว ในทำนองเดียวกัน:

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

ซึ่งหมายความว่าหัวเรื่องดังกล่าวจะเริ่มต้นหน้าใหม่เสมอ อาจทำให้เกิดปัญหาได้หากคุณติดตาม h1 ของเพจทันทีด้วย h2 เนื่องจาก h1 จะลงเอยที่เพจทั้งหมดด้วยตัวเอง เพื่อหลีกเลี่ยงปัญหานี้ เพียงยกเลิกตัวแบ่งหน้าโดยใช้ตัวเลือกที่กำหนดเป้าหมายอินสแตนซ์นั้น ตัวอย่างเช่น:

โฮมบาร์ของ windows 10 ไม่ทำงาน
h1 + h2 { page-break-before: avoid; }

กำลังดูรูปแบบการพิมพ์

ในทุกกรณี เบราว์เซอร์และระบบปฏิบัติการของคุณควรมีคุณสมบัติแสดงตัวอย่างก่อนพิมพ์ ซึ่งมักจะเป็นส่วนหนึ่งของกล่องโต้ตอบการพิมพ์มาตรฐาน

เบราว์เซอร์ Chrome ทำให้สะดวกยิ่งขึ้นในการตรวจสอบและดีบักรูปแบบการพิมพ์ของคุณผ่านเครื่องมือสำหรับนักพัฒนา ดังตัวอย่างที่แสดง CV ที่มีสไตล์ชีตการพิมพ์ ขั้นแรก เปิดเมนูหลักและเลือก เครื่องมือเพิ่มเติม ตามด้วย เครื่องมือสำหรับผู้พัฒนา ตัวเลือก:

จากแผงใหม่ที่ปรากฏขึ้น ให้เลือก เมนู , แล้ว เครื่องมือเพิ่มเติม , ติดตามโดย กำลังแสดงผล :

จากนั้นเลื่อนลงไปที่ จำลองสื่อประเภท CSS การตั้งค่า ดรอปดาวน์ช่วยให้คุณสามารถสลับระหว่างมุมมองการพิมพ์และหน้าจอของเอกสารของคุณ:

เมื่อจำลองสไตล์ชีตการพิมพ์ มาตรฐาน เบราว์เซอร์สไตล์ พร้อมให้ตรวจสอบและแก้ไขกฎของสไตล์สด โปรดทราบว่าการจำลองงานพิมพ์บนหน้าจอยังไม่ถูกต้อง 100% เบราว์เซอร์ไม่รู้อะไรเกี่ยวกับขนาดกระดาษและ @หน้าหนังสือ ไม่สามารถเลียนแบบกฎได้

การพิมพ์เป็น PDF

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

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

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

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีพิมพ์เว็บเพจเป็น PDF ด้วย Microsoft Edge

คุณเคยเจอบทความที่น่าสนใจที่คุณต้องการเก็บไว้ดูภายหลังหรือไม่? คุณสามารถบันทึกเป็น PDF ด้วย Edge ได้ในสามขั้นตอนง่ายๆ

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • การพิมพ์
  • CSS
เกี่ยวกับผู้เขียน Bobby Jack(58 บทความเผยแพร่)

Bobby เป็นผู้ที่ชื่นชอบเทคโนโลยีซึ่งทำงานเป็นนักพัฒนาซอฟต์แวร์มาเกือบสองทศวรรษ เขาหลงใหลในการเล่นเกม ทำงานเป็นบรรณาธิการบทวิจารณ์ที่ Switch Player Magazine และหมกมุ่นอยู่กับทุกแง่มุมของการเผยแพร่ออนไลน์และการพัฒนาเว็บ

เพิ่มเติมจาก Bobby Jack

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก