สรุป CSS สำหรับการพิมพ์ลงกระดาษ

 (voussoir.net)
26 คะแนน โดย GN⁺ 2024-03-04 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • กำลังทำงานที่บริษัทเพื่อสร้างและทดแทนแบบฟอร์มที่เดิมเขียนด้วยมือบนกระดาษ/Excel ให้กลายเป็นเครื่องมือบนเว็บโดยใช้ HTML จึงสรุปเรื่องนี้ไว้
  • อธิบายพื้นฐานของ CSS สำหรับควบคุมว่าเว็บเพจจะมีหน้าตาอย่างไรเมื่อถูกพิมพ์ รวมถึงทิปและเทคนิคบางอย่าง

@page

  • @page เป็นกฎ CSS ที่ใช้บอกเบราว์เซอร์เกี่ยวกับการตั้งค่าการพิมพ์ของเว็บไซต์
  • @page ครอบคลุม DOM และในเว็บนั้นองค์ประกอบ <html> จะถูกจำกัดด้วยขอบหน้าจอ แต่ตอนพิมพ์จะถูกจำกัดโดย @page
  • การตั้งค่า @page โดยคร่าว ๆ จะสอดคล้องกับตัวเลือกที่เห็นในกล่องโต้ตอบการพิมพ์ของเบราว์เซอร์เมื่อกด Ctrl+P

@media print

  • มี media query แบบ print ที่ใช้เขียนสไตล์ซึ่งจะมีผลเฉพาะตอนพิมพ์เท่านั้น
  • เพิ่ม display:none ให้กับส่วนหัว ตัวเลือก ข้อความช่วยเหลือผู้ใช้ และองค์ประกอบอื่น ๆ ที่ไม่ควรปรากฏในงานพิมพ์

ความกว้าง ความสูง ระยะขอบ และแพดดิง

  • จำเป็นต้องเข้าใจ box model และเหตุผลที่ตั้งค่า @page margin: 0 ก็เพราะต้องการจัดการระยะขอบด้วยองค์ประกอบใน DOM มากกว่า
  • จะเข้าใจได้ง่ายกว่าหากจำไว้ว่า <html> กินพื้นที่ของกระดาษจริงทั้งหมด และระยะขอบอยู่ภายใน DOM

การกำหนดตำแหน่งขององค์ประกอบ

  • ตอนออกแบบเอกสาร ให้จัดวางองค์ประกอบด้วย HTML/CSS ที่เหมาะสม
  • หากต้องทำสี่เหลี่ยมให้พอดีกับกระดาษสติกเกอร์ขนาดเฉพาะ หรือต้องพิมพ์ข้อมูลลงบนกระดาษที่มีฉลากพิเศษ ก็อาจใช้การจัดวางตำแหน่งแบบสัมบูรณ์ได้

เอกสารหลายหน้าและองค์ประกอบที่ทำซ้ำ

  • เมื่อเขียนตัวสร้างงานพิมพ์ที่มีข้อมูลตาราง เช่น ใบแจ้งหนี้ หาก <table> ต่อเนื่องไปยังหน้าที่สอง เบราว์เซอร์จะคัดลอก <thead> ไปไว้ด้านบนของแต่ละหน้าโดยอัตโนมัติ
  • ใช้ JavaScript แบ่งตารางออกเป็นหลายตารางย่อยเพื่อสร้างหน้าเอกสาร

โหมดแนวตั้ง/แนวนอน

  • ผู้ใช้สามารถเขียนทับกฎ @page ได้หากต้องการ
  • สามารถสร้างองค์ประกอบ <style> แยกสำหรับโหมดแนวตั้งและแนวนอน แล้วใช้ JavaScript สลับได้

แหล่งข้อมูล

  • มีหลายวิธีในการนำข้อมูลมาใส่ในหน้า เช่น ใส่ข้อมูลทั้งหมดลงใน URL parameters หรือใช้ JavaScript ดึงเรคอร์ดจากฐานข้อมูลผ่าน API
  • ตั้งค่า contenteditable เพื่อให้ผู้ใช้แก้ไขเล็กน้อยก่อนพิมพ์ได้

