CSS to set A4 paper size

0 votes

I need the option to print this page exactly as it appears in the browser by simulating A4 paper on the web (Chrome, specifically). Despite setting the element size to 21 cm by 29.7 cm, my page is clipped when I send it for printing or run a print preview.

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>

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

Jun 16 in CSS by Edureka
• 8,060 points
19 views

1 answer to this question.

0 votes
I looked into it further, and the issue appears to be with assigning initial to page width under the print media rule. 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), it appears that in Chrome width: initial on the.page element results in scaling of the page content.

So not only is the content now too lengthy for the page (by around 2cm), but the page padding will be slightly greater than the initial 2cm, and so on (it appears to render the contents under width: auto to 196mm and then scale the entire content up to 210mm, but curiously, the same scaling factor is applied to contents with any width smaller than 210mm).

To resolve this issue, just set the A4 paper width and height to html, body, or straight to.page in the print media rule, avoiding the beginning keyword.
answered Jun 21 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
0 answers
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
29 views
0 votes
1 answer

Is there any way to animate an ellipsis with CSS animations?

You might try to time each ellipsis ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
26 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
28 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,499 views
0 votes
1 answer

How can I print variable and string on same line in Python?

Use , to separate strings and variables while printing: print ...READ MORE

answered Sep 17, 2018 in Python by Priyaj
• 58,080 points
2,630 views
0 votes
2 answers

Why do we use return statement in python?

def maximum(x, y):     if x > y:     ...READ MORE

answered Apr 4, 2019 in Python by anonymous
1,008 views
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
33 views
0 votes
1 answer

CSS box-sizing: border-box still adding border size to element width

Instead of using a border, you could ...READ MORE

answered Jun 13 in CSS by Edureka
• 9,540 points
10 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP