Stylesheet Cetak untuk Website Pribadi — Membuat Halaman Tetap Berguna di Kertas

Beberapa waktu lalu, aku mencetak salah satu artikelku sendiri dan mendapati bahwa versi kertasnya memuat hampir semuanya, kecuali pengalaman membaca yang nyaman. Navigasi memenuhi bagian atas, tombol share melayang di samping teks, warna gelap menghabiskan tinta, dan halaman terakhir hanya berisi sedikit footer.

Mencetak mungkin terdengar kuno, tetapi orang masih menyimpan resep, petunjuk workshop, invoice, catatan belajar, dan esai panjang sebagai kertas atau PDF. Print stylesheet sederhana menghargai kebiasaan itu. Ia seperti merapikan ruangan sebelum tamu datang: kontennya tidak berubah, tetapi benda yang tidak diperlukan berhenti menghalangi.

Print Adalah Konteks Responsive yang Lain

Kita biasanya menjelaskan responsive design sebagai kemampuan halaman menyesuaikan diri dengan ponsel, tablet, dan desktop. Kertas adalah viewport lain dengan aturan yang tidak biasa. Ukuran fisiknya tetap, memiliki batas halaman yang tegas, tidak mengenal scrolling atau animasi, dan tidak menyediakan cara yang masuk akal untuk mengeklik link. Warna background bisa dinonaktifkan, margin berbeda antar-printer, dan layout layar yang indah dapat terpotong canggung di dua lembar.

Karena itu, print stylesheet bukan redesign berukuran mini. Tugasnya adalah mempertahankan makna dokumen sambil membuang elemen interface yang hanya berguna di layar. Judul artikel, penulis, tanggal terbit, heading, paragraf, gambar, tabel, kutipan, dan contoh kode biasanya penting. Hamburger menu, cookie banner, kolom pencarian, carousel artikel terkait, serta kotak newsletter yang sticky biasanya tidak.

Perbedaannya mirip menyiapkan barang untuk perjalanan kereta singkat. Kamu tidak mengecilkan seluruh isi rumah agar masuk koper; kamu memilih barang yang tetap berguna di tujuan.

Mulai dengan Inventaris Konten

Sebelum menulis CSS, buka artikel yang cukup mewakili isi situs lalu gunakan print preview pada browser. Jika memungkinkan, pilih halaman yang memiliki gambar, code block panjang, tabel, dan beberapa heading. Kemudian catat apa yang harus dipertahankan, apa yang perlu disembunyikan, dan apa yang membutuhkan perlakuan berbeda. Inventaris singkat ini mencegah kesalahan umum: menyembunyikan container besar yang ternyata juga membungkus konten penting.

Utamakan HTML semantik dan utility class yang stabil. Elemen seperti <article>, <nav>, <aside>, dan <footer> membuat aturan print lebih mudah dipahami. Class seperti .no-print berguna untuk control tertentu, tetapi jangan menjadikannya pengganti struktur yang memiliki makna.

Tentukan juga apakah hasil cetak tersebut terutama berupa artikel, receipt, atau dokumen referensi. Esai membutuhkan tipografi nyaman dan tujuan link yang terlihat. Receipt memerlukan jarak yang ringkas serta detail transaksi lengkap. Satu kumpulan aturan generik bisa menjadi baseline, tetapi jenis konten tetap harus memandu keputusan akhirnya.

Baseline CSS yang Praktis

Stylesheet berikut sengaja dibuat sederhana. Aturan ini membuang perabot khusus layar, mengganti warna dengan palette yang hemat tinta, membiarkan artikel memakai lebar yang tersedia, mencetak tujuan link yang berguna, serta mengurangi page break yang mengganggu.

@media print {
  @page {
    margin: 18mm;
  }

  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.5;
  }

  nav,
  aside,
  .site-header,
  .site-footer,
  .share-buttons,
  .comments,
  .newsletter,
  .no-print {
    display: none !important;
  }

  main,
  article {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  h1, h2, h3 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  p, blockquote, figure, pre, table {
    orphans: 3;
    widows: 3;
  }

  figure, pre, table, blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid #999;
    padding: 8pt;
  }

  article a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    overflow-wrap: anywhere;
  }
}

Jangan menyalin daftar selector ini tanpa memeriksanya. Inspeksi theme milikmu dan ganti nama class sesuai komponen khusus layar yang benar-benar ada. Print CSS terbaik sering kali pendek karena HTML di bawahnya sudah memisahkan konten dari interface dengan baik.

Perlakukan Link, Gambar, dan Kode dengan Hati-hati

Frasa biru bergaris bawah memberi tahu bahwa sesuatu bisa diklik di layar, tetapi informasi itu tidak lengkap di kertas. Menambahkan alamat tujuan membuat referensi eksternal dapat ditemukan kembali. Namun, mencetak semua URL dapat membuat paragraf ramai, terutama untuk navigasi internal atau heading yang dijadikan link. Batasi aturan pada konten artikel dan pertimbangkan mengecualikan anchor, link footnote, serta link yang teksnya sudah berupa URL.

