HTML sayfası yazdırılırken kenar boşluğu

Baskı için ayrı bir stil sayfası kullanıyorum. Baskı kenar boşluğunu ayarlayan stil sayfasında sağ ve sol kenar boşluğunu ayarlamak mümkün müdür (kağıt üzerindeki kenar boşluğu).

Teşekkürler.

Yazdırma için belirttiğinizde cmveya mmbirimi olarak kullanmalısınız . Piksellerin kullanılması tarayıcının onu ekranda göründüğü gibi bir şeye çevirmesine neden olur. cmVeya kullanılması mmkağıt üzerinde tutarlı bir boyut sağlayacaktır.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Yazı tipi boyutları ptiçin yazdırma ortamını kullanın .

Not css stil vücut üzerinde marjın olacağı değil tarayıcı tarafından kontrol edilen yazdırılabilir yazıcı bölgesi veya marjını tanımlar yazıcı sürücüsünde marjı ayarlamak (bazı tarayıcılarda baskı önizleme ayarlanabilir olabilir) ... It yalnızca yazdırılabilir alanın içindeki belgede kenar boşluğu belirler.

Ayrıca IE7 ++ otomatik en uygun şekilde boyutunu ayarlar ve kullandığınız bile yanlış olduğu her şeyi neden olduğunu bilmelidir cmya mm. Bu davranışı geçersiz kılmak için kullanıcının 'Baskı önizleme'yi seçmesi ve ardından baskı boyutunu 100%(varsayılan Shrink To Fit) olarak ayarlaması gerekir.

Basılı kenar boşluklarında tam kontrol için daha iyi bir seçenek @page, normalde tarayıcı tarafından kontrol edilen html gövde elemanının dışındaki kağıt üzerindeki kenar boşluğunu etkileyecek olan kağıt kenar boşluğunu ayarlamak için yönergeyi kullanmaktır . Bkz. Http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Bu, şu anda Safari dışındaki tüm önemli tarayıcılarda çalışmaktadır.
Internet explorer'da kenar boşluğu aslında bu yazdırma ayarlarında bu değere ayarlanır ve Önizleme yaparsanız bunu varsayılan olarak alırsınız, ancak kullanıcı önizlemede değiştirebilir.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

İlgili cevap: Tarayıcı yazdırma seçenekleri (üstbilgiler, altbilgiler, kenar boşlukları) sayfadan devre dışı bırakılsın mı?

Öncelikle, diğer tarayıcılar farklı düzenler oluşturduğundan, tüm kullanıcılarımı yazdırırken Chrome'u kullanmaya zorlamaya çalışıyorum.

Dan bir cevap bu soruya tavsiye eder:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Ancak, yazdırılacak tüm sayfalarım için bu CSS'yi kullandım:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}

Özel durum: Uzun Masalar

Ben birkaç sayfa üzerinden bir tablo yazdırmak için gereken zaman, margin:0ile @pagekanama kenarlarına önde girdi:

Bu cevap sayesinde bunu çözebilirim :

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Ayrıca aşağıdakiler için üst-alt kenar boşluklarını ayarlama @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Sonuç:

Kısa ve tüm tarayıcılarla çalışan bir çözümü tercih ederim. Şimdilik, yukarıdaki bilgilerin benzer sorunları olan bazı geliştiricilere yardımcı olabileceğini umuyorum.

Güncellenmiş, Basit Çözüm

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Eski Çözüm

Her sayfayla bölüm oluşturun ve kenar boşluklarını, yüksekliği ve genişliği ayarlamak için aşağıdaki kodu kullanın.

A4 boyutunda yazdırıyorsanız.

Sonra kullanıcı

Boyut: 8.27in ve 11.69 inç

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

ardından içindeki tüm içeriğinizle bir div oluşturun.

<div class="Section1"> 
    type your content here... 
</div>

Şahsen daha farklı bir ölçü birimi kullanmanızı öneririm px. Piksellerin baskı açısından çok alakalı olduğunu düşünmüyorum; ideal olarak şunu kullanırsınız:

• nokta (pt)
• santimetre (cm)

Emin başkaları da vardır ediyorum ve baskı-css yaklaşık bir mükemmel bir makale burada bulabilirsiniz: Baskıya gidenler tarafından, Eric Meyer .

Daha hassas olduğu için cm veya mm'ye karşı pt'yi de öneririm. Ayrıca, @page'in Chrome'da çalışmasını sağlayamıyorum (sürüm 30.0.1599.69 m) Büyük veya küçük kenar boşlukları için koyduğum her şeyi yok sayar. Ancak, belgede gövde kenar boşluklarıyla çalışmasını sağlayabilirsiniz, garip.

Hedef kağıt boyutunu biliyorsanız, içeriğinizi o boyutta bir DIV'ye yerleştirebilir ve yazdırma kenar boşluğunu simüle etmek için bu DIV'ye bir kenar boşluğu ekleyebilirsiniz. Ne yazık ki, sadece yazdırma iletişim kutusunu göstermenin dışında, yazdırma işlevselliği üzerinde ekstra kontrolünüz olduğuna inanmıyorum.