Creating Paged Media with Different Paged Modes Using CSS3

In one of our projects, we had to create PDF documents from HTML. The iText renderer was an excellent solution to do that. However, the tricky part was that the cover page had to be of portrait orientation and the rest of the document, of landscape orientation. After doing a fair share of searching on the web, I came across the Documentation for CSS3 Paged Media.

This could be achieved by creating an @page rule with a page name and then, using the page name in the element, which was going to enclose the body, for which we needed a particular style.

For example, since I needed the landscape mode on the inner pages, I had to create a @page rule in the CSS file as

@page content{
           size: A4 landscape;
}

And a css selector,(say a div, which was going to enclose such pages)

div .content{
          page: content;
}

If the HTML was something like,

<content in portrait mode>
<div class=”content”>
My contents here
</div>
<content in portrait mode>

“My contents here” would appear in a landscaped page.

Hope this helps

Vivek
vivek[at]IntelliGrape.com