4

I have a report that I want to print using CSS such that the first page is landscape and the second page is portrait. When I do this, the first page is fine, but the second page looks like a landscape page cropped into a portrait frame. That is, when centering text, it puts the midpoint at 5.5 inches (on 8.5x11 letter paper) and the page will break at only 8.5 inches high:

Screenshot of Print Preview

I can cheat by giving the second-page div a width of 75%. This gets the text centered and everything formatted correctly, but the page content still cuts off at 8.5in. Messing with the height will do nothing, since that will just continue to wrap to a new page.

I only need this to work in Google Chrome for right now, since this is special-purpose and not public use.

Here is my test code:

<style type="text/css">

@media print {
body { margin: 0; text-align: center; }

@page {
    margin: 0.1in 0.5in 0.1in 0.5in;
    size: letter portrait;
}

@page :first {
    margin: 0.1in 0.5in 0.1in 0.5in;
    size: letter landscape;
}

#firstpage { page-break-after: always; }

#secondpage { width: 75%; }

}
</style>

</head>
<body>

<div id="firstpage">
<p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p>
</div>
<div id="secondpage">
<p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p><p>this is a test case</p>
</div>
omnichad
  • 1,635
  • 1
  • 11
  • 10
  • As far as I can tell, this is just a bug / not supported area of CSS in current browsers. You should also be able to created named page definitions (`@page land {size:landscape}`) and associate them to specific elements (`#firstpage {page:land}`), but none of the browsers I tested responded to that syntax at all. – JstnPwll Mar 30 '16 at 15:00
  • From what I can tell, named pages is in a CSS3 working draft and has zero browser support. I'm willing to accept this is just an implementation bug with Chrome, but would like to find a dirty/cheap hack to get it working. As of right now, my second page in portrait is only 8 inches tall anyway unless there are footnotes that need to display. – omnichad Mar 30 '16 at 15:49
  • Please, see the answer http://stackoverflow.com/a/44069821/632199 – Denis May 19 '17 at 12:15
  • @omnichad I used your code to create a print page, thanks :) – dvdmn Aug 26 '21 at 13:32

1 Answers1

1

This works for me in Chrome 78 with your example:

@media print {
    :root {
        width: 75vw;
    }
    #firstpage {
        width: 100vw;
    }
}

It also seems to work fine with more complicated pages too - making the landscape page contents a width of 100vw and everything else a width of 75vw.

LB--
  • 2,506
  • 1
  • 38
  • 76