Cara membuat halaman mesra pencetak dengan CSS

Dalam artikel ini, kami mengkaji semula seni membuat laman web yang mesra pencetak dengan CSS.

Takeaways Key

1. Kepentingan halaman mesra pencetak: Walaupun usia digital, terdapat keperluan penting untuk laman web yang mesra pencetak. Laman web percetakan adalah penting untuk pelbagai tujuan, seperti mencetak tiket perjalanan, bacaan luar talian, dan memberikan maklumat yang boleh diakses bagi mereka yang sukar menggunakan skrin. Artikel ini menekankan keperluan untuk mengoptimumkan laman web untuk mencetak untuk meningkatkan kebolehcapaian dan pengalaman pengguna.

2. CSS untuk Cetak: CSS memainkan peranan penting dalam membuat halaman web yang mesra pencetak. Artikel ini menggariskan cara menggunakan CSS untuk membuat stylesheet cetak yang memastikan kandungan web dibentangkan dalam format optimum apabila dicetak. Ini termasuk menggunakan pertanyaan media khusus untuk mencetak, menyesuaikan susun atur dan gaya, dan memastikan bahawa halaman bercetak dapat dibaca dan teratur.

3. Petua dan Teknik Praktikal: Artikel ini memberikan banyak nasihat praktikal untuk mewujudkan stylesheet cetak yang berkesan. Cadangan utama termasuk membuang unsur -unsur yang tidak perlu, susun atur linearizing, menggunakan fon dan saiz yang sesuai, menguruskan rehat halaman, dan termasuk kandungan tambahan untuk versi bercetak. Petua ini membantu pemaju web memastikan bahawa laman web mereka boleh dicetak dengan mudah dan cekap, menjimatkan dakwat dan kertas sambil mengekalkan integriti kandungan web.

Mengapa kita memerlukan CSS untuk mencetak?

"Siapa yang mencetak laman web?" Saya dengar awak menangis! Sebilangan besar halaman akan diterbitkan semula di atas kertas. Tetapi pertimbangkan:

Perjalanan Perjalanan atau Tiket Konsert
menghasilkan semula arah laluan atau jadual waktu
menyimpan salinan untuk membaca luar talian
mengakses maklumat di kawasan dengan sambungan yang lemah
menggunakan data dalam keadaan berbahaya atau kotor - sebagai contoh, dapur atau kilang
mengeluarkan kandungan draf untuk anotasi bertulis
mencetak resit web untuk tujuan pembukuan
Menyediakan dokumen kepada mereka yang kurang upaya yang sukar menggunakan skrin
Mencetak halaman untuk rakan sekerja anda yang enggan menggunakan omong kosong t'internet baru ini.

Malangnya, halaman percetakan boleh menjadi pengalaman yang mengecewakan:

teks boleh menjadi terlalu kecil, terlalu besar, atau terlalu pengsan
lajur boleh terlalu sempit, terlalu luas, atau margin halaman limpahan
bahagian boleh dipotong atau hilang sepenuhnya
dakwat dibazirkan pada latar belakang dan imej berwarna yang tidak perlu
URL pautan tidak dapat dilihat
ikon, menu, dan iklan dicetak yang tidak dapat diklik!

Ramai pemaju menganjurkan kebolehcapaian web, namun sedikit yang ingat untuk membuat web bercetak boleh diakses!

Menukar responsif, media berterusan untuk kertas paged dari sebarang saiz dan orientasi boleh mencabar. Walau bagaimanapun, kawalan cetak CSS telah mungkin selama bertahun -tahun, dan lembaran gaya asas dapat diselesaikan dalam beberapa jam. Bahagian berikut menggambarkan pilihan yang disokong dengan baik dan praktikal untuk menjadikan halaman anda mesra pencetak.

Lembaran Gaya Cetak

cetak css boleh sama ada:

1. digunakan sebagai tambahan kepada gaya skrin. Mengambil gaya skrin anda sebagai asas, gaya pencetak mengatasi mungkir tersebut seperti yang diperlukan.
2. digunakan sebagai gaya berasingan. Skrin dan gaya cetak sepenuhnya berasingan; kedua -duanya bermula dari gaya lalai penyemak imbas.

