Forum How do I...?

Landscape and Portrait pages in one document

cgray
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?
jim_albright
Have you used named pages?

Jim Albright
Wycliffe Bible Translators

cgray
Yes, but I have a potentially unlimited number of pages. I am sure I am missing something stupid.
dauwhe
Try something like this in your CSS:

@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
cgray
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>
dauwhe
If I remove the outer table, your code works as I would expect. I'm not brave enough to nest tables :)

Dave
cgray
Interesting! Thank you. At least this gives me something to go on...