How to Mix Portrait and Landscape Pages in Markdown PDFs

When writing reports, proposals, or ebooks in Markdown, you will occasionally need to change the page layout mid-document. While standard text is best read in vertical portrait orientation, wide data tables, charts, complex mind maps, and timelines require a horizontal landscape layout to be legible.

In this tutorial, we’ll explain how to mix portrait landscape markdown pdf pages using the CSS Paged Media module.

The Challenge of Mixed Orientations in Markdown

Markdown files are plain text documents that don’t natively understand physical pages. They flow continuously. To split a document into pages and define their orientation, we must use CSS @page rules.

While setting a single orientation for an entire document is simple, mixing orientations requires using “Named Pages” in CSS. This feature allows us to define specific layouts and apply them to select sections of our document.

Setting Up Your CSS with Named Pages

To support both portrait and landscape pages in a single document, we’ll configure a default @page rule (which defaults to portrait) and create a second named page rule for landscape pages.

Add this CSS to your template or converter styling settings:

/* Default page settings (Portrait) */
@page {
    size: A4 portrait;
    margin: 2cm;
}

/* Named page settings (Landscape) */
@page landscape-layout {
    size: A4 landscape;
    margin: 1.5cm;
}

/* CSS class to trigger the landscape page */
.landscape-section {
    page: landscape-layout;
    break-before: page;  /* Force a page break before this section starts */
    break-after: page;   /* Force a page break after this section ends */
}

Key properties explained:

• size: A4 landscape changes the page dimensions to horizontal format.
• page: landscape-layout links this class to the named page rule.
• break-before: page and break-after: page ensure the landscape section is isolated on its own sheet and doesn’t blend onto portrait sheets.

Applying the Landscape Layout in Your Markdown

Once your CSS is ready, you can easily apply it within your Markdown document by wrapping your wide tables or images inside a div element with the corresponding class name.

Here is an example:

# Annual Sales Report

This is standard portrait text. It flows down the page in the usual fashion, which is ideal for paragraphs, lists, and small charts.

<!-- Start Landscape Page -->
<div class="landscape-section">

## Q4 Financial Data Table

| Region | Oct Sales | Nov Sales | Dec Sales | Total Revenue | Net Profit | Margin |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| North America | $120,000 | $145,000 | $210,000 | $475,000 | $95,000 | 20% |
| Europe | $98,000 | $112,000 | $175,000 | $385,000 | $67,000 | 17.4% |
| Asia-Pacific | $150,000 | $180,000 | $260,000 | $590,000 | $148,000 | 25% |

</div>
<!-- End Landscape Page -->

# Strategic Insights

The document automatically reverts to portrait here. This is where we discuss the findings from the landscape table above.

Tips for Landscape Page Elements

• Scaling Images: When using SVGs or images on landscape pages, make sure they are styled to fill the wider space: width: 100%; height: auto; max-height: 80vh;.
• Wider Tables: Take advantage of the extra horizontal room on landscape pages by expanding column widths, which prevents text from wrapping awkwardly in narrow cells.
• Headers & Footers: If you are using running page numbers or headers in your margins, remember that they will follow the landscape orientation on those specific pages.

Try It Yourself

Ready to build complex, professional multi-orientation documents? You can easily test and refine your custom page templates using our Markdown to PDF Editor. Write your content, add the HTML wrappers for your landscape sections, copy the CSS configuration from this guide, and preview your gorgeous multi-orientation PDF layout in real time.