Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PC×
Skip to content
browser automation

How PhantomJS CSS Defaults Affect PDFs—and How to Reproduce Them in Puppeteer

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

PhantomJS does not document a universal CSS reset or a complete set of CSS defaults for PDF output. Its documented PDF controls are page geometry, margins, orientation, and rendering; what looks like a “PhantomJS default” may instead come from the page’s CSS, the specific WebKit build, loaded fonts, or the browser’s print pipeline. To reproduce a legacy PDF in Puppeteer, make those inputs explicit, configure Page.pdf() deliberately, and compare the same fixture rather than expecting pixel-identical output.

What PhantomJS documents—and what it does not

PhantomJS’s paperSize setting defines the page size when rendering a PDF. If it is omitted, the web page defines the size. Supported units include mm, cm, in, and px; a unitless value is treated as pixels. Its optional margins default to zero, and orientation defaults to portrait. Named formats include A3, A4, A5, Legal, Letter, and Tabloid. The API also supports configured repeating headers and footers.

PDF is one of the output formats supported by PhantomJS’s separate page.render API; the file extension selects the format. The render method and paperSize solve different problems: the former produces the file, while the latter configures page geometry. Changing the output extension does not set a paper size or margin. See the archived PhantomJS paperSize documentation and page.render documentation.

Those API references do not define a PhantomJS-specific stylesheet or enumerate every user-agent CSS rule. Do not assume that a body margin, heading size, list indentation, or font seen in an old PDF is a universal PhantomJS PDF default. It may come from the document’s own styles, the exact PhantomJS/WebKit build, or the print behavior of that build. Verify the legacy output and environment before encoding a suspected default into a migration.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Why Puppeteer PDFs can look different

Puppeteer’s Page.pdf() generates a PDF using the print CSS media type. Its documentation states: “Generates a PDF of the page with the print CSS media type.” If the old workflow depended on screen styles, use page.emulateMediaType('screen') before producing the PDF. Do not switch media types merely to make one sample look closer; first establish which styles the legacy job used.

Puppeteer also has PDF options that can silently affect layout or appearance. In the current API documentation, format defaults to Letter; if margin is unset, no margins are set; printBackground defaults to false; and preferCSSPageSize defaults to false. With that option false, content is scaled to fit the paper size. scale defaults to 1 and waitForFonts defaults to true. When preferCSSPageSize is true, CSS @page dimensions take priority over width, height, or format supplied to Page.pdf(). Consult Puppeteer’s PDFOptions reference for the version you have pinned.

Colors are modified for printing by default. If the reference requires background graphics, set printBackground: true; for exact color reproduction, use -webkit-print-color-adjust in the page’s CSS. These settings are separate: enabling background printing does not by itself guarantee exact colors. The Page.pdf() API and PDF generation guide describe the print behavior and font-waiting behavior.

Build a controlled PhantomJS-to-Puppeteer comparison

There is no documented one-click compatibility stylesheet or setting that guarantees a pixel-identical migration. Treat reproduction as a fixture-based comparison: preserve the inputs, translate known geometry, and adjust page CSS only when the old output demonstrates a difference. This procedure is engineering guidance based on the documented controls, not a claim that a particular migration has been tested.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  1. Record the legacy environment. Note the PhantomJS and Qt/WebKit build if known, input HTML, viewport assumptions, stylesheets, images, font files, and the exact paperSize object. Save the legacy PDF as the comparison artifact.
  2. Measure the old PDF. Record page dimensions, orientation, margins, header/footer areas, page count, and any intentional scaling. Translate explicit geometry to Puppeteer’s format or width/height, landscape, and margin options. Match the actual output, not a presumed default.
  3. Make layout styles explicit. Where relevant, define @page size and margins, body spacing, typography, line height, colors, backgrounds, and page-break rules in the page’s CSS. This turns implicit or environment-dependent behavior into auditable inputs.
  4. Choose the media type deliberately. Keep Puppeteer’s print media if that is what the legacy job used. If the old PDF reflected screen styles, call page.emulateMediaType('screen') before page.pdf().
  5. Set PDF options intentionally. Decide whether CSS @page or API options own the page size; set margins and orientation; enable backgrounds if the reference includes them; and choose whether printing should preserve exact colors.
  6. Wait for the same assets, then compare. Generate the PDF after the expected fonts and other resources are ready. Compare page size and margins first, then page count, line wrapping, page breaks, and representative element positions. Preserve the fixture and repeat the comparison after changing browser versions or CSS.

Minimal Puppeteer example

