CSS untuk mengatur ukuran kertas A4

233

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
David Rodrigues
sumber
11
Terima kasih untuk templatnya, sangat mengagumkan.
vektor
1
Jawaban yang benar ada di sini: stackoverflow.com/a/34018790/293856
unom
1
Kemungkinan penipuan: stackoverflow.com/questions/3341485/…
Mark Boulder
laporan bug tentang ini
Eugen Konkov

Jawaban:

241

Saya melihat ini sedikit lebih dan masalah sebenarnya tampaknya dengan menetapkan initialke halaman di widthbawah printaturan media. Sepertinya di Chrome width: initialpada .pageelemen menghasilkan penskalaan konten halaman jika tidak ada nilai panjang spesifik yang ditentukan widthpada elemen induk mana pun ( width: initialdalam hal ini memutuskan untuk width: auto... tetapi sebenarnya nilai apa pun lebih kecil dari ukuran yang ditentukan dalam @pageaturan) menyebabkan masalah yang sama).

Jadi tidak hanya konten sekarang terlalu panjang untuk halaman (sekitar 2cm), tetapi juga padding halaman akan sedikit lebih dari yang awal 2cmdan seterusnya (tampaknya membuat konten di bawah width: autodengan lebar ~196mmdan kemudian skala seluruh konten hingga lebar 210mm~ tetapi anehnya faktor penskalaan yang sama persis diterapkan pada konten dengan lebar lebih kecil dari 210mm).

Untuk memperbaiki masalah ini, Anda cukup dengan printaturan media menetapkan lebar dan tinggi kertas A4 ke html, bodyatau langsung ke .pagedan dalam hal ini hindari initialkata kunci.

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

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).

Martin Turjak
sumber
Bagaimana Anda sampai pada elemen 256mm(dan dengan demikian 237mm, pada akhirnya) .subpage?
gak
@MarcoW. Saya percaya OP 256mmsedikit dibulatkan ke bawah ketinggian kertas A4 tanpa halaman padding: 297mm - 2*20mm... mungkin 257mmakan menjadi sedikit lebih jelas ;-) Dan dalam contoh saya sebelumnya 237mmmenyumbang konten ~2cm"terlalu panjang" ... tetapi hanya dipecahkan secara dangkal masalah. Lihat jawaban saya yang diperbarui di atas untuk solusi yang sebenarnya.
Martin Turjak
10
Hai @MartinTurjak, saya mengubah biola Anda ke versi Surat AS, kalau-kalau ada yang tertarik. jsfiddle.net/2wk6Q/2957 Cheers!
Ben
Saya memiliki 4 bidang dalam mencetak halaman bagaimana mempartisi ukuran yang sama dari semua bidang .. berapa ukuran halaman cetak dalam pxl
Vikram
2
@ Rad: tidak bekerja untuk saya. Masih membuat halaman kosong di antara setiap halaman.
Sebastian Farham
37

CSS

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

DEMO

MaxEcho
sumber
2
catatan: <page>bukan nama elemen HTML khusus yang valid
Martin Schneider
2
Tampaknya bekerja. Tetapi box-shadow: 0;tidak berhasil (setidaknya di Chrome), itu seharusnya box-shadow: none;. Deklarasi dua margin juga dapat digabungkan menjadi margin: 0 auto 0.5cm;.
mts knn
28

https://github.com/cognitom/paper-css sepertinya bisa menyelesaikan semua kebutuhan saya.

Kertas CSS untuk pencetakan yang bahagia

Solusi pencetakan front-end - pratinjau dan live-reloadable!

Mark Boulder
sumber