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, 2022 in CSS by Edureka
• 13,620 points
19,005 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, 2022 by Edureka
• 12,690 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, 2022 in CSS by Edureka
• 12,690 points
1,526 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, 2022 in CSS by Edureka
• 12,690 points
866 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, 2022 in CSS by Edureka
• 12,690 points
1,147 views
0 votes
0 answers

@Media print css

I have my HTML page with this ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
288 views
0 votes
0 answers

How to use HTML to print header and footer on every printed page of a document?

Can HTML pages be printed with unique ...READ MORE

Jul 12, 2022 in HTML by Ashwini
• 5,430 points
3,207 views
0 votes
0 answers

How to make a HTML Page in A4 paper size page(s)?

Is it feasible to make an HTML ...READ MORE

Jul 29, 2022 in HTML by Tejashwini
• 3,820 points
1,880 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
9,669 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, 2022 in CSS by Edureka
• 12,690 points
770 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, 2022 in CSS by Edureka
• 12,690 points
1,678 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP