- Desain responsif yang menjadi inti pengalaman web perlu mempertimbangkan bukan hanya perangkat, tetapi juga dukungan untuk media keluaran (cetak)
- Karena aksesibilitas, kebutuhan hukum, perjalanan, dan berbagai alasan lainnya, kualitas serta kegunaan halaman web saat dicetak tetap penting
- Dengan fitur khusus cetak di CSS seperti @media print, @page, satuan absolut, page-break, dan lainnya, kita dapat mewujudkan tata letak yang rapi, pembagian halaman yang tepat, dan pencetakan yang efisien
- Sembunyikan elemen yang tidak perlu seperti navigasi dan footer, lalu lengkapi informasi seperti tautan dan singkatan agar sesuai untuk media kertas
- Dengan mempertimbangkan cetak hitam-putih, penghematan tinta, dan keterbacaan, penggunaan warna dan latar belakang perlu diminimalkan, sekaligus mendorong perbaikan yang saling melengkapi antara versi cetak dan layar
Perlunya desain web untuk pencetakan
- Dari sisi aksesibilitas, orang yang tidak dapat menatap layar dalam waktu lama tetap bisa memperoleh informasi melalui konten yang dicetak
- Saat bepergian tanpa akses internet, atau karena kewajiban penyimpanan hukum dan kebijakan di dalam organisasi, situasi penggunaan materi cetak masih sangat beragam
- Karena banyak kesamaan dengan format penerbitan digital seperti EPUB, pengalaman membuat style cetak adalah keterampilan yang sangat mudah dikembangkan ke ranah lain
- Karena orang benar-benar mencetak dan memanfaatkan isi situs web, dukungan cetak berkontribusi pada peningkatan kualitas pengalaman pengguna secara keseluruhan
Cara menerapkan style cetak
- Dengan memanfaatkan
@media print di CSS, kita dapat menetapkan style khusus untuk cetak
- Ada beberapa cara seperti
<link rel="stylesheet" media="print">, @import url("...") print, dan @media print { ... } di CSS internal
- Untuk tampilan layar saja, gunakan
@media screen
Pengujian style cetak
- Browser seperti Edge, Chrome, Firefox, dan Safari menyediakan fitur simulasi media cetak
- Hasil simulasi bisa berbeda dari hasil cetak nyata, dan sebagian besar browser secara default menonaktifkan latar belakang (untuk menghemat tinta)
- Disarankan melakukan pengujian dengan mempertimbangkan lingkungan cetak yang sebenarnya
Satuan absolut dan aturan @page
- CSS menyediakan berbagai satuan absolut seperti cm, mm, in, pt, px, yang berguna untuk penyesuaian ukuran yang presisi saat benar-benar dicetak
- Dengan aturan
@page, kita dapat mengatur ukuran kertas (A4, A5, dan sebagainya), margin, orientasi, dan lainnya
- Perlu juga mempertimbangkan batas area cetak printer, serta footer/header yang otomatis ditambahkan browser
Pembagian halaman dan pengelolaan paragraf
- Untuk konten panjang, pembagian halaman sangat penting, dan posisinya dapat dikendalikan dengan properti break-before, break-after, break-inside
- Sintaks lama
page-break-* juga masih memiliki kompatibilitas
- Dengan properti orphans, widows, jumlah baris yang terdampar sendirian di awal/akhir paragraf bisa diminimalkan (namun beberapa browser belum mendukung)
- Dengan box-decoration-break, konsistensi UI seperti garis batas saat halaman terbelah dapat dijaga
Dukungan cetak untuk elemen interaktif
- Di atas kertas, tautan dan singkatan tidak bisa berinteraksi, sehingga URL atau informasi tambahan dapat disertakan di output melalui
a[href]:after, abbr[title]:after, dan sejenisnya
- Elemen form dapat ditata sebagai kolom isian untuk cetak, dan container scroll perlu diperluas dengan
overflow: visible dan sejenisnya
- Elemen yang tidak perlu seperti navigasi dan footer dapat dihapus dengan
display: none, dan pencetakan dapat dikendalikan agar hanya main yang dicetak
Warna, tinta, dan keterbacaan
- Dengan cetak hitam-putih dan penghematan tinta sebagai asumsi dasar, penekanan visual bisa diganti dari warna latar menjadi elemen seperti border
- Dengan print-color-adjust: exact, hanya elemen tertentu yang bisa dipaksa mempertahankan warna (gunakan hanya bila perlu)
- Gambar sebaiknya diminimalkan seperlunya, dan elemen yang boros tinta seperti iklan disarankan untuk dihapus
Kesimpulan
- Web tidak hanya hadir di layar, tetapi juga di dunia fisik (kertas)
- Style cetak CSS adalah elemen kunci untuk meningkatkan aksesibilitas dan kualitas pengalaman pengguna
- Agar semua pengguna dapat mengonsumsi konten dengan berbagai cara, dukungan cetak adalah kemampuan penting dalam pengembangan web modern yang wajib diperhatikan
2 komentar
Sementara itu, postingan ini sendiri tidak ramah untuk dicetak.
UI yang tidak berguna saat dicetak, seperti COPY TO CLIPBOARD, ikut tercetak,
snippet kode terpotong dan scrollbar horizontal ikut tercetak.
Lihat juga ringkasan CSS untuk mencetak ke kertas yang pernah dibagikan sebelumnya.
Mencetak halaman web ke kertas dan mengekspornya sebagai PDF juga merupakan hal yang berbeda (misalnya bisa memakai warna tanpa khawatir tinta, atau bisa menggunakan hyperlink), dan untuk itu ada pustaka seperti paged.js.
Layak dipertimbangkan saat membuat halaman untuk manual, materi pelatihan, dan lembar belajar!