I want to printing a page in mixed dimensions (both portrait and landscape), but the results are not as I expected.
Consider following proof of concept code:
<!DOCTYPE html>
<html>
<head>
<style>
@page landscape {
size: A4 landscape;
}
html {
font-size: 32px;
}
.landscape {
page-break-before: always;
page: landscape;
}
</style>
</head>
<body>
<p>In non blandit magna. Aliquam porta pretium elit, in semper libero porttitor quis. Sed elit nisl, dapibus id ultricies nec, convallis ac diam. Sed feugiat turpis et tellus laoreet, sodales rutrum sem consectetur. Ut a enim sagittis, mattis nisl vitae, tincidunt nibh. Nullam eleifend, nisl at fermentum interdum, nisl tortor auctor ipsum, ac volutpat diam sapien et tellus. Proin semper hendrerit tellus. Proin at lacus malesuada, condimentum justo id, accumsan metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut arcu est, accumsan at feugiat sed, dignissim ac risus. Vivamus aliquet sapien a quam posuere feugiat. Quisque eleifend pretium tellus, at volutpat nisi bibendum sit amet. Suspendisse potenti. Aliquam imperdiet, augue hendrerit porta ultricies, metus eros eleifend ipsum, et consequat elit nibh feugiat lacus.</p>
<p class="landscape">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet erat rutrum magna eleifend, non egestas sem tempor. Proin non tempus nibh. Maecenas et venenatis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam a risus felis. Vestibulum ligula mauris, lobortis et auctor vel, auctor sit amet odio. Praesent non finibus mi, et pharetra nulla. Mauris tempus urna sed tortor sodales rutrum. Integer vitae dui augue. Maecenas velit purus, volutpat at efficitur a, sagittis in quam.</p>
</p>
</body>
</html>
The second paragraph has landscape class, intended for printing in landscape mode. Below is the result, you can see that when I click Print, the first page has correct layout in Portrait, while second page use the dimension of first page, thus cannot take the full page width:
If I move the landscape class from second page to first page, below is what I got. This time, the first page still layouted correctly, but the second page, again using the width of the first page, which is too large, making the text being cut off.
What is the settings I need in this case to make each pages using their correct dimension?
I'm printing using Chrome v116 on Windows 10.