I have a project where I must have both portrait and landscape pages in one document. I can generate a document with all portrait or all landscape but not both. How would I go about doing this?
Forum › How do I...?
Landscape and Portrait pages in one document
Yes, but I have a potentially unlimited number of pages. I am sure I am missing something stupid.
Try something like this in your CSS:
If your source then has
Then the resulting PDF will insert a landscape page for the contents of div.landscape-content.
Let us know how it goes.
Thanks,
Dave
@page { size: 6in 9in; }
@page landscape { size: 9in 6in; }
div.landscape-content {
page: landscape;
}
If your source then has
<div>
<p>portrait content</p>
<div class="landscape-content">
<p>landscape content</p>
</div>
<p>more portrait content</p>
</div>
Then the resulting PDF will insert a landscape page for the contents of div.landscape-content.
Let us know how it goes.
Thanks,
Dave
Nope, didn't change a thing. Everything is portrait even when I hard code just landscape using the technique above. Here is a small code snippet which displays all pages in portrait mode.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>print</title>
<style TYPE="text/css">
<!--
@page portrait {
size: 6in 9in;
}
@page landscape {
size: 9in 6in;
}
div.landscape-content {
page: landscape;
}
div.portrait-content {
page: portrait;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="landscape-content">
<table>
<tr>
<td>AAAAA</td>
</tr>
</table>
</div>
<div style='page-break-after: always;'></div>
<div class="portrait-content">
<table>
<tr>
<td>BBBBB</td>
</tr>
</table>
</div>
<div style='page-break-after: always;'></div>
<div class="portrait-content">
<table class="TableClass">
<tr>
<td>CCCCC</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>print</title>
<style TYPE="text/css">
<!--
@page portrait {
size: 6in 9in;
}
@page landscape {
size: 9in 6in;
}
div.landscape-content {
page: landscape;
}
div.portrait-content {
page: portrait;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="landscape-content">
<table>
<tr>
<td>AAAAA</td>
</tr>
</table>
</div>
<div style='page-break-after: always;'></div>
<div class="portrait-content">
<table>
<tr>
<td>BBBBB</td>
</tr>
</table>
</div>
<div style='page-break-after: always;'></div>
<div class="portrait-content">
<table class="TableClass">
<tr>
<td>CCCCC</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
If I remove the outer table, your code works as I would expect. I'm not brave enough to nest tables 
Dave
Dave