11 มี.ค.63 มีโอกาสปรับ rsp80.css เพื่อให้รองรับการพิมพ์เว็บเพจลงบนกระดาษออกทางเครื่องพิมพ์ โดยแต่งส่วนของ header และ footer ให้มีเนื้อหาเท่าที่จำเป็น ส่วนใดไม่จำเป็นก็ตัดออกโดยอัตโนมัติ ผ่านการทำงานของ css ที่แยกแฟ้มไปภายนอก เริ่มจากการปรับ web2 เป็นแฟ้มแรกใน thaiall.com เมื่อมีการกดปุ่ม print-friendly (wiki) บน menu bar ของเว็บเพจ ก็จะเรียกฟังก์ชันด้วย <a onClick="window.print()"> เช่นเดียวกับปุ่ม print ที่อยู่เหนือ footer เป็น plug-in ของ sharethis.com ก็ปรากฎผลในการเตรียมพิมพ์ออกเครื่องพิมพ์เช่นเดียวกัน ส่วนเครื่องพิมพ์ก็จะมองหา printer ที่ติดตั้งในเครื่องของผู้ใช้ การควบคุมส่วนต่าง ๆ ที่จะพิมพ์หรือไม่พิมพ์ ได้สร้างคลาสใน css ชื่อ not_screen กับ not_print โดยแบ่งการทำงานไว้ตามสื่อ 2 ประเภท คือ print กับ screen จากนั้นก็นำทั้ง 2 คลาส ไประบุในส่วนต่าง ๆ เพื่อควบคุม ส่วนใดไม่อยากให้แสดงผลตอน print ก็ใช้ not_print ส่วนใดไม่ให้แสดงผลบน browser แต่ให้แสดงเฉพาะตอน print ก็ใส่ not_screen พบว่าต้องกำหนด a[href]:after{} เพราะมีการแสดง tag ให้กับลิงค์ตอนสั่ง print หากไม่ต้องการแสดงก็ต้องกำหนดว่า content:none กำกับไว้ ซึ่งมีตัวอย่าง css และการเรียนกใช้คลาส ดังนี้

@media print{
  .not_print{display:none;}
  a[href]:after{content:none !important;}
}
@media screen{
  .not_screen{display:none !important;}
}
/* 
print this
 */

การสั่งพิมพ์ ผ่าน Browser ทั้ง Firefox และ Chrome จะมีตัวเลือกในการสั่งพิมพ์แตกต่างกันไป หากพิมพ์ผ่าน Chrome จะพบตัวเลือก Save as PDF ทำให้ผู้ใช้ที่ต้องการ save ผลการพิมพ์ webpage เป็น pdf ไม่ต้องหาโปรแกรมมาสนับสนุน หรือติดตั้งโปรแกรมเพิ่ม

ส่วน Firefox ไม่มีตัวเลือกนี้ จากภาพ ผมจะติดตั้ง pdfcreator ไว้แล้ว ทำให้ผลการพิมพ์เลือกพิมพ์เป็นแฟ้ม pdf ได้ตามต้องการ จากตัวเลือกใน Firefox สามารถเลือก Orientation เป็น Landscape หรือ Portrait แล้วกำหนด Shrink to Fit หรือขยายอักษร 200% ให้ตัวใหญ่ก็ได้

บางครั้งเราต้องการ webpage แบบสมบูรณ์เหมือนกับที่เห็นใน Browser ไม่ใช่การ Print แยกหน้า (Page break) ผ่านเครื่องพิมพ์ ซึ่ง webpage ทั่วไปมีเนื้อหาที่ถูกออกแบบให้แสดงผลแบบหน้าเดียวโดย ไม่มีการแบ่งหน้าอย่างเป็นระเบียบเหมือนใน MS Word ซึ่ง Extension : Full page screen capture บน Chrome สามารถทำการ Capture หน้าจอทั้งหมดเป็นภาพเดียว หรือจะเป็นเลือกแบบ PDF ก็จะแบ่งภาพออกเป็นหน้า (Page break) ทำให้ Print ออกทางเครื่องพิมพ์ ในรูปแบบที่สวยงามเหมือนที่เห็นบนเว็บเพจได้

เคยเล่าเรื่องการประยุกต์ใช้ Extension นี้ ใน /mit หัวข้อ App : จับหน้าจอภาพ แล้ว Save เป็น Image เล่าเรื่องการแสดงผลของเว็บเพจ สื่อเทิดพระเกียรติฯ ในแบบ Responsive Web Design ซึ่ง capture เว็บเพจไว้หลายขนาด แสดงตัวอย่างใน /mit