คำแนะนำเกี่ยวกับสถานะของรูปแบบการพิมพ์ในปี 2018

วันนี้ ฉันต้องการกลับไปที่หัวข้อที่เคยกล่าวถึงในนิตยสาร Smashing แล้ว — หัวข้อของสไตล์ชีตการพิมพ์ ในกรณีนี้ ฉันกำลังพูดถึงการพิมพ์หน้าโดยตรงจากเบราว์เซอร์ เป็นประสบการณ์ที่อาจนำไปสู่ความหงุดหงิดกับการพิมพ์ภาพขนาดมหึมา (และแม้กระทั่งโฆษณา) อย่างไรก็ตาม บางครั้งมันก็เพิ่มความยินดีเล็กน้อยเมื่อหน้าที่ปรับแต่งมาอย่างดีออกมาจากเครื่องพิมพ์โดยใช้หมึกและกระดาษขั้นต่ำ และทำให้แน่ใจว่าทุกอย่างอ่านง่าย

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

จุดสำคัญสำหรับการสนับสนุนการพิมพ์

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

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

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

ทำไมถึงต้องพิมพ์หน้านี้?

คำถามที่ดีที่ควรถามเมื่อตัดสินใจเลือกเนื้อหาที่จะรวมหรือซ่อนในสไตล์ชีตการพิมพ์คือ “ทำไมผู้ใช้จึงพิมพ์หน้านี้” อาจมีสูตรอาหารที่พวกเขาอยากจะทำตามขณะทำอาหารในครัวหรือนำไปพร้อมกับพวกเขาเมื่อซื้อส่วนผสม หรือต้องการพิมพ์หน้าการยืนยันหลังจากซื้อตั๋วเพื่อเป็นหลักฐานการจอง หรือบางทีพวกเขาต้องการพิมพ์ใบเสร็จรับเงินหรือใบแจ้งหนี้ (หรือพิมพ์เป็น PDF) เพื่อเก็บไว้ในบัญชีไม่ว่าจะเป็นกระดาษหรือทางอิเล็กทรอนิกส์

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

เวิร์กโฟลว์

เมื่อเราตัดสินใจรวมสไตล์การพิมพ์ใน CSS แล้ว เราจำเป็นต้องเพิ่มสไตล์การพิมพ์ลงในเวิร์กโฟลว์เพื่อให้แน่ใจว่าเมื่อเราทำการเปลี่ยนแปลงเค้าโครง เราจะรวมการเปลี่ยนแปลงเหล่านั้นไว้ในเวอร์ชันการพิมพ์ด้วย

การเพิ่มรูปแบบการพิมพ์ลงในหน้า

ในการเปิดใช้งาน "พิมพ์สไตล์ชีต" สิ่งที่เรากำลังทำคือการบอกเบราว์เซอร์ว่ากฎ CSS เหล่านี้มีไว้เพื่ออะไรเมื่อพิมพ์เอกสาร วิธีหนึ่งในการทำเช่นนี้คือการลิงก์สไตล์ชีตเพิ่มเติมโดยใช้องค์ประกอบ <link>

 <link rel="stylesheet" media="print" href="print.css">

วิธีนี้ทำให้รูปแบบการพิมพ์ของคุณแยกจากอย่างอื่นที่คุณอาจมองว่าเป็นระเบียบเรียบร้อยกว่า แต่มีข้อเสีย

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

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

 @media print { }

เขียนทับหน้าจอ CSS หรือสร้างกฎแยกต่างหาก

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

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

 @media screen { }

ในบันทึกย่อนั้น หากคุณใช้ Media Queries สำหรับการออกแบบที่ตอบสนอง คุณอาจเขียนไว้สำหรับหน้าจอ

 @media screen and (min-width: 500px) { }

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

เพิ่มสไตล์การพิมพ์ของคุณไปยังไลบรารีแพทเทิร์นและคำแนะนำสไตล์

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

พื้นฐานของ CSS สำหรับการพิมพ์

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

ซ่อนเนื้อหา

ใน CSS วิธีการซ่อนเนื้อหาและป้องกันการสร้างกล่องคือการใช้คุณสมบัติ display ที่มีค่า none

 .box { display: none; }

การใช้ display: none จะยุบองค์ประกอบและองค์ประกอบย่อยทั้งหมด ดังนั้น หากคุณมีแกลเลอรีรูปภาพที่ทำเครื่องหมายเป็นรายการ สิ่งที่คุณต้องทำเพื่อซ่อนสิ่งนี้เมื่อพิมพ์คือการตั้งค่า display: none บน ul

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

การแทรกเนื้อหา

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

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

