CSS设置A4纸张尺寸(CSS to set A4 paper size)

10311 IT屋

I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.

See this Live example!

HTML

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

CSS

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;
    }
}

I think I'm forgetting something. But what would it be?

  • Chrome: clipping page, double page (it's just what I need it to work)
  • Firefox: it works perfectly.
  • IE10: believe it or not, it's perfect!
  • Opera: very buggy on print preview
解决方案

I looked into this a bit more and the actual problem seems to be with assigning initial to page width under the print media rule. It seems like in Chrome width: initial on the .page element results in scaling of the page content if no specific length value is defined for width on any of the parent elements (width: initial in this case resolves to width: auto ... but actually any value smaller than the size defined under the @page rule causes the same issue).

So not only the content is now too long for the page (by about 2cm), but also the page padding will be slightly more than the initial 2cm and so on (it seems to render the contents under width: auto to the width of ~196mm and then scale the whole content up to the width of 210mm ~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm).

To fix this problem you can simply in the print media rule assign the A4 paper width and hight to html, body or directly to .page and in this case avoid the initial keyword.

DEMO

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

This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).

我需要在网络上模拟A4纸,并允许打印此页面,因为它在浏览器上显示(特别是Chrome)。我将元素大小设置为21cm x 29.7cm,但是当我发送到打印(或打印预览)时,它会剪切我的页面。



请参阅 活动示例



HTML



 < div class ="book"> 
< div class ="page">
< div class ="subpage">第1页/ 2< / div>
< / div>
< div class ="page">
< div class ="subpage">第2页/ 2< / div>
< / div>
< / div>


CSS



< pre> 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;
}
}


我想我忘了什么。

:在打印预览时非常麻烦

解决方案

我进一步研究这一点,实际的问题似乎是分配初始在打印媒体规则下的 width 看起来像 .page 元素中的Chrome width:initial 会导致 ( width:initial )为 width 定义特定长度值时, code>在这种情况下解析为 width:auto ...但实际上任何小于 @page < code> 。 (大约 2cm ),但是页面填充将比初始 2cm 等(似乎将 width:auto 下的内容呈现为 〜196mm ,然后将整个内容缩放到 210mm 对于任何宽度小于 210mm 的内容都应用完全相同的缩放因子。



< p>要解决这个问题,你可以简单地在打印媒体规则分配A4纸宽度和hight到 html,正文或直接到 .page ,在这种情况下避免初始关键字。



DEMO



  @page {
size:A4;
margin:0;
}
@media print {
html,正文{
width:210mm;
height:297mm;
}
/ * ...其余规则... * /
}


这似乎保留了原始CSS中的一切,并解决Chrome中的问题(在Windows,OS X和Ubuntu下在不同版本的Chrome中测试)。


本文地址:IT屋 » CSS设置A4纸张尺寸