Jika Anda pernah mencetak reservasi tiket atau petunjuk arah ke hotel dari web, Anda mungkin kurang terkesan dengan hasilnya. Oleh karena itu, Anda mungkin tidak menyadari bahwa dokumen yang dicetak dapat ditata dengan cara yang sama seperti di layar, menggunakan Cascading Style Sheets (CSS).

Pemisahan Masalah

Manfaat utama CSS adalah pemisahan konten dari presentasi. Dalam istilah yang paling sederhana, ini berarti bukan markup gaya yang sangat kuno seperti:

Judul

Kami menggunakan markup semantik:

Judul

Tidak hanya jauh lebih bersih, ini juga berarti presentasi kita terpisah dari konten kita. Merender browser h1 elemen berukuran besar, teks tebal secara default, tetapi kita dapat mengubah gaya itu kapan saja dengan stylesheet:

h1 {font-weight: normal; }

Dengan mengumpulkan deklarasi gaya tersebut dalam file terpisah, dan mereferensikan file tersebut dari dokumen HTML kita, kita dapat menggunakan pemisahan dengan lebih baik. Style sheet dapat digunakan kembali, dan kita dapat mengubah file tunggal itu kapan saja untuk memperbarui pemformatan di setiap dokumen yang menggunakannya.

Termasuk Lembar Gaya Cetak

Dengan cara yang sama untuk memasukkan lembar gaya layar, kita dapat menentukan lembar gaya untuk dicetak. Lembar gaya layar biasanya disertakan seperti ini:

Namun, atribut tambahan, media, memungkinkan penargetan berdasarkan konteks di mana dokumen dirender. Secara default, elemen sebelumnya sama dengan:

Ini berarti stylesheet akan diterapkan untuk media apa pun tempat dokumen dirender. Namun, atribut media juga dapat mengambil nilai cetak dan layar:

Dalam contoh ini, file print.css stylesheet hanya akan digunakan saat dokumen dicetak. Ini adalah mekanisme yang sangat berguna. Kami dapat mengumpulkan semua gaya umum (mungkin jenis font atau spasi baris) dalam lembar gaya yang berlaku untuk semua media, dan pemformatan khusus media di lembar gaya individual. Sekali lagi, ini adalah penggunaan lain dari pemisahan perhatian.

Beberapa Contoh Deklarasi Style

Latar Belakang yang Bersih

Anda hampir pasti tidak ingin membuang-buang tinta untuk mencetak latar belakang atau gambar latar yang berwarna-warni. Mulailah dengan mengatur ulang semua default untuk nilai-nilai ini yang mungkin telah diatur dalam dokumen Anda:

tubuh {
latar belakang: putih;
warna hitam;
}

Anda mungkin juga ingin mencegah gambar latar belakang dicetak — ini harus dekoratif dan, oleh karena itu, bukan bagian wajib dari konten Anda:

* {
background-image: tidak ada! penting;
}

Terkait: Cara Mengatur Gambar Latar Belakang di CSS

Cara Mengatur Gambar Latar Belakang di CSS

CSS adalah alat yang ampuh untuk menata halaman web. Mempelajari cara menempatkan gambar latar belakang mengajarkan Anda banyak dasar-dasar CSS.

Mengontrol Margin

Hal lain yang perlu dipertimbangkan tentang cetakan adalah margin halaman. Meskipun CSS menyediakan cara untuk mengatur ukuran margin, Anda harus ingat bahwa browser dan printer Anda juga dapat mempengaruhi pengaturan margin.

Misalnya, dalam dialog cetak Chrome, ada pengaturan margin yang memiliki nilai termasuk tidak ada dan adat yang akan menimpa apa pun yang ditentukan melalui CSS:

Untuk alasan ini, disarankan untuk menyerahkan keputusan margin kepada pembaca di halaman web publik. Namun, untuk penggunaan pribadi, atau untuk membuat tata letak default, pengaturan margin cetak melalui CSS mungkin sesuai. Itu @halaman aturan memungkinkan pengaturan margin, dan harus digunakan sebagai berikut:

@page {
margin: 2cm;
}

CSS juga memiliki kapasitas untuk tata letak cetak yang lebih canggih, seperti memvariasikan margin sesuai dengan apakah halaman tersebut bernomor ganjil (kanan), genap (kiri), atau halaman sampul.

Sayangnya, ini kurang didukung — terutama opsi halaman sampul — tetapi dapat digunakan pada tingkat yang minimal. Gaya berikut menghasilkan halaman dengan margin bawah yang sedikit lebih besar dari margin atas dan margin yang sedikit lebih besar di tepi halaman luar daripada tulang belakang:

@page {
margin kiri: 20mm;
margin kanan: 20mm;
margin atas: 40mm;
margin bawah: 50mm;
}
@halaman: kiri {
margin kiri: 30mm;
}
@page: benar {
margin kanan: 30mm;
}