คุณสามารถแทรกสตริงข้อความธรรมดาลงในเอกสารของคุณได้ ตัวอย่างต่อไปกำหนดเป้าหมายองค์ประกอบด้วยคลาสของ wrapper และแทรกก่อนเป็นสตริง "โปรดดู www.mysite.com สำหรับข้อมูลเวอร์ชันล่าสุด"

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

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

 a[href]:after { content: " (" attr(href) ")"; }

คุณสามารถใช้ CSS :not selector ที่ใหม่กว่าเพื่อยกเว้นลิงก์ภายในได้หากต้องการ

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

มีเคล็ดลับที่เป็นประโยชน์อื่นๆ เช่น บทความ "I Totally Forgot About Print Stylesheets" ซึ่งเขียนโดย Manuel Matuzovic

สไตล์การพิมพ์ขั้นสูง

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

CSS มีวิธีที่จะทำสิ่งเหล่านี้ อย่างไรก็ตาม อย่างที่เราจะเห็น การสนับสนุนเบราว์เซอร์เป็นหย่อมๆ

สื่อเพจ

CSS Paged Media Specification จะเปิดขึ้นพร้อมกับคำอธิบายเกี่ยวกับบทบาทดังต่อไปนี้

“โมดูล CSS นี้ระบุวิธีการสร้างและจัดวางหน้าเพื่อเก็บเนื้อหาที่กระจัดกระจายในการนำเสนอแบบเพจ เพิ่มฟังก์ชันสำหรับการควบคุมระยะขอบของหน้า ขนาดและการวางแนวของหน้า และส่วนหัวและส่วนท้าย และขยายเนื้อหาที่สร้างขึ้นเพื่อเปิดใช้งานการกำหนดหมายเลขหน้าและเรียกใช้ส่วนหัว/ส่วนท้าย”

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

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

 @page { margin: 20px; }

คุณสามารถกำหนดเป้าหมายหน้าเฉพาะด้วย :left และ :right spread pseudo-class selectors หน้าแรกสามารถกำหนดเป้าหมายได้ด้วย :first pseudo-class selector และหน้าว่างที่เกิดจากการแบ่งหน้าสามารถเลือกด้วย :blank ตัวอย่างเช่น ในการตั้งค่าระยะขอบบนเฉพาะในหน้าแรก:

 @page :first { margin-top: 250pt; }

ในการตั้งค่าระยะขอบที่ใหญ่ขึ้นที่ด้านขวาของหน้าด้านซ้ายและด้านซ้ายของหน้าด้านขวา:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

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

CSS Fragmentation

เมื่อโมดูล Paged Media จัดการกับกล่องเพจนั้น CSS Fragmentation Module ให้รายละเอียดว่าเนื้อหาแบ่งระหว่าง fragmentainers อย่างไร Fragmentaner (หรือ Fragment Container ) คือคอนเทนเนอร์ที่มีส่วนหนึ่งของโฟลว์ที่แยกส่วน นี่คือการไหลซึ่งเมื่อถึงจุดที่จะล้น แตกออกเป็นภาชนะใหม่

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

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

คุณสมบัติที่เก่ากว่าจาก CSS2

นอกจากคุณสมบัติ break-* จาก CSS Fragmentation Level 3 แล้ว เรายังมีคุณสมบัติ page-break-* ซึ่งมาจาก CSS2 ในแง่ข้อมูลจำเพาะ คุณสมบัติเหล่านี้ถูกแทนที่ด้วยคุณสมบัติ break-* ที่ใหม่กว่า เนื่องจากคุณสมบัติเหล่านี้เป็นแบบทั่วไปมากกว่าและสามารถใช้ได้ในบริบทต่างๆ ที่เกิดการแตกขึ้น ไม่มีความแตกต่างกันมากระหว่างหน้าและตัวแบ่งหลายคอลัมน์ อย่างไรก็ตาม ในแง่ของการสนับสนุนเบราว์เซอร์ มีการรองรับเบราว์เซอร์ที่ดีกว่าสำหรับคุณสมบัติที่เก่ากว่า ซึ่งหมายความว่าคุณอาจจำเป็นต้องใช้สิ่งเหล่านั้นในเวลาปัจจุบันเพื่อควบคุมการแตกหัก เบราว์เซอร์ที่ใช้คุณสมบัติที่ใหม่กว่าจะใช้นามแฝงที่เก่ากว่าแทนที่จะปล่อย

ในตัวอย่างต่อไปนี้ ผมจะแสดงทั้งทรัพย์สินใหม่และทรัพย์สินเก่าที่มีอยู่

break-before & break-after

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

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

คุณสมบัติที่เก่ากว่าของ page-break-before และ page-break-after ยอมรับช่วงค่าที่น้อยกว่า

• auto
• always
• avoid
• left
• right
• inherit

หากต้องการทำให้เกิดการแบ่งหน้าก่อนองค์ประกอบ h2 เสมอ คุณจะต้องใช้สิ่งต่อไปนี้:

 h2 { break-before: page; }