Pilihannya bergantung pada laman web/aplikasi anda. Secara peribadi, saya menggunakan gaya skrin sebagai asas cetak sepanjang masa. Walau bagaimanapun, saya telah menggunakan helaian gaya berasingan untuk aplikasi dengan output yang sangat berbeza-seperti sistem tempahan sesi persidangan yang memaparkan grid jadual di skrin tetapi jadual kronologi di atas kertas.

Lembaran gaya cetak boleh ditambah ke html selepas lembaran gaya standard:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

Gaya Print.css akan digunakan sebagai tambahan kepada gaya skrin apabila halaman dicetak.

Untuk memisahkan skrin dan media cetak, main.css harus menargetkan skrin sahaja:

<span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

Sebagai alternatif, gaya cetak boleh dimasukkan dalam fail CSS sedia ada menggunakan peraturan @media. Contohnya:

Sebarang bilangan peraturan cetak @media boleh ditambah, jadi ini mungkin praktikal untuk menjaga gaya yang berkaitan bersama -sama. Peraturan skrin dan cetak juga boleh dipisahkan jika perlu:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Menguji output pencetak

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Tidak perlu membunuh pokok dan menggunakan dakwat mahal setiap kali anda ingin menguji susun atur cetak anda! Pilihan berikut meniru gaya cetak di skrin.

Pratonton cetak

Pilihan yang paling boleh dipercayai ialah pilihan pratonton cetak dalam penyemak imbas anda. Ini menunjukkan bagaimana rehat halaman akan dikendalikan menggunakan saiz kertas lalai anda.

Sebagai alternatif, anda mungkin dapat menyimpan atau melihat halaman dengan mengeksport ke PDF.

Alat pemaju

devtools ( f12

atau

cmd/ctrl shift i ) boleh mencontohi gaya cetak, walaupun pecahan halaman tidak akan menjadi tidak akan Ditunjukkan. Dalam Chrome, buka alat pemaju dan pilih lebih banyak alat, kemudian rendering dari menu ikon tiga titik di bahagian atas kanan. Tukar media CSS untuk mencetak di bahagian bawah panel itu. Di Firefox, buka alat pemaju dan klik ikon simulasi media cetak togol pada anak tetingkap gaya tab Inspektor:

hack atribut media anda

Menganggap anda menggunakan tag untuk memuat CSS pencetak, anda boleh mengubah atribut media buat sementara waktu untuk skrin:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

Sekali lagi, ini tidak akan mendedahkan rehat halaman. Jangan lupa untuk memulihkan atribut ke media = "cetak" sebaik sahaja anda selesai ujian.

Keluarkan bahagian yang tidak perlu

Sebelum melakukan apa -apa lagi, keluarkan dan runtuh kandungan berlebihan dengan paparan: tiada;. Bahagian yang tidak perlu di atas kertas boleh termasuk menu navigasi, imej wira, tajuk, footer, bentuk, sidebars, widget media sosial, dan blok pengiklanan (biasanya apa -apa dalam iframe):

<span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

Mungkin perlu menggunakan paparan: tidak ada! Penting; Jika fungsi CSS atau JavaScript menunjukkan unsur -unsur mengikut keadaan UI tertentu. Menggunakan! Penting tidak biasanya disyorkan, tetapi kami boleh membenarkan penggunaannya dalam set asas gaya pencetak yang menimpa lalai skrin.

Linearize susun atur

Ia menyakitkan saya untuk mengatakan ini, tetapi Flexbox dan grid jarang bermain dengan baik dengan susun atur pencetak di mana -mana penyemak imbas. Jika anda menghadapi masalah, pertimbangkan untuk menggunakan paparan: blok; atau serupa dengan kotak susun atur dan menyesuaikan dimensi yang diperlukan. Sebagai contoh, tetapkan lebar: 100%; untuk merangkumi lebar halaman penuh.

Styling Pencetak