ความเห็นของ GN⁺

  • บทความนี้เป็นคู่มือที่มีประโยชน์สำหรับนักพัฒนาเว็บเกี่ยวกับวิธีเขียน CSS สำหรับงานพิมพ์ โดยเฉพาะผู้ที่ทำงานแปลงเว็บเพจให้เป็นเอกสารจริง
  • CSS สำหรับการพิมพ์เป็นหัวข้อที่มักถูกมองข้าม แต่ในหลายองค์กรยังคงต้องพิมพ์เอกสารสำคัญอยู่บ่อยครั้ง จึงเป็นความรู้ที่มีคุณค่า
  • แนวทางเชิงเทคนิคที่บทความนำเสนอดูเหมือนผ่านการทดสอบและพิสูจน์แล้วในงานจริง และมอบโซลูชันที่ใช้งานได้จริงสำหรับการแก้ปัญหา
  • การใช้กฎ CSS @page และ query @media print มีความสำคัญต่อการควบคุมขนาดกระดาษและระยะขอบเมื่อพิมพ์เว็บเพจ ซึ่งเป็นเรื่องที่นักพัฒนาเว็บควรรู้
  • บทความนี้ไม่ได้หยุดแค่ความเข้าใจพื้นฐานของ CSS สำหรับการพิมพ์ แต่ยังให้ตัวอย่างและทิปที่นำไปใช้ได้จริง ช่วยลดช่องว่างระหว่างทฤษฎีกับการใช้งานจริง

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
cosine20 2024-03-11

คราวหน้าผมอยากลองเอาอันนี้ไปทำเป็นโปรเจกต์เล่น ๆ ดูครับ
 
GN⁺ 2024-03-04
ความคิดเห็นบน Hacker News

  • คำอธิบายเกี่ยวกับสไตล์การพิมพ์ที่ชอบสำหรับเว็บไซต์ส่วนตัว:

    • ทำให้หัวข้อของแต่ละส่วนไม่ถูกพิมพ์ไว้ที่ท้ายหน้าโดยที่เนื้อหาไปเริ่มต่อบนหน้าถัดไปแบบไม่มีหัวข้อกำกับ
    • ทำให้กราฟิกและแผนภาพไม่ล้นข้ามหน้า และพิมพ์ออกมาเต็มหน้าอย่างเหมาะสม
    • พิมพ์ URL ของไฮเปอร์ลิงก์ออกมาด้วย เพื่อไม่ให้ลิงก์เหลือเพียงข้อความที่มีขีดเส้นใต้เท่านั้น

  • ประสบการณ์การจัดทำหนังสือด้วย Pagedjs.org:

    • แม้จะมีบั๊กบางอย่างในหน้าพรีวิว แต่ผลลัพธ์สุดท้ายสมบูรณ์แบบ และช่วยประหยัดเวลาได้เหลือเพียงหนึ่งในสี่เมื่อเทียบกับการใช้ InDesign
    • หากคุ้นเคยทั้ง HTML/CSS และ InDesign อยู่แล้ว Pagedjs เป็นตัวเลือกที่ดีกว่าสำหรับการจัดเลย์เอาต์เอกสารขนาดยาว

  • ปัญหาด้านการรองรับ CSS สำหรับงานพิมพ์ในเบราว์เซอร์:

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

  • ความง่ายของการพิมพ์ด้วย CSS:

    • แอปใด ๆ ก็สามารถส่งออก HTML+CSS เพื่อเตรียมเอกสารสำหรับพิมพ์ที่เรียบร้อยและสวยงามได้อย่างง่ายดาย
    • การเขียนงานจัดวางตัวอักษรด้วย CSS ใช้เวลาเพียงไม่กี่นาที และง่ายกว่าการไปเรียน PostScript หรือ TeX

  • สถานการณ์ที่การรองรับงานพิมพ์ของเบราว์เซอร์แย่มากจนต้องสร้างแอปเนทีฟ:

    • ตอนนี้ต้องดาวน์โหลด PDF มาก่อนจึงจะพิมพ์ได้
    • ขอให้ผู้พัฒนา Chrome/Blink, Safari/Webkit และ Firefox/Mozilla อย่างน้อยทำให้วิธีแฮ็กต่าง ๆ ยังพอใช้งานได้

  • ข้อคิดเกี่ยวกับประวัติและสถานการณ์ปัจจุบันของ CSS:

    • เดิมที CSS เริ่มต้นขึ้นโดยคำนึงถึงสื่อสิ่งพิมพ์ แต่การรองรับจากเบราว์เซอร์กลับตามไม่ทัน

  • วิธีสร้างใบแจ้งหนี้และ e-book บางส่วนด้วย HTML & CSS:

    • แนะนำการใช้งาน print-css.rocks และ Weasyprint

  • กล่าวถึง paper-css ที่เคยใช้เพื่อสร้าง PDF ผ่านเบราว์เซอร์

  • ข้อดีของการผลิตสื่อสิ่งพิมพ์ด้วย HTML/CSS:

    • ใช้ HTML/CSS สำหรับทุกอย่างที่จำเป็นในการทำสื่อสิ่งพิมพ์

  • ประสบการณ์การใช้ทักษะ CSS เพื่อทำโปรไฟล์ของโซเชียลเน็ตเวิร์กให้อยู่ในรูปแบบพิมพ์ได้:

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