การใช้ @media print ในการกำหนด CSS สำหรับพิมพ์และ PDF

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

@media print

สเป็คของ media queries นั้น (อันเดียวกับที่เราใช้เขียน Responsive CSS นั่นแหละ) ยังเปิดให้เราสามารถเลือกประเภทอุปกรณ์แสดงผลได้ด้วย เราสามารถเลือกได้ไปตั้งแต่ screen, print, และ speech (สำหรับคนใช้ screen reader เช่นคนตาบอด)

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

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

หรือเขียนรวมไว้กับ CSS ปกติไฟล์เดียวกัน แต่ใช้ @media print กำหนดส่วน CSS สำหรับการพิมพ์เอาไว้

@media print {
  ... CSS สำหรับเวลาพิมพ์หน้าเว็บ ...
}

ทั้งสองวิธีจะให้ผลเหมือนกันคือ CSS นั้นๆ จะทำงานเมื่อเราสั่งพิมพ์หน้าเว็บเท่านั้น

ตั้งค่าหน้ากระดาษด้วย @page

ไม่รองรับใน Safari

ด้วย rule @page เราสามารถที่จะกำหนดระยะขอบกระดาษ (margin) ได้ และสามารถกำหนดขนาดกระดาษผ่านพร็อพเพอร์ตี้ size ได้ด้วย (รองรับเฉพาะเบราเซอร์ Chromium-based เช่น Chrome, Edge, หรือ Opera)

พร็อพเพอร์ตี้ size นั้นเปิดให้เรากำหนดขนาดกระดาษได้ทั้งเป็นชื่อขนาด (เช่น A4 หรือ letter) หรือจะกำหนดกว้างยาวก็ได้เช่นกัน และสามารถกำหนดแนวตั้งแนวนอนได้ด้วย

@media print {
  @page {
    margin: 2.5cm;
    size: A4 landscape; // หรือเช่น 21cm 29.7cm landscape
  }
}

จากตัวอย่างข้างบนก็คือในแต่ละหน้าจะมีระยะขอบกระดาษ 2.5 เซนติเมตร และสั่งพิมพ์เป็นหน้าแนวนอนขนาดกระดาษ A4

จริงๆ ตามสเป็คของ @page นั้นยังรองรับการกำหนด mark และ bleed ด้วย (เป็นการกำหนดตัดตก เอาไว้สำหรับส่งโรงพิมพ์) แต่ตอนนี้ยังไม่มีเบราเซอร์ตัวไหนรองรับ

สำหรับเบราเซอร์ที่ไม่รองรับ @page หรือ size นั้น จริงๆ เรายังสามารถเขียน CSS ปกติกำหนด width และ height ให้กับ html, body เพื่อกำหนดขนาดกระดาษ และใช้ transform เพื่อหมุนเนื้อหาให้เป็นแนวตั้ง/แนวนอนตามขนาดกระดาษได้ด้วยเช่นกัน

@page ยังรองรับ pseudo-class จำนวนหนึ่งที่ใช้คู่กันด้วย คือ

• :first สำหรับเลือกหน้าแรก
• :left สำหรับเลือกหน้าที่เนื้อหาส่วนใหญ่เขียนจากขวาไปซ้าย
• :right สำหรับเลือกหน้าที่เนื้อหาส่วนใหญ่เขียนจากซ้ายไปขวา

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

จริงๆ มีคนเสนอ workaround โดยใช้จาวาสคริปท์กำหนดค่า @page เองเอาไว้ด้วยบน StackOverflow

https://stackoverflow.com/questions/11160260/can-javascript-change-the-value-of-page-css

หน่วยวัดขนาดสำหรับงานพิมพ์

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

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

แต่ถ้าเอาไปพิมพ์ 1px จะมีขนาด 1/96 นิ้วเสมอ

แต่เมื่อเรามาเขียน CSS สำหรับการพิมพ์ หน่วยพวกนี้ก็จะต้องเปลี่ยนไปด้วย เพื่อให้เครื่องพิมพ์สามารถพิมพ์ออกมาได้ขนาดที่ถูกต้องตามต้องการ โดยใน CSS นั้นเราสามารถใช้หน่วยวัดปกติที่เราใช้กันได้ เช่น cm (เซนติเมตร), mm (มิลลิเมตร), in (นิ้ว), หรือ pt (point)

ใช่แล้ว หน่วย pt ที่เราติดกันมาจาก Word Processor นั้น มันเป็นหน่วยสำหรับพิมพ์

การดีบั๊ก media print บน Chrome/Edge

DevTools ของ Chrome (ซึ่งมีให้ใช้ใน Edge และ Opera ด้วย) จะรองรับการจำลองโหมดพิมพ์เพื่อให้เราสามารถดีบั๊กได้อย่างสะดวกโดยไม่ต้องพรีวิวก่อนพิมพ์เองตลอด

วิธีคือให้เราเปิด DevTools ขึ้นมาก่อน จากนั้นกด cmd+shift+p (หรือ ctrl+shift+p) แล้วเลือกคำสั่ง Show rendering

จากนั้นแท็บ Rendering จะเปิดขึ้นมาที่พาเนลด้านล่าง ให้หาตัวเลือก Emulate CSS media type แล้วเลือกเป็น print

ตัวอย่าง

body {
  font-size: 16px;
  font-family: sans-serif;
  color: coral;
}

.header {
  display: block;
}

@media print {
  @page {
    size: A4;
    margin: 2.5cm;
  }

  body {
    font-size: 12pt;
    font-family: serif;
    color: black;
  }

  .header {
    display: none;
  }
}

จากตัวอย่างก็คือเมื่อเราเปิดดูบนหน้าจอ จะเป็นฟอนต์แบบไม่มีเชิงขนาด 16px สีส้ม coral มีการแสดง .header ตามปกติ

แต่เมื่อเราสั่งพิมพ์ เบราเซอร์จะเลือกกระดาษขนาด A4 ตั้งระยะขอบ 2.5 ซม ซ่อน .header เปลี่ยนขนาดตัวอักษรเหลือ 12 พอยต์ และใช้ฟอนต์แบบมีเชิง สีดำ

อ้างอิง

• @media บน MDN Web Docs
• @page บน MDN Web Docs
• Google Developers