Cara menata situs web Anda untuk dicetak dengan CSS

Diterbitkan: 2015-08-28

Apa hubungannya cetak dengan web?

Sebagian besar dari kita hidup online, mendapatkan semua informasi kita dari web. Kami terhubung sepanjang hari, setiap hari, dari banyak perangkat. Anda mungkin pernah mendengar bahwa cetakan sudah mati padahal sebenarnya itu tidak benar! Kami mungkin tidak mencetak sesering dulu, tetapi ada situasi di mana melihat konten di perangkat bukanlah pengganti untuk melihat salinan cetak. Apakah Anda memiliki konten petunjuk yang berharga, kupon yang dapat ditukarkan, petunjuk arah, contoh portofolio, atau apa pun yang ingin dilihat pengguna di media cetak? Jika demikian, menyiapkan aturan cetak khusus di situs web Anda pasti akan membantu membentuk pengalaman bagi pengguna Anda.

pencetak kantor

Cara mendesain untuk dicetak

Semua keajaiban terkandung dalam CSS dengan mendefinisikan gaya khusus cetak. Anda mungkin merasa terbantu untuk membuat lembar gaya print.css terpisah sehingga terpisah dari semua gaya Anda yang lain. Ingatlah bahwa tidak semua situs memiliki lembar gaya cetak; ini adalah fitur tambahan dan langkah dalam proses pengembangan. Jika tidak ada gaya cetak yang ditentukan, gaya default digunakan untuk pencetakan. Kami akan mendefinisikan gaya untuk membuat segalanya lebih efisien untuk dicetak, yang akan mengesampingkan semua default.

Ingat: Anda tidak boleh membuat perubahan di situs langsung. Aplikasi pengembangan lokal gratis kami, Lokal, akan membantu Anda menyederhanakan alur kerja dan bereksperimen dengan aman dengan situs Anda. Cobalah hari ini!

Konvensi penamaan dan gaya spesifik akan unik untuk lembar gaya proyek Anda sendiri, tetapi konsep ini akan berlaku. Setelah dasar-dasar ditambahkan, buka lembar gaya default situs web Anda dan cari situasi unik apa pun yang memerlukan gaya cetak untuk memastikan pengalaman pencetakan terbaik.

Pertimbangan warna dan tata letak

Kebanyakan orang lebih suka mencetak dalam warna hitam putih karena biaya tinta berwarna. Juga, ada kontras yang lebih tinggi ketika teks berwarna hitam dan dicetak di atas kertas putih. Anda mungkin akrab dengan kueri media, karena kueri ini sangat penting dalam desain web modern dan responsif. Kueri media juga diperlukan untuk membuat gaya cetak.

Inilah yang akan membuat teks di badan menjadi hitam, dan menghilangkan warna latar belakang untuk pencetakan terbaik:

@media print {
body {
color: #000;
background: #fff;
}
}




Kemungkinan, teks akan dicetak dalam Times New Roman. Tidak ada yang salah dengan itu, tetapi bagaimana jika Anda ingin menentukan font yang berbeda? Sama seperti yang Anda lakukan dalam gaya default Anda, ini juga dapat dilakukan dalam bentuk cetak. Sementara kita melakukannya, jangan lupakan ketinggian garis.


body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




Menyembunyikan elemen yang tidak perlu


Anda mungkin telah dikondisikan untuk menjaga display: none yang minimum, tetapi ini sepenuhnya oke untuk gaya cetak Anda. Dengan menyembunyikan beberapa elemen, Anda memberi pengguna Anda cara yang lebih baik untuk mencetak dan menyimpan apa pun yang tidak perlu dari salinan cetak. Tujuannya adalah untuk memungkinkan mereka mencetak konten yang paling penting secara efektif, bukan halaman web yang sebenarnya.
		




Ada elemen halaman yang tidak diperlukan, seperti navigasi, footer, sidebar, dan gambar latar belakang, jadi di sinilah display: none yang berguna.


@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




Artikel sering dicetak, jadi bagus untuk memulai setiap artikel di halaman terpisah. Jauh lebih mudah bagi pengguna untuk mengatur cetakan mereka jika informasi utama dikelompokkan bersama dan tidak tersebar di beberapa halaman.


Dengan menambahkan ini ke lembar gaya cetak Anda, artikel akan selalu dimulai pada halaman baru:
		




article {
page-break-before: always;
}




Menyimpan daftar yang tidak berurutan pada halaman yang sama juga merupakan ide yang bagus:


ul {
page-break-inside: avoid;
}




Mari kita melangkah lebih jauh dan melakukan hal yang sama untuk heading, gambar, blockquotes, tabel, dan elemen daftar lainnya:


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

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

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




Di sinilah jarak benar-benar dapat disesuaikan untuk cetakan. Anda tidak terlalu sering melihat sentimeter dalam desain web, tetapi ini berfungsi dengan baik untuk tujuan menentukan batas pada halaman. Aturan @page adalah bagaimana kita akan menargetkan spasi. Contoh ini akan memungkinkan 2cm di sekitar semua perbatasan. Pengukuran ini dapat disesuaikan untuk memungkinkan lebih banyak atau lebih sedikit ruang. Misalnya, pengguna Anda mungkin ingin membuat catatan dan memberikan margin yang lebih besar akan sangat membantu.
		




@page {
margin: 2cm;
}




Jika halaman dimaksudkan untuk dicetak dan dimasukkan ke dalam binder, ingatlah bahwa ada opsi untuk menyesuaikan margin untuk setiap halaman lainnya. Halaman kiri untuk halaman 1, 3, 5… dan halaman kanan untuk halaman 2, 4, 6…


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




Kustomisasi halaman pertama berguna dalam kasus tertentu. Dengan menggunakan pseudo-class :first page, gaya halaman pertama yang dicetak dapat ditentukan:


@page :first {
margin: 1cm 2cm;
}




gaya-cetak-02


Apakah pencetakan membuat Anda stres? Berikut adalah beberapa tip untuk mencetak proyek Anda seperti seorang profesional.
		




Ide gambar dan teks intro


Ini mungkin atau mungkin tidak berlaku untuk situs Anda, tetapi tetap baik untuk dicatat.


Untuk mencegah gambar terpotong dan keluar dari tepi halaman yang dicetak, menambahkan deklarasi lebar maksimum akan mencegah hal ini.


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




Pesan selamat datang yang bagus adalah tambahan yang bagus. Konten cetak akan ada untuk sementara waktu, jadi selalu baik untuk menyertakan pesan ramah atau pengingat.


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




Sekarang kita telah membahas beberapa dasar pertimbangan pencetakan, mudah untuk memasukkan ide-ide ini ke dalam lembar gaya cetak Anda. Meskipun cetak bukanlah apa yang pada akhirnya kami pikirkan ketika kami menggunakan web, ini adalah cara yang bagus untuk memberikan pengalaman hebat yang sama kepada pengguna Anda tidak peduli bagaimana mereka mengakses konten.