How to Render a Webpage to PDF with Landscape Pages

To save one webpage as a landscape PDF, open the browser’s print dialog, choose Landscape for orientation, then select Save as PDF. For a page you control, set the print page size with CSS @page and adjust its layout with @media print. For repeatable automated output, Playwright’s page.pdf({ landscape: true }) creates landscape pages.

Landscape orientation gives the page more width, but it does not automatically make every layout fit. Paper size, margins, scale, and print-specific styles also affect clipping and readability.

1. Save a webpage as a landscape PDF in your browser

1. Open the webpage you want to save.
2. Open the browser’s print dialog, usually with Ctrl+P on Windows or Linux, or ⌘+P on macOS.
3. Set the destination to Save as PDF or the equivalent PDF destination.
4. Set Orientation to Landscape.
5. Choose an appropriate paper size and review the preview. Adjust margins or scale if content is clipped or too small.
6. Save the PDF.

This is the quickest approach when you only need one page and cannot change the website’s code. Dialog labels vary by browser and operating system. The orientation setting is in the print dialog, not necessarily in the webpage.

2. Set landscape pages with CSS

If you control the page, declare the printed page size and margins with @page. Use @media print for changes that should apply only to print output, such as hiding navigation and controls.

@page {
  size: landscape;
  margin: 2cm;
}

@media print {
  .navigation,
  .screen-only-control {
    display: none;
  }

  main {
    width: 100%;
  }
}

The @page rule controls printed page dimensions, orientation, and margins. The @media print block changes the document layout when it is printed or rendered to PDF. Keep essential content visible and check the print preview for overflow. See MDN’s @page reference and its guide to CSS for printing.

3. Generate a landscape PDF with Playwright

Playwright renders PDFs using print CSS media. Set landscape: true for landscape output. The following Node.js example installs Chromium, opens a URL, and writes a PDF to disk.

npm install -D playwright
npx playwright install chromium

// save as render-landscape.mjs
import { chromium } from 'playwright';

const url = process.argv[2] ?? 'https://example.com';
const browser = await chromium.launch({ headless: true });

try {
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle', timeout: 60_000 });
  await page.pdf({
    path: 'page-landscape.pdf',
    format: 'A4',
    landscape: true,
    printBackground: true,
    margin: {
      top: '12mm',
      right: '12mm',
      bottom: '12mm',
      left: '12mm'
    }
  });
} finally {
  await browser.close();
}

node render-landscape.mjs https://example.com

Change format to another supported paper format such as Letter, Legal, Tabloid, Ledger, or an ISO A size. If you omit format, Playwright uses Letter. Its PDF margins default to none. For custom dimensions, use width and height instead of format.

Let CSS control the paper size

When your page’s @page rule should take priority over Playwright’s format or dimensions, set preferCSSPageSize: true. For example:

await page.pdf({
  path: 'page-landscape.pdf',
  landscape: true,
  preferCSSPageSize: true,
  printBackground: true
});

Choose one source of truth for page sizing. If your CSS defines the intended paper size, use preferCSSPageSize; if the script should control the size, specify format or dimensions in the PDF options. The Playwright Page API documentation lists the PDF options and behavior.

Useful Playwright PDF options

Option	What it controls	When to use it
landscape	Page orientation	Set to true for landscape pages.
format	Named paper size	Use a standard size such as A4 or Letter. Defaults to Letter if omitted.
width, height	Custom page dimensions	Use when a named paper format does not match the required dimensions.
margin	Printable space around page content	Specify top, right, bottom, and left values with CSS units, such as 12mm.
scale	Scale of webpage rendering	Adjust when content needs to fit or be more readable. The supported range is 0.1 to 2.
printBackground	Whether to include print backgrounds	Set to true when background colors or images matter; the default is false.
preferCSSPageSize	Whether CSS @page sizing takes priority	Set to true when the page’s CSS should determine paper sizing.
path	Output file path	Provide a path to save the generated PDF to disk.