Gambar juga membutuhkan pertimbangan. Diagram informatif, screenshot, dan foto yang dibahas dalam teks sebaiknya tetap ada. Gradient dekoratif, avatar berulang dalam komentar, serta hero image berukuran besar dapat memboroskan tinta tanpa menambah makna. Jika gambar bergantung pada warna, pastikan ia masih bisa dipahami dalam grayscale. Jangan menganggap memaksa print-color-adjust: exact selalu menjadi jawaban; pembaca mungkin sengaja menonaktifkan background untuk menghemat tinta.

Code block sangat rentan karena satu baris panjang dapat terpotong di luar area cetak. white-space: pre-wrap menjaga semua konten tetap terlihat, walaupun wrapping dapat membuat command yang akan disalin terasa kurang jelas. Jangan mengecilkan kode hingga sulit dibaca. Jika keutuhan baris sangat penting, ringkas contohnya atau tambahkan catatan bahwa command canonical tetap tersedia secara online.

Mengatur Page Break Tanpa Melawan Printer

Fragmentasi halaman adalah bagian print CSS yang lebih sulit diprediksi. Property modernnya adalah break-before, break-after, dan break-inside, sementara property lama page-break-* masih membantu compatibility. Memakai keduanya cukup masuk akal untuk website pribadi berukuran kecil.

Jaga agar heading tetap bersama setidaknya sebagian paragraf setelahnya. Usahakan figure, kutipan, atau contoh kode yang ringkas berada di satu halaman. Property orphans dan widows meminta browser agar tidak meninggalkan satu baris kesepian di bawah atau atas halaman. Ini adalah permintaan, bukan perintah mutlak: block yang lebih tinggi dari selembar kertas tetap harus dipecah.

Hindari memasang break-inside: avoid pada setiap paragraf atau container besar. Browser bisa merespons dengan meninggalkan ruang kosong lebar, seperti orang yang mengemas kardus tetapi menolak membagi kelompok barang apa pun. Terapkan kontrol pemisahan hanya ketika pemisahan benar-benar merusak pemahaman.

Uji Lebih dari Satu Artikel yang Sempurna

Di Chromium atau Firefox, buka Print Preview lalu uji ukuran A4 dan Letter, orientasi portrait, beberapa pengaturan margin, serta output berwarna dan monochrome. Simpan sebagai PDF dan periksa setiap halaman. PDF berguna bukan karena mewakili semua printer fisik dengan sempurna, melainkan karena ia cepat memperlihatkan clipping, halaman kosong, media terlalu besar, dan heading yang terpisah.

Berikutnya, uji edge case: post pendek, post sangat panjang, halaman tanpa gambar, tabel lebar, URL panjang, nested list, dan contoh kode dengan token yang tidak terputus. Besarkan zoom browser atau default font size sebelum preview untuk menemukan asumsi tentang ukuran tetap. Jika situsmu mendukung dark mode, uji ketika mode tersebut aktif dan pastikan aturan print tetap menghasilkan teks gelap di atas background terang.

Kamu juga bisa mengemulasikan print media melalui browser developer tools. Halaman tetap dapat diinspeksi ketika aturan print aktif, sehingga debugging selector jauh lebih cepat daripada berulang kali membuka dialog preview. Preview final tetap wajib karena emulasi developer tools tidak memperlihatkan pagination yang sebenarnya.

Jaga agar Halaman Cetak Tetap Jujur

Artikel cetak yang berguna perlu membawa konteks yang cukup agar dapat berdiri sendiri. Pertimbangkan untuk menampilkan nama situs, judul artikel, penulis, tanggal terbit atau update, serta canonical URL dalam header atau footer khusus print yang ringkas. Ini penting ketika PDF diunduh hari ini lalu ditemukan kembali berbulan-bulan kemudian di folder tanpa label.

Jangan menyisipkan konteks penting hanya lewat CSS generated content karena dukungan dan accessibility dapat berbeda. Letakkan metadata bermakna di HTML lalu gunakan CSS untuk mengubah tampilannya. Jika artikel sering berubah, sertakan tanggal update daripada berpura-pura bahwa hasil cetak akan selalu mutakhir.

Terakhir, ingat privacy. Halaman akun yang dicetak tidak boleh tanpa sengaja menampilkan control tersembunyi, token, alamat email, atau data debugging. Print preview adalah permukaan output lain, jadi periksa dengan kehati-hatian yang sama seperti ketika kamu menyiapkan screenshot publik.

Kesimpulan: Fitur Kecil yang Berumur Panjang

Print stylesheet jarang muncul dalam feature roadmap, tetapi ia dapat membuat website pribadi lebih tahan lama dan murah hati. Dengan satu block @media print yang fokus, kamu bisa membuang keramaian interface, menjaga tipografi tetap terbaca, mempertahankan referensi, dan mencegah kejutan page break terburuk.

Mulailah dari satu artikel nyata, bukan design system yang masih teoretis. Cetak artikelnya, tandai bagian yang terasa boros atau membingungkan, sesuaikan CSS, lalu ulangi dengan beberapa edge case. Jika kamu pernah membuat print style untuk situsmu, bagikan masalah paling aneh yang kamu temukan di kolom komentar; keunikan kecil dari browser dan printer itu sering memberi pelajaran paling berguna.