Search code examples
htmlcssprintingflying-saucer

Page Orientation using CSS

I have an assignment to create a print view using HTML & CSS. This view is then parsed and rendered to PDF on the server. The document is then presented to the users and are spooled to to an A5 printer.

one of the requirments is to have the first page orientation as Landscape and all other pages orientation as Portrait

I have created the view, and the servlet that parses the HTML & CSS to create the PDF using Flying Saucer. However I am having some issues with the page Orientation. I use the following CSS to control the page layout

@page :first {size: A5 landscape}
@page{ size: A5 }

I do get the correct layout for the first page. Yet all other pages are displayed as A3 landscape (the boundaries of the text printed) printed on an A4 paper (the actual orientation of the page).

Any Idea what I am doing wrong here

Solution

  • The orientation was correct but the A5 size width did not take margins into account, hence I the text went over the expected page width. The work around was to create a new CSS class, I named the class portrait that set the width and height of the page as follows:

    .portrait{
    padding:5px;
    margin:15px 0px;
    width:5.5in ;
    font: 11px verdana, sans-serif;
}

    Hope this helps anyone who comes across a similar issue. I would also be interested if anyone has some analysis around why size:A5 does not work as expected