Menyembunyikan Konten yang Tidak Relevan

Tidak semua konten cocok untuk versi cetak dokumen Anda. Jika halaman Anda menyertakan navigasi banner, iklan, atau sidebar, Anda mungkin ingin mencegah detail tersebut muncul di versi cetak, misalnya:

#contents, div.ad {display: none; }

Hyperlink jelas tidak relevan dalam materi cetakan, jadi Anda mungkin ingin menghapus gaya apa pun yang membedakannya dari teks di sekitarnya:

a {text-decoration: none; warna: mewarisi; }

Namun, Anda mungkin masih ingin pembaca memiliki akses ke URL asli, dan solusi langsungnya adalah memasukkannya secara otomatis setelah teks yang ditautkan:

a [href]: setelah {
konten: "(" attr (href) ")";
ukuran font: 90%;
warna: # 333;
}

CSS ini memberikan hasil seperti berikut:

a [href]: setelah secara khusus menargetkan posisi setelah (:setelah) setiap elemen tautan (Sebuah) yang sebenarnya memiliki URL ([href]). Itu kandungan deklarasi di sini memasukkan nilai dari href atribut antara tanda kurung. Perhatikan bahwa aturan gaya lain dapat diterapkan untuk mengontrol tampilan konten yang dihasilkan.

Menangani Hentian Halaman

Untuk menghindari pemutusan halaman meninggalkan konten yang terisolasi, atau memecahnya dengan canggung di tengah, gunakan properti pemisah halaman: page-break-before, page-break-after dan page-break-inside. Sebagai contoh:

tabel {page-break-inside: hindari; }

Ini akan membantu menjaga tabel agar tidak mencakup banyak halaman, asalkan tidak ada yang lebih tinggi dari satu halaman. Demikian pula:

h1, h2 {page-break-before: selalu; }

Artinya, tajuk seperti itu selalu memulai halaman baru. Ini dapat menyebabkan masalah jika Anda segera mengikuti halaman Anda h1 dengan h2, karena h1 akan berakhir di halaman dengan sendirinya. Untuk menghindarinya, cukup batalkan jeda halaman menggunakan pemilih yang menargetkan instance spesifik tersebut, misalnya:

h1 + h2 {page-break-before: hindari; }

Melihat Gaya Cetak

Dalam semua kasus, browser dan sistem operasi Anda harus menyediakan fitur pratinjau cetak, sering kali sebagai bagian dari dialog cetak standar.

Browser Chrome membuatnya lebih nyaman untuk memeriksa dan bahkan men-debug gaya cetak Anda melalui Alat Pengembang, seperti yang ditunjukkan oleh contoh ini yang menunjukkan CV dengan lembar gaya cetak. Pertama, buka menu utama dan pilih Lebih Banyak Alat diikuti oleh Alat pengembang pilihan:

Dari panel baru yang muncul, pilih Tidak bisa, kemudian Lebih banyak alat, diikuti oleh Merender:

Kemudian gulir ke bawah ke Meniru jenis media CSS pengaturan. Dropdown memungkinkan Anda untuk beralih antara tampilan cetak dan layar dokumen Anda:

Saat meniru lembar gaya cetak, standarnya Gaya browser tersedia untuk memeriksa dan memodifikasi aturan gaya langsung. Ingatlah bahwa meniru hasil cetak di layar masih belum 100% akurat. Browser tidak tahu apa-apa tentang ukuran kertas, dan file @halaman aturan tidak dapat ditiru.

Mencetak ke PDF

Fitur praktis dari sistem operasi modern adalah kemampuan untuk mencetak ke file PDF. Akibatnya, apa pun yang dapat Anda cetak dapat, sebaliknya, dikirim ke file PDF — tidak mengherankan karena file PDF seharusnya mewakili dokumen yang dicetak.

Hal ini membuat HTML, dalam kombinasi dengan lembar gaya cetak, sarana yang sangat baik untuk membuat dokumen berkualitas tinggi yang dapat dikirim sebagai lampiran, serta dicetak.

Cetak Berbagai Dokumen

Anda dapat menggunakan lembar gaya cetak untuk membuat dokumen berkualitas, termasuk apa saja mulai dari CV Anda hingga resep atau pengumuman acara. Halaman web biasanya terlihat jelek dan berisi detail yang tidak diinginkan saat dicetak, tetapi sedikit penyesuaian gaya dapat meningkatkan hasil cetak secara dramatis. Menyimpan hasil akhir sebagai PDF adalah cara cepat untuk membuat dokumen yang menarik dan profesional.

Cara Mencetak Halaman Web ke PDF Dengan Microsoft Edge

Pernahkah Anda menemukan artikel menarik yang ingin Anda simpan untuk nanti? Nah, Anda dapat menyimpan sebagai PDF dengan Edge dalam tiga langkah mudah.

Tentang Penulis