Web'de bir A4 kağıdı simüle etmem ve bu sayfayı tarayıcıda gösterildiği gibi yazdırmaya izin vermem gerekiyor (özellikle Chrome). Öğe boyutunu 21cm x 29.7cm olarak ayarladım, ancak yazdırmak (veya baskı önizleme) için gönderdiğimde sayfamı kırpıyor.

Bu Canlı örneğe bakın !

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>

Sanırım bir şey unutuyorum. Ama ne olurdu?

• Chrome : kırpma sayfası, çift sayfa ( çalışmak için ihtiyacım olan şey bu )
• Firefox : mükemmel çalışıyor.
• IE10 : ister inan ister inanma, mükemmel!
• Opera : baskı önizlemesinde çok adamcağız

Bunu biraz daha inceledim ve asıl sorun medya kuralı altında initialsayfaya atama ile ilgili gibi görünüyor . Bu Chrome'da gibi görünüyor üzerinde öğesi sonuçları ölçekleme belirli uzunluk değeri için tanımlanan eğer sayfa içeriğinin (ana unsurlarının herhangi için bu durum giderir içinde altında tanımlanmış boyutundan daha doğrusu herhangi bir değer daha küçük ... amawidthprintwidth: initial.pagewidthwidth: initialwidth: auto@page kural aynı soruna neden olur).

Bu nedenle, yalnızca içerik artık sayfa için çok uzun değil (yaklaşık olarak 2cm), aynı zamanda sayfa dolgusu başlangıçtan biraz daha fazla olacak 2cmve bu şekilde devam edecek (içeriği width: autogenişliğin altına koyuyor ~196mmve ardından tüm içeriği ölçeklendiriyor gibi görünüyor) genişliğine kadar 210mmancak genişliğinden daha küçük herhangi bir içeriğe garip bir şekilde tam olarak aynı ölçeklendirme faktörü uygulanır.210mm ).

Bu sorunu gidermek için, yalnızca printmedya kuralında A4 kağıt genişliğini ve yüksekliğini atar html, bodyveya doğrudan atar .pageve bu durumda initialanahtar kelimeden kaçınabilirsiniz .

DEMO

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

^{Bu, diğer her şeyi orijinal CSS'nizdeki gibi tutar ve sorunu Chrome'da (Windows, OS X ve Ubuntu altındaki Chrome'un farklı sürümlerinde test edilmiştir) giderir.}

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

https://github.com/cognitom/paper-css tüm ihtiyaçlarımı çözüyor gibi görünüyor.

Mutlu baskı için kağıt CSS

Ön uç baskı çözümü - önizlenebilir ve canlı olarak yeniden yüklenebilir!