Home-theater-designers
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 tercetak dapat ditata dengan cara yang hampir sama seperti yang dapat dilakukan di layar, menggunakan Cascading Style Sheets (CSS).
Pemisahan Kekhawatiran
Manfaat utama CSS adalah pemisahan konten dari presentasi. Dalam istilah yang paling sederhana, ini berarti alih-alih markup gaya yang sangat kuno seperti:
Heading
Kami menggunakan markup semantik:
Tidak hanya ini jauh lebih bersih, itu juga berarti presentasi kami terpisah dari konten kami. Peramban merender h1 elemen sebagai teks tebal dan besar secara default, tetapi kita dapat mengubah gaya itu kapan saja dengan lembar gaya:
h1 { font-weight: normal; }
Dengan mengumpulkan deklarasi gaya tersebut dalam file terpisah, dan mereferensikan file tersebut dari dokumen HTML kita, kita dapat memanfaatkan pemisahan dengan lebih baik. Lembar gaya dapat digunakan kembali, dan kita dapat mengubah satu file itu kapan saja untuk memperbarui pemformatan di setiap dokumen yang menggunakannya.
Termasuk Lembar Gaya Cetak
Dengan cara yang mirip dengan menyertakan lembar gaya layar, kita dapat menentukan lembar gaya untuk dicetak. Lembar gaya layar biasanya disertakan seperti:
Namun, atribut tambahan, setengah , memungkinkan penargetan berdasarkan konteks di mana dokumen dirender. Secara default, elemen sebelumnya setara dengan:
Ini berarti stylesheet akan diterapkan untuk semua media tempat dokumen dirender. Namun, atribut media juga dapat mengambil nilai print dan screen:
Dalam contoh ini, print.css stylesheet hanya akan digunakan saat dokumen dicetak. Ini adalah mekanisme yang sangat berguna. Kita dapat mengumpulkan semua gaya umum (mungkin keluarga font atau spasi baris) dalam lembar gaya yang berlaku untuk semua media, dan pemformatan khusus media dalam lembar gaya individu. Sekali lagi, ini adalah penggunaan lain dari pemisahan kekhawatiran.
Beberapa Contoh Deklarasi Gaya
Latar Belakang Bersih
Anda hampir pasti tidak ingin membuang tinta untuk mencetak latar belakang warna-warni atau gambar latar belakang. Mulailah dengan menyetel ulang default apa pun untuk nilai-nilai ini yang mungkin telah disetel di dokumen Anda:
body {
background: white;
color: black;
}
Anda mungkin juga ingin mencegah pencetakan gambar latar belakang—ini harus bersifat dekoratif dan, oleh karena itu, bukan merupakan bagian wajib dari konten Anda:
* {
background-image: none !important;
}
Terkait: Cara Mengatur Gambar Latar Belakang di CSS
perbaiki aplikasi yang buram tidak akan hilang
Mengontrol Margin
Hal lain yang jelas untuk dipertimbangkan mengenai cetak adalah margin halaman. Sementara CSS menyediakan sarana untuk mengatur ukuran margin, Anda harus ingat bahwa browser dan printer Anda juga dapat mempengaruhi pengaturan margin itu sendiri.
Misalnya, dalam dialog cetak Chrome, ada pengaturan margin yang memiliki nilai termasuk tidak ada dan kebiasaan 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. NS @halaman aturan memungkinkan margin untuk ditetapkan, dan harus digunakan sebagai berikut:
@page {
margin: 2cm;
}
CSS juga memiliki kapasitas untuk tata letak cetak yang lebih canggih, seperti memvariasikan margin menurut apakah halaman bernomor ganjil (kanan), genap (kiri), atau halaman sampul.
cara mengubah ikon di windows 10
Sayangnya, ini kurang didukung — terutama opsi halaman sampul — tetapi dapat digunakan secara minimal. Gaya berikut menghasilkan halaman dengan margin bawah sedikit lebih besar dari atas dan margin sedikit lebih besar di tepi halaman luar daripada tulang belakang:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Menyembunyikan Konten yang Tidak Relevan
Tidak semua konten cocok untuk versi cetak dokumen Anda. Jika halaman Anda menyertakan navigasi spanduk, iklan, atau bilah sisi, Anda mungkin ingin mencegah detail tersebut muncul dalam versi cetak, misalnya:
#contents, div.ad { display: none; }
Memperbaiki tautan
Hyperlink jelas tidak relevan dalam materi cetak, jadi Anda mungkin ingin menghapus gaya apa pun yang membedakannya dari teks di sekitarnya:
a { text-decoration: none; color: inherit; }
Namun, Anda mungkin masih ingin pembaca memiliki akses ke URL asli, dan solusi langsungnya adalah memasukkannya secara otomatis setelah teks tertaut:
a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
CSS ini memberikan hasil seperti berikut:
a[href]:setelah secara khusus menargetkan posisi setelah ( :setelah ) setiap elemen tautan ( ke ) yang sebenarnya memiliki URL ( [href] ). NS isi deklarasi di sini memasukkan nilai href atribut di antara tanda kurung. Perhatikan bahwa aturan gaya lain dapat diterapkan untuk mengontrol tampilan konten yang dihasilkan.
Menangani Hentian Halaman
Untuk menghindari page break meninggalkan konten yang terisolasi, atau memecahnya dengan canggung di tengah, gunakan properti page-break: page-break-sebelum , page-break-after dan page-break-inside . Sebagai contoh:
table { page-break-inside: avoid; }
Ini akan membantu menjaga tabel agar tidak mencakup beberapa halaman, asalkan tidak ada yang lebih tinggi dari satu halaman. Demikian pula:
h1, h2 { page-break-before: always; }
Ini berarti bahwa judul seperti itu selalu memulai halaman baru. Ini dapat menyebabkan masalah jika Anda segera mengikuti h1 halaman Anda dengan h2, karena h1 akan berakhir di halaman dengan sendirinya. Untuk menghindarinya, cukup batalkan hentian halaman menggunakan pemilih yang menargetkan instance tertentu, misalnya:
cara mengatur kabel meja
h1 + h2 { page-break-before: avoid; }
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 Rendering :
Kemudian gulir ke bawah ke Tiru jenis media CSS pengaturan. Dropdown memungkinkan Anda untuk beralih antara tampilan cetak dan layar dokumen Anda:
Saat meniru lembar gaya cetak, standar Peramban gaya tersedia untuk memeriksa dan memodifikasi aturan gaya langsung. Ingatlah bahwa meniru hasil cetak pada layar masih belum 100% akurat. Peramban tidak tahu apa-apa tentang ukuran kertas, dan @halaman aturan tidak bisa 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, sebagai gantinya, 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 dari CV Anda hingga resep atau pengumuman acara. Halaman web biasanya terlihat jelek dan berisi detail yang tidak diinginkan saat dicetak, tetapi sejumlah kecil penyesuaian gaya dapat secara dramatis meningkatkan hasil cetak. Menyimpan hasil akhir sebagai PDF adalah cara cepat untuk membuat dokumen yang menarik dan profesional.
Membagikan Membagikan Menciak Surel Cara Mencetak Halaman Web ke PDF Dengan Microsoft EdgePernahkah Anda menemukan artikel menarik yang ingin Anda simpan untuk nanti? Nah, Anda dapat menyimpan sebagai PDF dengan Edge dalam tiga langkah mudah.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- Pencetakan
- CSS
Bobby adalah penggemar teknologi yang bekerja sebagai pengembang perangkat lunak selama hampir dua dekade. Dia bersemangat tentang game, bekerja sebagai Editor Ulasan di Majalah Switch Player, dan mendalami semua aspek penerbitan online & pengembangan web.
More From Bobby JackBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan