Different Page Orientations, Sizes, Margins, and Headers in the Same Document Documentation

If you want to different page orientations and sizes in the same document, this is easy to do through "named pages". Here's how it works:

<!DOCTYPE html>
<html>
  <style type="text/css">
    /* define a few different page types we can refer to from CSS classes */
    /* see http://www.princexml.com/doc/page-size/ */
    @page landscape {
      size: A4 landscape;
      margin: 20px;
    }

    @page portrait {
      size: A4 portrait;
      margin: 10px;
    }

    /* setup CSS classes to refer to these pages we just defined */
    .landscape {
      page: landscape;
    }

    .portrait {
      page: portrait;
    }

    /* reference http://www.princexml.com/doc/page-breaks/ */
    .page_break {
      page-break-before: always
    }
  </style>
  <body>
    <p class="portrait">Page 1 content</p>

    <p class="landscape page_break">Page 2 content</p>
  </body>
</html>

Named pages can also be used to apply different headers and footers to various pages.

Ready to get started? Try DocRaptor for free with unlimited test documents.