DocRaptor Home
PDF Styling & Reference > Advanced Topics

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

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>
  <style type="text/css">
    /* define a few different page types we can refer to from CSS classes */
    /* see */
    @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 */
    .page_break {
      page-break-before: always
    <p class="portrait">Page 1 content</p>

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

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.