Some content needs to be printed in landscape. This is fairly common when you have spreadsheets or data-filled reports. This can be tricky when printing from the browser, because it relies on the user to select landscape printing, which is rarely the default orientation.
If you use PDF generation on the server, it's relatively easy to enforce landscape orientation, because both PrinceXML and wkhtmltopdf (and presumably most other html-to-pdf tools) support mechanisms to force landscape.
- For wkhtmltopdf, you would add the -0 landscape parameter to the wkhtmltopdf call.
-0 landscape
- For PrinceXML, which has full CSS3 paged media support, you would use the page element and landscape keyword in your CSS to set up the orientation:
@page { size: letter landscape }
Rendering a PDF on the server and returning it is definitely the preferred solution.
If you must render in the browser, it's much trickier, because only some web browsers have full support for CSS3 paged media standard, including landscape support.
One solution that may help is to rotate the content instead of rotating the page. This has drawbacks, because it will affect alignment and layout, but it may be sufficient for some use cases.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
For more information, check out this Stack Overflow discussion.
WilliamH
Print Developer Community advocate
I work for HP, but my views and opinions are my own.
More from Will
Code Tutorials
Here are Will's detailed code tutorials that we have migrated to Print Fundamentals for Developers on the HP Developers' Portal
- Using PDF to make webpages print beautifully
- Generating PDFs from HTML for non-web applications (like book layout)
- Printing with CSS and Media Queries