Question

I’m using wkhtmltopdf to produce a PDF from a single HTML file, formatted into separate pages using page-break-before: always. For example:

<div class="cover">
    Cover Page
</div>
<div class="page">
    Page 1
</div>
<div class="page">
    Page 2
</div>

With CSS:

.page {
    page-break-before: always;
}

Right now, I have the wkhtmltopdf command written to print the PDF in portrait orientation on letter-size pages. I need one of the pages to be in landscape orientation and the rest to be in portrait orientation (so that when the PDF is viewed on screen, all of the content will be oriented correctly).

Is there a way to mix orientations in a single PDF?

If this is not possible, is there a way to merge multiple PDFs using wkhtmltopdf? (I have seen other suggestions of different pdfmerge software.) I could split my HTML source file into multiple files for each page if necessary.

Answer 1

In case someone is looking for this answer in the future, I will complete this with my solutions. Based on the lack of answers, I guess there really is no way to create a PDF with multiple page orientations using wkhtmltopdf.

1. The first solution I implemented was creating a single PDF using one HTML file and rotating the content of the landscape page using the following CSS:

   width: 1275px; 
   height: 1650px; 
   
   -webkit-transform: translateY(1650px) rotate(270deg); /* Chrome, Safari 3.1+ */ 
   -moz-transform: translateY(1650px) rotate(270deg); /* Firefox 3.5+ */ 
   -o-transform: translateY(1650px) rotate(270deg); /* Opera 10.5-12.0 */ 
   -ms-transform: translateY(1650px) rotate(270deg); /* IE 9 */ 
   transform: translateY(1650px) rotate(270deg); /* IE 10+, Firefox 16.0+, Opera 12.1+ */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand'); /* IE 6-7 */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')"; /* IE 8 */ 
   
   -webkit-transform-origin: 0% 0%; 
   -moz-transform-origin: 0% 0%; 
   -o-transform-origin: 0% 0%; 
   -ms-transform-origin: 0% 0%; 
   transform-origin: 0% 0%; 
   

   (To write similar compatible CSS3 transforms, check out this great site to calculate all of the IE matrix values: http://www.useragentman.com/IETransformsTranslator/)

   This would be a decent solution if your users would only be printing the PDF after it was produced. Since my users need to view the PDF on screen, it would not be practical for them to have to rotate the page using their PDF viewing software.

2. So, my second solution was to create each page as a separate PDF from individual HTML files, and then I used Ghostscript to merge them into a single file. This worked perfectly, but just added some extra processing time to create all of the files and merge them. In my case, the PDF would not be downloaded too often and the number of pages was minimal so the extra time was not a significant burden.