This CommonJS example illustrates explicit settings for an A4 portrait PDF with zero margins, print media, and backgrounds enabled. Replace the sample URL and geometry with the values established from your legacy job. Install Puppeteer in the project first; the exact package and Chromium versions should be pinned and recorded for repeatable output.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  try {
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 900 });
    await page.goto('https://example.com', { waitUntil: 'networkidle0' });

    // Print media is the default; this call makes the intent explicit.
    await page.emulateMediaType('print');

    await page.pdf({
      path: 'output.pdf',
      format: 'A4',
      landscape: false,
      margin: { top: '0mm', right: '0mm', bottom: '0mm', left: '0mm' },
      printBackground: true,
      preferCSSPageSize: false,
      scale: 1,
      waitForFonts: true
    });
  } finally {
    await browser.close();
  }
})();

networkidle0 is a convenient navigation condition, not proof that every application-specific asset or delayed widget is ready. If a page loads fonts or content after navigation settles, wait for the relevant selector or asset explicitly before generating the PDF. If using screen styles, replace the media call with await page.emulateMediaType('screen'). If CSS @page should govern paper dimensions, set preferCSSPageSize: true and align the document rules with the reference instead of simultaneously relying on conflicting dimensions.

What to compare when a PDF differs

Comparison axis What to inspect Likely control to verify
Page dimensions and orientation Physical width and height, portrait or landscape PhantomJS paperSize; Puppeteer format or dimensions and landscape
Margins and reserved space Content edge offsets and any header/footer region Legacy margin/header/footer settings; Puppeteer margin and page CSS
Media-specific layout Elements hidden, resized, or restyled in the PDF Print versus screen media and print stylesheets
Color and backgrounds Missing fills, changed colors, or absent background images printBackground and -webkit-print-color-adjust
Typography and wrapping Font family, glyphs, line breaks, and paragraph height Loaded font files, font readiness, CSS and browser build
Pagination Page count, break positions, clipped or split elements Content dimensions, CSS page-break rules, scaling, page size

Use a fixed HTML fixture and fixed assets when comparing engines. Otherwise a changed remote image, font, script, or page response can be mistaken for a rendering difference. Compare geometry before fine typography: incorrect paper size or fit-to-page scaling can alter line wrapping throughout the document.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshoot common migration failures

Every page has different line breaks

Check paper dimensions, margins, scale-to-fit behavior, viewport assumptions, and font availability before editing font sizes. Confirm whether preferCSSPageSize is false and scaling content to fit, or true and honoring the CSS @page size. A font that has not loaded, or a substitute font in one environment, changes glyph widths and can cascade into different pagination.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Backgrounds or colors disappear

Set printBackground: true if backgrounds are part of the target. For colors that must not be adjusted for print, apply -webkit-print-color-adjust: exact to the appropriate CSS rule and check it in the pinned Chromium version. Do not confuse missing background graphics with missing page geometry.

The PDF uses the wrong layout variant

Puppeteer’s default is print media. Inspect @media print rules and compare the legacy PDF with the page’s screen rendering. If the legacy job used screen styling, emulate screen before calling page.pdf(); if it used print rules, retain print media and repair or make those rules explicit.

Margins or paper size seem inexplicable

Read the legacy paperSize object and the generated PDF’s actual dimensions. PhantomJS documents zero as the default for its optional margins, but the page itself can define its size when paperSize is omitted. In Puppeteer, unset margins mean none are set, while Letter is the default format. Check for CSS @page rules and the preferCSSPageSize choice before attributing the result to a browser default.

Content is missing or a PDF captures too early

Inspect navigation errors, delayed application rendering, and resource failures. Puppeteer’s PDF guide says font waiting is enabled by default, but that does not replace waiting for application-specific content. Wait for a reliable selector or explicit readiness condition, then verify that the page has the intended text and assets before rendering.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Best Value
The SQL Programming Language: .
  • Used Book in Good Condition

Results change after deployment

Record and pin the PhantomJS build used for the reference and the Puppeteer/Chromium versions used for the replacement. The PhantomJS API pages are archived and carry a 2010–2020 copyright footer; Puppeteer’s current documentation describes its current API, not necessarily an older pinned release. Version changes can invalidate a comparison even when the application code appears unchanged.

Or skip the browser setup

If the task is capturing a web page as an image or PDF rather than reproducing a particular PhantomJS PDF pipeline, ScreenshotNeo offers a one-request screenshot API and an MCP server. Its endpoint can return PNG, JPEG, WebP, or PDF. For a simple screenshot, use cURL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and 1,000 screenshots per month are free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

Frequently Asked Questions

Will Puppeteer produce a pixel-identical replacement for a PhantomJS PDF?

The documented settings do not guarantee pixel-identical output across the two browser engines. Validate the same fixture, assets, fonts, and geometry in the versions you deploy.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Does PhantomJS give PDFs a default body margin?

The reviewed PhantomJS PDF API documentation specifies that its optional paperSize margin defaults to zero. It does not establish a universal CSS body margin for every page or build.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read next

Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.