CSS to set A4 paper size

Question

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    x000D   x000D  body   x000D    margin  0  x000D    padding  0  x000D    background-color   FAFAFA  x000D    font  12pt  Tahoma   x000D    x000D   x000D      x000D    box-sizing  border-box  x000D    -moz-box-sizing  border-box  x000D    x000D   x000D   page   x000D    width  21cm  x000D    min-height  29 7cm  x000D    padding  2cm  x000D    margin  1cm auto  x000D    border  1px  D3D3D3 solid  x000D    border-radius  5px  x000D    background  white  x000D    box-shadow  0 0 5px rgba 0  0  0  0 1   x000D    x000D   x000D   subpage   x000D    padding  1cm  x000D    border  5px red solid  x000D    height  256mm  x000D    outline  2cm  FFEAEA solid  x000D    x000D   x000D   page   x000D    size  A4  x000D    margin  0  x000D    x000D   x000D   media print   x000D     page   x000D      margin  0  x000D      border  initial  x000D      border-radius  initial  x000D      width  initial  x000D      min-height  initial  x000D      box-shadow  initial  x000D      background  initial  x000D      page-break-after  always  x000D      x000D    x000D   lt div class  book  gt  x000D     lt div class  page  gt  x000D       lt div class  subpage  gt Page 1 2 lt  div gt  x000D     lt  div gt  x000D     lt div class  page  gt  x000D       lt div class  subpage  gt Page 2 2 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

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   lt page size  A4  gt  lt  page gt   lt page size  A4  gt  lt  page gt   lt page size  A4  gt  lt  page gt    DEMO

User · Answer

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

User · Answer

https   github com cognitom paper-css seems to solve all my needs   Paper CSS for happy printing     Front-end printing solution - previewable and live-reloadable

[css] CSS to set A4 paper size

Examples related to css

Examples related to printing

Examples related to print-preview