- Responsive design ซึ่งเป็นหัวใจของประสบการณ์บนเว็บ ควรคำนึงไม่เพียงแค่อุปกรณ์ แต่รวมถึง การรองรับสื่อเอาต์พุต (การพิมพ์) ด้วย
- ด้วยเหตุผลหลากหลาย เช่น การเข้าถึง ข้อกำหนดทางกฎหมาย และการเดินทาง คุณภาพและการใช้งานของหน้าเว็บเมื่อพิมพ์ออกมาก็ยังคงสำคัญ
- ด้วยฟีเจอร์สำหรับงานพิมพ์ของ CSS เช่น @media print, @page, หน่วยแบบสัมบูรณ์, page-break จึงสามารถสร้างเลย์เอาต์ที่เรียบร้อย การแบ่งหน้าอย่างเหมาะสม และการพิมพ์อย่างมีประสิทธิภาพได้
- ควร ซ่อนองค์ประกอบที่ไม่จำเป็น เช่น navigation และ footer และเสริมข้อมูลของลิงก์หรือคำย่อให้เหมาะกับการอ่านบนกระดาษ
- โดยคำนึงถึง การพิมพ์ขาวดำ การประหยัดหมึก และความอ่านง่าย ควรลดการใช้สีและพื้นหลังให้น้อยที่สุด พร้อมทั้งผลักดันให้การปรับปรุงสำหรับการพิมพ์และหน้าจอช่วยส่งเสริมกันและกัน
ความจำเป็นของการออกแบบเว็บสำหรับการพิมพ์
- ในแง่ของ การเข้าถึง ผู้ที่ไม่สามารถมองหน้าจอเป็นเวลานานก็ยังเข้าถึงข้อมูลได้ผ่าน เนื้อหาที่พิมพ์ออกมา
- ไม่ว่าจะเป็น การไม่มีอินเทอร์เน็ตระหว่างเดินทาง หรือภาระหน้าที่ในการเก็บรักษาตามกฎหมายและนโยบายภายในองค์กร สถานการณ์ที่ต้องใช้เอกสารพิมพ์ก็ยังมีอยู่หลากหลาย
- ยังมีจุดร่วมกับ ฟอร์แมตการเผยแพร่ดิจิทัลอย่าง EPUB อยู่มาก ทำให้ความรู้เรื่องสไตล์สำหรับการพิมพ์เป็นทักษะที่ต่อยอดได้สูง
- ผู้คนยังคงพิมพ์เว็บไซต์ออกมาใช้งานจริง ดังนั้น การรองรับการพิมพ์จึงช่วยยกระดับคุณภาพของประสบการณ์ผู้ใช้โดยรวม
วิธีใช้สไตล์ Print
- ใช้
@media print ของ CSS เพื่อกำหนด สไตล์เฉพาะสำหรับการพิมพ์ ได้
- มีหลายวิธี เช่น
<link rel="stylesheet" media="print">, @import url("...") print, หรือ @media print { ... } ภายใน CSS
- สำหรับ สไตล์เฉพาะหน้าจอ ให้ใช้
@media screen
การทดสอบสไตล์ Print
- เบราว์เซอร์อย่าง Edge, Chrome, Firefox และ Safari มี ฟังก์ชันจำลองสื่อสำหรับการพิมพ์ ให้ใช้งาน
- ผลจากการจำลองอาจแตกต่างจากงานพิมพ์จริง และเบราว์เซอร์ส่วนใหญ่ตั้งค่าเริ่มต้นให้ ปิดพื้นหลัง (เพื่อประหยัดหมึก)
- จึงแนะนำให้ ทดสอบโดยคำนึงถึงสภาพแวดล้อมของงานพิมพ์จริง
หน่วยแบบสัมบูรณ์และกฎ @page
- CSS มี หน่วยแบบสัมบูรณ์หลากหลาย เช่น cm, mm, in, pt, px ซึ่งมีประโยชน์ต่อการปรับขนาดอย่างแม่นยำเมื่อต้องพิมพ์จริง
- สามารถใช้กฎ
@page เพื่อกำหนด ขนาดกระดาษ (A4, A5 เป็นต้น), ระยะขอบ, แนวกระดาษ ได้
- ควรคำนึงถึงข้อจำกัดของพื้นที่พิมพ์ของเครื่องพิมพ์ รวมถึง footer/header ที่เบราว์เซอร์อาจเพิ่มให้อัตโนมัติ
การแบ่งหน้าและการจัดการย่อหน้า
- เนื้อหาที่ยาวจำเป็นต้องมี การแบ่งหน้า และสามารถควบคุมตำแหน่งที่เหมาะสมได้ด้วยพร็อพเพอร์ตี break-before, break-after, break-inside
- ไวยากรณ์แบบเก่าอย่าง
page-break-* ก็ยังคงใช้งานร่วมกันได้
- ใช้ พร็อพเพอร์ตี orphans และ widows เพื่อลดจำนวนบรรทัดที่หลงเหลืออยู่เดี่ยว ๆ ต้นหรือท้ายย่อหน้า (แม้บางเบราว์เซอร์จะยังไม่รองรับ)
- ใช้ box-decoration-break เพื่อรักษาความสม่ำเสมอของ UI เช่น เส้นขอบ เมื่อมีการแบ่งหน้ากระดาษ
การรองรับองค์ประกอบแบบโต้ตอบเมื่อพิมพ์
- บนกระดาษนั้น ลิงก์และคำย่อไม่สามารถโต้ตอบได้ จึงควรใช้
a[href]:after, abbr[title]:after เป็นต้น เพื่อเพิ่ม URL หรือข้อมูลประกอบลงในผลลัพธ์การพิมพ์
- องค์ประกอบฟอร์มควรถูกจัดวางให้เป็นช่องกรอกสำหรับงานพิมพ์ และคอนเทนเนอร์แบบเลื่อนควรขยายด้วย
overflow: visible เป็นต้น
- องค์ประกอบที่ไม่จำเป็น เช่น navigation และ footer ควรถูกลบออกด้วย
display: none และควบคุมให้พิมพ์เฉพาะ main
สี หมึก และความอ่านง่าย
- โดยยึด การพิมพ์ขาวดำและการประหยัดหมึก เป็นพื้นฐาน ควรแทนการเน้นด้วยสีพื้นหลังด้วยวิธีอย่างการใช้เส้นขอบ
- สามารถใช้
print-color-adjust: exact เพื่อบังคับให้บางองค์ประกอบคงสีไว้ได้ (ควรใช้เฉพาะเมื่อจำเป็น)
- ควรลดการใช้รูปภาพให้เหลือเท่าที่จำเป็น และแนะนำให้ลบองค์ประกอบที่ใช้หมึกมาก เช่น โฆษณา
บทสรุป
- เว็บไม่ได้มีอยู่แค่บนหน้าจอ แต่ยังอยู่ใน โลกกายภาพ (กระดาษ) ด้วย
- สไตล์การพิมพ์ของ CSS เป็นองค์ประกอบสำคัญที่ช่วยเพิ่มทั้งการเข้าถึงและความสมบูรณ์ของประสบการณ์ผู้ใช้
- เพื่อให้ ผู้ใช้ทุกคนสามารถบริโภคเนื้อหาได้ในหลากหลายรูปแบบ การรองรับการพิมพ์จึงเป็นทักษะสำคัญของการพัฒนาเว็บสมัยใหม่ที่ไม่ควรมองข้าม
2 ความคิดเห็น
อย่างไรก็ตาม โพสต์นี้เองก็ไม่ได้เป็นมิตรกับการพิมพ์นัก
UI ที่ไม่มีประโยชน์เวลาพิมพ์อย่าง COPY TO CLIPBOARD ก็ยังถูกพิมพ์ออกมาด้วย
โค้ดสไนเป็ตถูกตัด และแถบเลื่อนแนวนอนก็ถูกพิมพ์ออกมาด้วย
ลองดู สรุป CSS สำหรับการพิมพ์ลงกระดาษ ที่เคยโพสต์ไว้ก่อนหน้านี้ด้วย
การพิมพ์หน้าเว็บลงบนกระดาษกับการส่งออกเป็น PDF ก็เป็นอีกเรื่องหนึ่งเช่นกัน (เช่น ใช้สีได้โดยไม่ต้องกังวลเรื่องหมึก หรือใช้ไฮเปอร์ลิงก์ได้) โดยมีไลบรารีที่เกี่ยวข้องอย่าง paged.js เป็นต้น
เหมาะที่จะนำไปพิจารณาเมื่อต้องจัดทำหน้าคู่มือ สื่อการสอน และใบงาน!