Styling mesra pencetak kini boleh digunakan. Cadangan:

Pastikan anda menggunakan teks gelap pada latar belakang putih
Pertimbangkan menggunakan font serif, yang mungkin lebih mudah dibaca
Laraskan saiz teks hingga 12pt atau lebih tinggi
Ubah suai paddings dan margin di mana perlu. Standard CM, MM, atau dalam unit mungkin lebih praktikal.

Cadangan lanjut termasuk ...

mengamalkan lajur CSS

standard A4 dan kertas surat AS boleh menghasilkan baris teks yang lebih panjang dan kurang dibaca. Pertimbangkan menggunakan lajur CSS dalam susun atur cetak. Contohnya:

Dalam contoh ini, lajur akan dibuat apabila terdapat sekurang -kurangnya 37em ruang mendatar. Tidak perlu menetapkan pertanyaan media; Lajur tambahan akan ditambah pada kertas yang lebih luas.

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Gunakan sempadan bukannya warna latar belakang

templat anda mungkin mempunyai bahagian atau kotak panggilan yang dilambangkan oleh skema warna yang lebih gelap atau songsang:

simpan dakwat dengan mewakili unsur -unsur dengan sempadan:

mengeluarkan atau menyebarkan imej

Pengguna tidak mahu mencetak imej dan latar belakang hiasan dan tidak penting. Anda boleh mempertimbangkan lalai di mana semua imej tersembunyi kecuali mereka mempunyai kelas cetak:

Imej -imej bercetak harus menggunakan warna gelap pada latar belakang cahaya. Ia mungkin untuk menukar warna SVG yang dibebankan oleh HTML dalam CSS, tetapi akan ada situasi di mana anda mempunyai bitmaps yang lebih gelap:

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Penapis CSS boleh digunakan untuk membalikkan dan menyesuaikan warna dalam lembaran gaya cetak. Contohnya:

Hasilnya:

Tambah Kandungan Tambahan

Media bercetak sering memerlukan maklumat tambahan yang tidak diperlukan pada skrin. Harta kandungan CSS boleh digunakan untuk menambah teks kepada :: sebelum dan :: Selepas unsur-unsur pseudo. Sebagai contoh, paparkan URL pautan dalam kurungan selepas teks:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

atau anda boleh menambah mesej cetak sahaja:

<span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

Untuk situasi yang lebih kompleks, pertimbangkan untuk menggunakan kelas seperti cetak pada unsur -unsur yang hanya boleh dilihat apabila dicetak,. Contohnya:

CSS:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Nota: Kebanyakan penyemak imbas memaparkan URL dan tarikh/masa semasa pada header dan/atau footer halaman bercetak, jadi jarang ada keperluan untuk menghasilkan maklumat ini dalam kod.

Page Breaks

Ciri-ciri CSS3 Break-sebelum dan Break-selepas membolehkan anda mengawal bagaimana halaman, lajur, atau rantau pecah berkelakuan sebelum dan selepas elemen. Sokongan sangat baik, tetapi penyemak imbas yang lebih tua boleh menggunakan halaman yang sama-sebelum-sebelum dan membuat halaman-sifat.

nilai-nilai rehat sebelum dan berehat boleh digunakan:

auto: lalai - rehat dibenarkan tetapi tidak dipaksa

• Elakkan: Elakkan rehat pada halaman, lajur atau rantau
• mengelakkan halaman: Elakkan rehat halaman
• Page: memaksa rehat halaman
• Sentiasa: alias halaman
• kiri: pecahan halaman daya jadi seterusnya adalah halaman kiri
• Hak: Halaman daya pecah jadi seterusnya adalah halaman yang tepat
Contoh: memaksa rehat halaman segera sebelum mana -mana

tajuk:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span></span></span>

NOTA: Berhati-hati dengan menggunakan pecahan halaman. Sebaik -baiknya, output pencetak harus menggunakan beberapa halaman yang mungkin.

Properti Break-Inside (dan Lama-Page-Break-Inside) Menentukan sama ada rehat halaman dibenarkan di dalam elemen. Nilai yang biasa disokong:

