|
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 */
|