Ringkasan CSS untuk Mencetak ke Kertas

 (voussoir.net)
26 poin oleh GN⁺ 2024-03-04 | 2 komentar | Bagikan ke WhatsApp
  • Saya sedang mengerjakan di kantor untuk membuat ulang dan menggantikan formulir yang sebelumnya ditulis tangan di kertas/Excel menjadi alat berbasis web menggunakan HTML, jadi saya merangkum hal-hal ini
  • Menjelaskan dasar-dasar CSS untuk mengontrol bagaimana halaman web terlihat saat dicetak, beserta beberapa tip dan trik

@page

  • @page adalah aturan CSS yang memberi tahu browser pengaturan pencetakan untuk sebuah situs web.
  • @page mencakup DOM, dan di web elemen <html> dibatasi oleh tepi layar, tetapi saat dicetak dibatasi oleh @page.
  • Pengaturan @page kira-kira sesuai dengan pengaturan yang didapat di dialog cetak browser saat menekan Ctrl+P.

@media print

  • Ada media query print yang memungkinkan Anda menulis style yang hanya diterapkan saat mencetak.
  • Tambahkan display:none pada header, opsi, teks bantuan pengguna, dan elemen lain yang tidak seharusnya muncul di hasil cetak.

Lebar, tinggi, margin, padding

  • Diperlukan pemahaman tentang box model, dan alasan menetapkan @page margin: 0 adalah karena lebih memilih menangani margin pada elemen DOM.
  • Lebih mudah untuk mengingat bahwa <html> menempati seluruh kertas fisik dan margin berada di dalam DOM.

Menentukan posisi elemen

  • Saat mendesain dokumen, elemen ditempatkan menggunakan HTML/CSS yang sesuai.
  • Anda juga dapat menggunakan absolute positioning saat perlu membuat kotak yang pas untuk kertas stiker berukuran tertentu, atau mencetak data pada kertas dengan label khusus.

Dokumen multi-halaman dan elemen berulang

  • Saat menulis generator cetak yang memuat data tabel seperti invoice, jika <table> berlanjut ke halaman kedua, browser akan otomatis menggandakan <thead> di bagian atas setiap halaman.
  • Halaman dibuat dengan membagi tabel menjadi beberapa tabel kecil menggunakan JavaScript.

Mode potret/lanskap

  • Pengguna dapat menimpa aturan @page jika mereka mau.
  • Anda dapat membuat elemen <style> terpisah untuk mode potret dan lanskap lalu beralih di antaranya menggunakan JavaScript.

Sumber data

  • Ada beberapa cara untuk membawa data ke halaman, seperti mengemas semua data ke parameter URL atau mengambil record database melalui API menggunakan JavaScript.
  • Atur contenteditable agar pengguna dapat melakukan perubahan kecil sebelum mencetak.

Opini GN⁺

  • Artikel ini memberikan panduan yang berguna bagi pengembang web tentang cara menulis CSS untuk pencetakan. Ini akan sangat membantu terutama bagi pengembang yang bekerja mengubah halaman web menjadi dokumen fisik.
  • CSS untuk pencetakan sering kali menjadi topik yang diabaikan, tetapi di banyak perusahaan masih sering ada kebutuhan untuk mencetak dokumen penting, sehingga pengetahuan ini bernilai.
  • Pendekatan teknis yang disajikan dalam artikel tampaknya telah diuji dan divalidasi di lingkungan kerja nyata, serta memberikan solusi praktis untuk menyelesaikan masalah nyata.
  • Penggunaan aturan CSS @page dan query @media print penting untuk mengontrol ukuran kertas dan margin saat mencetak halaman web, dan ini adalah hal yang wajib diketahui pengembang web.
  • Artikel ini melampaui pemahaman dasar tentang CSS untuk pencetakan dengan memberikan contoh dan tip praktis tentang bagaimana itu benar-benar diterapkan, sehingga membantu menjembatani kesenjangan antara teori dan praktik.

Bacaan terkait

2 komentar

 
cosine20 2024-03-11

Lain kali saya ingin mencoba membuat proyek iseng dengan ini.
 
GN⁺ 2024-03-04
Komentar Hacker News

  • Penjelasan tentang gaya cetak yang disukai untuk situs web pribadi:

    • Header bagian dicetak agar tidak berakhir di bagian bawah halaman dan meninggalkan isi di bagian atas halaman berikutnya tanpa header.
    • Grafik dan diagram dicetak utuh dalam satu halaman tanpa terpotong ke halaman berikutnya.
    • URL dari hyperlink ikut dicetak agar tautan tidak hanya tampil sebagai teks bergaris bawah.

  • Pengalaman menyusun buku menggunakan Pagedjs.org:

    • Ada beberapa bug di pratinjau, tetapi hasil akhir sempurna, dan waktu yang dibutuhkan hanya seperempat dibanding menggunakan InDesign.
    • Jika sudah terbiasa dengan HTML/CSS dan InDesign, Pagedjs adalah pilihan yang lebih baik untuk tata letak dokumen panjang.

  • Masalah dukungan browser untuk CSS cetak:

    • Tidak ada padanan fitur untuk beberapa kemampuan di CSS, seperti menambahkan catatan kaki di setiap halaman.
    • Bertanya apakah ada properti CSS kustom yang sedang dieksplorasi dan mesin tata letak HTML yang mudah digunakan untuk menutup kesenjangan ini.

  • Kemudahan mencetak menggunakan CSS:

    • Aplikasi apa pun bisa menghasilkan HTML+CSS untuk menyiapkan dokumen cetak yang rapi dan indah dengan mudah.
    • Menulis tipografi CSS dalam beberapa menit lebih mudah daripada harus mempelajari PostScript atau TeX.

  • Situasi ketika dukungan browser untuk pencetakan begitu buruk hingga perlu membuat aplikasi native:

    • Saat ini pengguna harus mengunduh PDF lalu mencetaknya.
    • Meminta pengembang Chrome/Blink, Safari/Webkit, dan Firefox/Mozilla setidaknya membuat solusi hack tetap bisa berjalan.

  • Refleksi tentang sejarah dan kondisi CSS saat ini:

    • CSS pada awalnya dimulai dengan media cetak sebagai salah satu pertimbangan, tetapi dukungan browser tertinggal.

  • Cara membuat invoice dan beberapa ebook menggunakan HTML & CSS:

    • Memperkenalkan cara memanfaatkan print-css.rocks dan Weasyprint.

  • Menyebut paper-css yang digunakan untuk menghasilkan PDF melalui browser.

  • Kelebihan membuat materi cetak dengan HTML/CSS:

    • Menggunakan HTML/CSS untuk semua yang dibutuhkan dalam pembuatan materi cetak.

  • Pengalaman memanfaatkan keterampilan CSS untuk menyediakan profil jejaring sosial dalam format cetak:

    • Memungkinkan profil dapat dicetak di jejaring sosial yang ditujukan untuk pekerja pabrik.
    • Juga berbagi pengalaman membuat editor online untuk membuat sertifikat workshop dan kursus.