I am working on a report rendering system (using Gotenberg, but the issue is coming from Chromium). I need the ability to have both landscape and portrait pages in the same PDF report. Using CSS Named Pages seems to be the solution, but when I place a landscape page after a portrait page, the width of the content is limited to the portrait width (though the page does print in landscape).
Here's some example HTML that shows the problem:
<html>
<head>
<style>
@page {
margin: 0.125in;
}
@page wide {
size: landscape;
}
div {
width:100%;
height:100%;
border: 3px solid red;
page-break-after: always;
}
.landscape {
page: wide;
}
</style>
</head>
<body>
<div class="portrait"></div>
<div class="landscape"></div>
</body>
</html>
When I print this page, you can see that the paper is in landscape orientation, but the content is still limited to portrait width. Chrome Print Dialog
FWIW, I'm on Chrome Version 116.0.5845.96 (Official Build) (arm64) for M1 Mac, but as I said above, it is replicated in Chromium as well.
I'm really hoping I'm missing something or there's a workaround.