เพื่อหลีกเลี่ยงไม่ให้ย่อหน้าหลุดออกจากหัวเรื่องทันที:

 h2, h3 { break-after: avoid-page; }

คุณสมบัติ page-break-* ที่เก่ากว่าจะทำให้ตัวแบ่งหน้าก่อน h2 เสมอ:

 h2 { page-break-before: always; }

เพื่อหลีกเลี่ยงไม่ให้ย่อหน้าหลุดออกจากหัวเรื่องทันที:

 h2, h3{ page-break-after: avoid; }

บน MDN ค้นหาข้อมูลและตัวอย่างการใช้งานสำหรับคุณสมบัติ:

• พักก่อน
• พักหลัง
• หน้าแตกก่อน
• หน้าแตกหลัง

break-inside

คุณสมบัตินี้ควบคุมตัวแบ่งภายในกล่องและยอมรับค่า:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

เช่นเดียวกับคุณสมบัติสองประการก่อนหน้านี้ มี aliased page-break-inside จาก CSS2 ซึ่งยอมรับค่า:

• auto
• avoid
• inherit

ตัวอย่างเช่น บางทีคุณอาจมี figure หรือ table และคุณไม่ต้องการให้ครึ่งหน้าจบลงที่หน้าหนึ่งและอีกครึ่งหนึ่งอยู่ในหน้าอื่น

 figure { break-inside: avoid; }

และเมื่อใช้คุณสมบัติที่เก่ากว่า:

 figure { page-break-inside: avoid; }

บน MDN:

• พังภายใน
• หน้าแตกข้างใน

เด็กกำพร้าและหญิงม่าย

ข้อกำหนดการแยกส่วนยังกำหนดคุณสมบัติ orphans และ widows คุณสมบัติ orphans กำหนดจำนวนบรรทัดที่สามารถทิ้งไว้ที่ด้านล่างของหน้าแรกเมื่อเนื้อหาเช่นย่อหน้าขาดระหว่างสองหน้า คุณสมบัติ widows กำหนดจำนวนบรรทัดที่เหลือที่ด้านบนของหน้าที่สอง

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

 p { orphans: 2; widows: 2; }

คุณสมบัติ widows และ orphans ได้รับการสนับสนุนอย่างดี (การใช้งานเบราว์เซอร์ที่ขาดหายไปคือ Firefox)

บน MDN:

• แม่หม้าย
• เด็กกำพร้า

box-decoration-break

คุณสมบัติสุดท้ายที่กำหนดไว้ในโมดูล Fragmentation คือ box-decoration-break คุณสมบัตินี้เกี่ยวข้องกับเส้นขอบ ระยะขอบ และช่องว่างภายในหรือห่อเนื้อหา ค่าที่ยอมรับคือ:

• slice
• clone

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

ถ้าฉันใช้ box-decoration-break: clone เส้นขอบและช่องว่างภายในและระยะขอบจะสมบูรณ์ในแต่ละหน้า ซึ่งจะทำให้แต่ละหน้ามีเส้นขอบสีเทา

ปัจจุบันนี้ใช้ได้กับ Paged Media ใน Firefox เท่านั้น และคุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับ box-decoration-break บน MDN

รองรับเบราว์เซอร์

ดังที่ได้กล่าวไปแล้ว การสนับสนุนเบราว์เซอร์เป็นหย่อมๆ สำหรับ Paged Media และ Fragmentation ในกรณีที่มีความกังวลเกี่ยวกับการแยกส่วน ปัญหาเพิ่มเติมคือต้องมีการระบุและใช้งานการแยกส่วนสำหรับวิธีการจัดวางแต่ละวิธี หากคุณต้องการใช้ Flexbox หรือ CSS Grid ในสไตล์ชีตการพิมพ์ คุณอาจจะผิดหวัง คุณสามารถตรวจสอบข้อบกพร่องของ Chrome สำหรับ Flexbox และ Grid

คำแนะนำที่ดีที่สุดที่ฉันสามารถให้ได้ในตอนนี้คือทำให้สไตล์ชีตการพิมพ์ของคุณเรียบง่ายพอสมควร เพิ่มคุณสมบัติการแตกแฟรกเมนต์ — รวมทั้งคุณสมบัติ page-break-* เก่าและคุณสมบัติใหม่ อย่างไรก็ตาม ยอมรับว่าสิ่งเหล่านี้อาจใช้ไม่ได้กับทุกเบราว์เซอร์ และหากคุณพบว่าไม่มีการสนับสนุนเบราว์เซอร์ที่น่าหงุดหงิด ให้แจ้งปัญหาเหล่านี้กับเบราว์เซอร์หรือโหวตสำหรับปัญหาที่ยกขึ้นแล้ว โดยเฉพาะอย่างยิ่ง การแบ่งส่วนควรได้รับการปฏิบัติเหมือนเป็นข้อเสนอแนะมากกว่าคำสั่ง แม้ว่าจะได้รับการสนับสนุนก็ตาม เป็นไปได้ที่จะระบุอย่างเฉพาะเจาะจงเกี่ยวกับสถานที่และเวลาที่คุณต้องการให้สิ่งต่าง ๆ แตกหักจนแทบจะเป็นไปไม่ได้เลยที่จะจัดวางหน้า คุณควรสันนิษฐานว่าบางครั้งคุณอาจแตกหักได้ไม่ดีพอ

การทดสอบสไตล์ชีตการพิมพ์

การทดสอบสไตล์ชีตการพิมพ์อาจเป็นเรื่องที่น่าเบื่อหน่าย โดยทั่วไปต้องใช้การแสดงตัวอย่างก่อนพิมพ์หรือการพิมพ์เป็น PDF ซ้ำๆ อย่างไรก็ตาม เบราว์เซอร์ DevTools ทำให้สิ่งนี้ง่ายขึ้นเล็กน้อยสำหรับเรา ทั้ง Chrome และ Firefox มีวิธีดูเฉพาะรูปแบบการพิมพ์เท่านั้น

Firefox

เปิดแถบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จากนั้นพิมพ์ media emulate print ที่พรอมต์

โครเมียม

เปิด DevTools คลิกที่ไอคอนสามจุด จากนั้นเลือก "เครื่องมือเพิ่มเติม" และ "การแสดงผล" จากนั้นคุณสามารถเลือกพิมพ์ภายใต้ Emulate CSS Media

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

จะทำอย่างไรเมื่อสไตล์ชีตการพิมพ์ไม่เพียงพอ

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

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

นอกจากนี้ Prince ยังพร้อมให้ติดตั้งบนเซิร์ฟเวอร์ของคุณเพื่อสร้างเอกสารที่พิมพ์ออกมาอย่างสวยงามโดยใช้ CSS บนเว็บ อย่างไรก็ตาม มันมาในราคาที่สูง อีกทางเลือกหนึ่งคือเซิร์ฟเวอร์เช่น DocRaptor ที่นำเสนอ API ที่ด้านบนของเอ็นจิ้นการเรนเดอร์ของ Prince

มีตัวสร้าง HTML- และ CSS-to-PDF แบบโอเพ่นซอร์ส เช่น wkhtmltopdf แต่ส่วนใหญ่ใช้เอ็นจิ้นการเรนเดอร์เบราว์เซอร์เพื่อสร้างผลงานพิมพ์ ดังนั้นจึงมีข้อจำกัดเช่นเดียวกับเบราว์เซอร์เมื่อต้องใช้ Paged Media และข้อกำหนดการแยกส่วน ข้อยกเว้นคือ WeasyPrint ซึ่งดูเหมือนว่าจะมีการนำไปใช้งานของตัวเองและสนับสนุนคุณสมบัติที่แตกต่างกันเล็กน้อย แม้ว่าจะไม่ได้มีคุณสมบัติครบถ้วนเหมือน Prince ก็ตาม

คุณจะพบข้อมูลเพิ่มเติมเกี่ยวกับตัวแทนผู้ใช้สำหรับการพิมพ์บนเว็บไซต์ print-css.rocks

แหล่งข้อมูลอื่นๆ

เนื่องจากการพิมพ์จาก CSS มีการเคลื่อนไหวเพียงเล็กน้อยในช่วงไม่กี่ปีที่ผ่านมา แหล่งข้อมูลที่เก่ากว่าจำนวนมากใน Smashing Magazine และที่อื่น ๆ ยังคงใช้ได้ มีเคล็ดลับและลูกเล่นเพิ่มเติมในแหล่งข้อมูลต่อไปนี้ หากคุณพบเวิร์กโฟลว์การพิมพ์หรือคำแนะนำทางเทคนิคที่เป็นประโยชน์ ให้เพิ่มลงในความคิดเห็นด้านล่าง

• “ฉันลืมเกี่ยวกับสไตล์ชีตการพิมพ์โดยสิ้นเชิง” Manuel Matuzovic, UX Collective
• “แนวทางการพิมพ์สไตล์ชีต: บัญชีดำเทียบกับบัญชีขาว” Chris Coyier, CSS-Tricks
• “สไตล์ชีตการพิมพ์ที่สมบูรณ์แบบ” Andreas Hecht, Noupe
• “วิธีตั้งค่ารูปแบบการพิมพ์” Christian Krammer, Smashing Magazine
• “5 เคล็ดลับและเคล็ดลับที่ทรงพลังสำหรับสไตล์ชีตการพิมพ์” Dudley Storey, Smashing Magazine