Saya perlu mensimulasikan kertas A4 di web dan memungkinkan untuk mencetak halaman ini seperti yang ditampilkan di browser (Chrome, khususnya). Saya mengatur ukuran elemen ke 21cm x 29.7cm, tetapi ketika saya mengirim untuk mencetak (atau mencetak pratinjau) itu klip halaman saya.
Lihat contoh langsung ini !
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
}
@page {
size: A4;
margin: 0;
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<div class="book">
<div class="page">
<div class="subpage">Page 1/2</div>
</div>
<div class="page">
<div class="subpage">Page 2/2</div>
</div>
</div>
Saya pikir saya lupa sesuatu. Tetapi apakah itu?
- Chrome : halaman kliping, halaman ganda ( hanya itu yang saya butuhkan untuk bekerja )
- Firefox : berfungsi dengan sempurna.
- IE10 : percaya atau tidak, ini sempurna!
- Opera : sangat buggy pada pratinjau cetak
css
printing
print-preview
David Rodrigues
sumber
sumber
Jawaban:
Saya melihat ini sedikit lebih dan masalah sebenarnya tampaknya dengan menetapkan
initial
ke halaman diwidth
bawahprint
aturan media. Sepertinya di Chromewidth: initial
pada.page
elemen menghasilkan penskalaan konten halaman jika tidak ada nilai panjang spesifik yang ditentukanwidth
pada elemen induk mana pun (width: initial
dalam hal ini memutuskan untukwidth: auto
... tetapi sebenarnya nilai apa pun lebih kecil dari ukuran yang ditentukan dalam@page
aturan) menyebabkan masalah yang sama).Jadi tidak hanya konten sekarang terlalu panjang untuk halaman (sekitar
2cm
), tetapi juga padding halaman akan sedikit lebih dari yang awal2cm
dan seterusnya (tampaknya membuat konten di bawahwidth: auto
dengan lebar~196mm
dan kemudian skala seluruh konten hingga lebar210mm
~ tetapi anehnya faktor penskalaan yang sama persis diterapkan pada konten dengan lebar lebih kecil dari210mm
).Untuk memperbaiki masalah ini, Anda cukup dengan
print
aturan media menetapkan lebar dan tinggi kertas A4 kehtml, body
atau langsung ke.page
dan dalam hal ini hindariinitial
kata kunci.DEMO
Hal ini tampaknya menjaga semuanya tetap seperti di CSS asli Anda dan memperbaiki masalah di Chrome (diuji di berbagai versi Chrome di Windows, OS X dan Ubuntu).
sumber
256mm
(dan dengan demikian237mm
, pada akhirnya).subpage
?256mm
sedikit dibulatkan ke bawah ketinggian kertas A4 tanpa halaman padding:297mm - 2*20mm
... mungkin257mm
akan menjadi sedikit lebih jelas ;-) Dan dalam contoh saya sebelumnya237mm
menyumbang konten~2cm
"terlalu panjang" ... tetapi hanya dipecahkan secara dangkal masalah. Lihat jawaban saya yang diperbarui di atas untuk solusi yang sebenarnya.CSS
HTML
DEMO
sumber
<page>
bukan nama elemen HTML khusus yang validbox-shadow: 0;
tidak berhasil (setidaknya di Chrome), itu seharusnyabox-shadow: none;
. Deklarasi dua margin juga dapat digabungkan menjadimargin: 0 auto 0.5cm;
.https://github.com/cognitom/paper-css sepertinya bisa menyelesaikan semua kebutuhan saya.
Kertas CSS untuk pencetakan yang bahagia
sumber