Playwright changes PDF colors for printing by default. If exact screen colors matter, review its documentation on -webkit-print-color-adjust and validate the output in the PDF viewer used by your workflow.

4. Choose the method that fits the job

Method	Best for	Control
Browser print dialog	A one-off conversion of a page you do not control	Choose orientation, paper size, margins, and scale in the dialog.
Print CSS	A site or document whose source you can edit	Define page sizing and print layout in CSS.
Playwright	Repeatable scripts or automated PDF generation	Set orientation, paper format, margins, scale, backgrounds, and CSS sizing in code.

5. Or skip the browser setup

ScreenshotNeo can return a webpage as a PDF from one API request. See the API documentation for PDF options, including paper size, margins, landscape orientation, and page ranges.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d format=pdf \
  -d landscape=true \
  -o page.pdf

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use ScreenshotNeo to take screenshots. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.

6. Troubleshooting landscape PDFs

The PDF is still portrait

• Browser dialog: Check the print dialog’s orientation; the webpage’s CSS may not control this manual setting.
• CSS: Confirm the stylesheet containing @page is loaded when printing, and inspect the print preview.
• Playwright: Pass landscape: true, or use a CSS page size with preferCSSPageSize: true.

Content is clipped or too small

Landscape orientation alone does not guarantee a good fit. Check the paper format, margins, and scale. Reduce unnecessarily wide content in print CSS, choose a larger paper size if appropriate, or adjust Playwright’s scale within its supported range. Avoid shrinking the entire page so much that text becomes hard to read.

The screen layout or controls appear in the PDF

Add print-specific rules with @media print or a print stylesheet. Hide elements that are unnecessary on paper, such as navigation or interactive controls, while keeping the content needed in the document. See MDN’s printing guide.

Background colors or images are missing in Playwright

Set printBackground: true. Playwright defaults this option to false.

Printed colors differ from the page

Browsers may adjust colors for print. Playwright documents -webkit-print-color-adjust for controlling color adjustment. Check the PDF output in the target viewer because the final appearance can depend on print styling and the viewing or printing environment.

The PDF script times out while loading a page

Increase the navigation timeout for slow pages and check whether the page actually finishes loading. The sample waits for networkidle, which can be unsuitable for pages that keep network connections open. In that case, wait for a meaningful selector or use a different load condition before calling page.pdf(). Ensure the script reaches browser.close() even when navigation or PDF generation fails.

CSS page rules behave differently on an older browser

MDN marks @page as Baseline 2024 and notes that older devices or browsers may not support every part consistently. If you target older environments, verify the print preview or generated PDF in those browsers and set orientation through the browser or PDF API where needed.

7. Performance, reliability, and cost considerations

For occasional manual conversion, the print dialog avoids installing and maintaining automation tooling. CSS is easiest to maintain when you own the page and want consistent print styling. Playwright adds a browser installation and script to manage, but makes PDF generation repeatable and exposes page-format and rendering options. Rendering time depends on page loading and content; wait for the content your document needs rather than assuming a fixed delay is enough.

For automated output, use an explicit navigation timeout, select a load condition that matches the site, and close the browser in a finally block. Choose margins and paper size deliberately, and inspect representative PDFs after changes to the source layout. The browser-based methods described here require no paid PDF service; cost and operational overhead depend on where you run your browser automation.

FAQ

Can I make only one page of a PDF landscape?

CSS paged media can define page-specific rules, but support and layout behavior should be checked in the browser that generates the PDF. For a simple one-off, use the print dialog’s orientation setting for the whole output.

Does landscape mean the PDF will fit a wide table?

No. Landscape increases page width, but a table may still overflow. Use print CSS to wrap, resize, or reorganize wide content, and review the PDF at its intended paper size.

Should I use CSS orientation or Playwright’s option?

Use CSS when the page itself should define its print layout. Use Playwright’s landscape option when the automation script should choose orientation. Set preferCSSPageSize when CSS should also control page sizing.