Mixing page orientations in wkhtmltopdf

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.

Seriema

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.

Seriema

I combined the -webkit-transform suggestion from sacohe with an @media print {} selector to make the rotation only occur during the print view. You need to pass the 'print-media-type' flag to the WkHtmlToPdf constructor to make that work. – Dubois

The problems with css transformation is the content that span to multiple page, also the header and footer still shown in normal layout, not landscape. – Finbar

As noted above, this is not possible with wkhtmltopdf, but the commercial library princexml.com or their hosted partner docraptor.com support this behavior. Unfortunately, not of the browsers (and browser-based libraries) fully support CSS3 Paged Media. – Orderly

princexml.com is a paid solution? – Forfar

Answer 2

To @sacohe - hello from the future! Yes, still looking.

In case someone is still looking for this answer in the future, I am leaving a link to the feature request: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1564

At this time it is still open, but likely to be fixed sooner or later.

Komsomol

Still not merged :( – Forfar