Home / Programming / Menggunakan CSS untuk Memformat Dokumen untuk Pencetakan

Menggunakan CSS untuk Memformat Dokumen untuk Pencetakan

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:

<font size="7"><b>Heading</b></font>

Kami menggunakan markup semantik:

<h1>Heading</h1>

Tidak hanya jauh lebih bersih, ini juga berarti presentasi kita terpisah dari konten kita. Merender browser h1 elemen sebagai teks besar dan 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 mirip untuk memasukkan lembar gaya layar, kita dapat menentukan lembar gaya untuk dicetak. Lembar gaya layar biasanya disertakan seperti ini:

<link href="https://www.makeuseof.com/format-web-page-for-printer/base.css" rel="stylesheet" />

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

<link href="https://www.makeuseof.com/format-web-page-for-printer/base.css" rel="stylesheet" media="all" />

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

<link href="https://www.makeuseof.com/format-web-page-for-printer/print.css" rel="stylesheet" media="print" />

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 tinta untuk mencetak latar belakang berwarna-warni atau gambar latar belakang. Mulailah dengan mengatur ulang semua default untuk nilai-nilai ini yang mungkin telah ditetapkan di dokumen Anda:

body {
background: white;
color: black;
}

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

* {
background-image: none !important;
}

Terkait: Cara Mengatur Gambar Latar Belakang di CSS

Gambar latar 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 margin untuk diatur, 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-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 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 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 yang ditautkan:

a[href]:after {
content: " (" attr(href) ")";
font-size: 90%;
color: #333;
}

CSS ini memberikan hasil seperti berikut:

Sebuah[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:

table { page-break-inside: avoid; }

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: always; }

Artinya, tajuk seperti itu selalu memulai halaman baru. Ini mungkin menimbulkan 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: 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:

Tangkapan layar yang menampilkan menu utama Google Chrome dengan Alat Pengembang dipilih

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

Tangkapan layar yang menampilkan menu utama Google Chrome dengan submenu Alat Pengembang terbuka

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

Tangkapan layar yang menampilkan Alat Pengembang Google Chrome dengan jenis media Emulasi CSS aktif

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 dikirim ke file PDF — tidak mengherankan karena file PDF seharusnya mewakili dokumen yang dicetak.

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.

Tangkapan layar yang menampilkan pratinjau cetak Google Chrome

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.

logo pornhub
Pornhub Telah Menghapus Semua Video Unggahan Pengguna yang Belum Diverifikasi

Jutaan video telah dihapus dari Pornhub, mengikuti perubahan yang melarang pengguna yang tidak diverifikasi untuk mengunggah video.


Tentang Penulis

.

About nomund

Check Also

Cara Membuat Repositori Pertama Anda di Github

Situs Github yang populer bersama dengan alat git menjadikannya sumber yang sangat baik untuk tidak …