auto: lalai - rehat dibenarkan tetapi tidak dipaksa

• Elakkan: Elakkan rehat dalaman di mana mungkin
• mengelakkan halaman: Elakkan cuti halaman dalaman di mana mungkin
Ini boleh lebih baik untuk menentukan rehat halaman, kerana anda boleh menggunakan kertas kecil yang mungkin sambil mengelakkan rehat halaman dalam data dikumpulkan seperti jadual atau imej:

Harta janda menentukan bilangan minimum baris dalam blok yang mesti ditunjukkan di bahagian atas halaman. Bayangkan satu blok dengan lima baris teks. Penyemak imbas ingin membuat rehat halaman selepas garis empat sehingga baris terakhir muncul di bahagian atas halaman seterusnya. Menetapkan janda: 3; pecah pada atau sebelum garis dua sehingga sekurang -kurangnya tiga baris dibawa ke halaman seterusnya.

<span>/* print.css */
</span><span>header<span>, footer, aside, nav, form, iframe, .menu, .hero, .adslot</span> {
</span>  <span>display: none;
</span><span>}
</span>

harta yatim sama dengan janda kecuali ia mengawal bilangan minimum baris untuk dipaparkan di bahagian bawah halaman.

Kawalan harta break kotak-kotak sempadan elemen di seluruh halaman. Apabila elemen dengan sempadan mempunyai rehat halaman dalaman:

• Slice: The Default, berpecah susun atur. Batasan atas ditunjukkan pada halaman pertama dan sempadan bawah ditunjukkan pada halaman kedua.
• klon: mereplikasi margin, padding, dan sempadan. Semua empat sempadan ditunjukkan di kedua -dua halaman.

Akhirnya, media paged CSS (@page) mempunyai sokongan penyemak imbas terhad tetapi menyediakan cara untuk menargetkan halaman tertentu supaya margin atau rehat alternatif dapat ditakrifkan:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

Properties Break Page CSS boleh diletakkan di dalam skrin atau gaya cetak anda kerana mereka hanya mempengaruhi percetakan, tetapi saya cadangkan menggunakannya dalam CSS cetak untuk kejelasan.

Ketahui bahawa kawalan Break Page adalah sedikit lebih daripada cadangan kepada penyemak imbas. Tidak ada jaminan rehat akan dipaksa atau dielakkan kerana susun atur adalah terhad kepada batasan kertas.

Pencetakan sakit

Kawalan ke atas percetakan media web akan sentiasa terhad, dan hasilnya boleh berbeza -beza di seluruh pelayar. Yang berkata:

• helaian gaya mesra pencetak boleh dipasang retro ke mana-mana laman web
• Kebanyakan Styling Pencetak akan berfungsi dalam majoriti pelayar
• Gaya cetak tidak akan menjejaskan atau memecahkan fungsi sedia ada
• Kos pembangunan adalah minimum.

Menambah beberapa pecahan halaman dan mengeluarkan bahagian yang tidak perlu akan menggembirakan pengguna dan meningkatkan tapak anda di atas pesaing. tambahkan ke senarai tugasan anda!

Untuk pengetahuan CSS yang lebih maju, baca buku kami CSS Master, edisi ke -3 .

Soalan Lazim Mengenai Membuat Halaman Mesra-Pencetak dengan CSS

Mewujudkan lembaran stylesheet cetak CSS adalah penting untuk mengawal penampilan laman web apabila mereka dicetak. Mari berakhir dengan menutup beberapa soalan yang sering ditanya mengenai cara membuat halaman mesra pencetak dengan CSS.

Apakah CSS untuk dicetak?

Adalah mungkin untuk mencetak laman web secara langsung dari penyemak imbas anda, tetapi laman web bercetak sering tidak akan kelihatan seperti halaman yang anda lihat di skrin. Halaman web digayakan dengan CSS, dan CSS juga boleh digunakan untuk menyediakan gaya untuk halaman bercetak. Walau bagaimanapun, gaya laman web biasanya tidak diterjemahkan dengan baik untuk dicetak, jadi penting untuk menulis gaya CSS khusus untuk halaman bercetak. CSS untuk Cetak adalah satu set gaya yang direka khusus untuk membantu pencetak memformat susun atur halaman bercetak.

bagaimana saya boleh menggunakan css untuk cetak?

laman web CSS secara automatik akan digunakan untuk versi bercetak halaman web, tetapi selalunya dengan hasil yang tidak dijangka atau tidak diingini. CSS untuk cetakan mengiktiraf kekangan unik halaman bercetak, berbeza dengan persekitaran penyemak imbas yang lebih fleksibel. Menetapkan gaya untuk cetak melibatkan pemikiran tentang bagaimana unsur -unsur paling baik akan diletakkan di halaman bercetak. Yang mungkin termasuk bersembunyi unsur -unsur yang tidak berkaitan dengan dicetak, seperti menu dan sejenisnya, pautan gaya dengan cara yang menjadikan URL dapat dilihat pada halaman yang dicetak, dan mengeluarkan imej latar belakang dan warna fon yang mungkin tidak relevan dengan dicetak versi laman web.

bagaimana saya menyediakan lembaran gaya cetak css?

Terdapat dua cara asas untuk melayani gaya cetak dalam CSS: melalui lembaran gaya berasingan, atau melalui pertanyaan media. Gaya cetak CSS boleh disimpan dalam lembaran gaya berasingan yang dikaitkan dengan laman web di bahagian

dokumen:



Gaya cetak css boleh diletakkan di dalam lembaran gaya, bersama -sama dengan gaya untuk media lain, melalui pertanyaan media:

@media print {
/ * Cetak gaya di sini * /
}

Apakah beberapa kes penggunaan biasa untuk stylesheet cetak?

Kes penggunaan biasa untuk cetakan gaya cetak termasuk:
- menyesuaikan saiz fon dan gaya untuk dibaca semula di atas kertas. - Memastikan bahawa imej dan warna latar belakang tidak dicetak secara lalai.
- Menentukan Page Break untuk mengawal bagaimana kandungan dibahagikan kepada halaman.

bagaimana saya boleh menyembunyikan elemen tertentu dalam versi cetak?

anda boleh menyembunyikan unsur-unsur tertentu dalam versi cetak menggunakan CSS dengan menetapkan harta paparan kepada tiada. > paparan: tiada; }

}

bagaimana saya menentukan pecahan halaman dalam lembaran gaya cetak?

Anda boleh menentukan pecahan halaman menggunakan halaman-Break-sebelum dan Page-Break-selepas CSS Properties. Contohnya:

@media print { page-break-before: Always;
}
}

Bolehkah saya menukar margin halaman untuk dokumen bercetak?

Ya, anda boleh menukar margin halaman untuk dokumen bercetak menggunakan peraturan @Page dalam lembaran cetak anda. Contohnya:

@page {
margin: 1cm;
}

bagaimana saya dapat memastikan bahawa imej dan warna latar belakang tidak dicetak?

Anda boleh menghalang imej dan warna latar belakang dari percetakan dengan menggunakan sifat CSS seperti imej latar belakang dan warna latar belakang dengan nilai tiada dalam lembaran cetak anda. Contohnya:

@media print { img {
paparan: none;
}

body {

latar belakang warna: putih;

}

}

Adakah mungkin untuk menukar gaya fon dan saiz untuk percetakan?

Ya, anda boleh menukar gaya fon dan saiz untuk mencetak dengan menentukan gaya yang berbeza dalam lembaran cetak anda. Contohnya:

@media print { body {
font-size: 12pt;
font-family: arial, sans-serif;
}
}

bagaimana saya menguji lembaran gaya cetak saya sebelum mencetak?

Anda boleh menguji lembaran gaya cetak anda dengan menggunakan ciri pratonton cetakan pelayar web anda. Pelayar yang paling moden membolehkan anda melihat bagaimana halaman akan kelihatan apabila dicetak tanpa benar -benar mencetaknya.

Atas ialah kandungan terperinci Cara membuat halaman mesra pencetak dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!