Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Font width is different when printing using Desktop Chrome UI vs puppeteer

See original GitHub issue

Steps to reproduce

Tell us about your environment:

Puppeteer version: 1.12.2
Platform / OS version: Ubuntu 18.04.1 LTS
URLs (if applicable): …
Node.js version: 8.11.3
Manual print Chrome version: 73.0.3683.75

What steps will reproduce the problem?

Open HTML listed below in Chrome UI and print it manually (print options: Letter, no margins, portrait, scale: 100, background graphics enabled)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <title></title>
    <style>
        body {
            font-family: 'Roboto Mono', monospace;
            margin: 10px 0 0 0;
        }

        text {
            position: absolute;
            top: 10px;
        }

        .verticalLine {
            border-left: thick solid red;
            position: absolute;
            left: 748px;
            top: 10px;
            height: 30px;
        }

        .note {
            color: red;
            font-size: 14px;
            position: absolute;
            left: 625px;
            top: 40px;
        }
    </style>
</head>

<body>

<div class="text">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</div>
<div class="verticalLine"></div>
<div class="note">text should stop here</div>

</body>

</html>

Print the same HTML file using puppeteer:

const puppeteer = require('puppeteer');
const fs = require('fs');

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    const html = fs.readFileSync('./test.html').toString();
    await page.setContent(html, {waitUntil: 'networkidle0'});

    const pdfBuffer = await page.pdf({
        printBackground: true,
        format: 'Letter',
    });

    await browser.close();

    const fd = fs.openSync(process.argv[2] || "./result.pdf", 'w+');
    fs.writeSync(fd, pdfBuffer);
})();

Compare resulting PDF files

What is the expected result?

Files should look identical

What happens instead?

Fonts in PDF generated using puppeteer are wider. Results may vary depending on which font you use. With some fonts text is wider, with others narrower.

Chrome UI result:

chrome-ui-print

puppeteer result:

puppeteer-print

chrome-ui-print.pdf puppeteer-print.pdf

When running on Windows 10 it works as expected
When I convert to PDF using AWS Lambda I get same results as on Ubuntu (font width is different from manual print)
You can clone and run this project to reproduce the issue - https://github.com/boris-ananyevsky/puppeteer-convert-to-pdf-test.git
If it matters I run Ubuntu under VirtualBox - Windows 10 host, Ubuntu guest

Issue Analytics

State:
Created 5 years ago
Reactions:12
Comments:9 (3 by maintainers)

Top GitHub Comments

6reactions

aslushnikovcommented, Jun 9, 2019

Ah, I re-read the original description.

@boris-ananyevsky: you should pass the '--font-render-hinting=medium' flag to Chromium to have consistent rendering between headless and headful.

This is actually a dupe of https://github.com/GoogleChrome/puppeteer/issues/2410

1reaction

ksykecommented, Jun 3, 2019

@aslushnikov On my case I’m rendering a canvas. Yes I agree that some fonts are rendered differently on different OS based on my outputs which uses multiple fonts per canvas. My fix however isn’t related to puppeteer, I tweaked my JS code on the page itself for it to work and output an acceptable render.

Top Results From Across the Web

How to fix puppeteer font issues - browserless docs

If you've been printing PDF's in puppeteer for some time, you've no doubt encountered issues where fonts don't render properly.

Chrome pdf font size differences with local ... - Stack Overflow

I am having the exact same issue. Font-size is bigger on Chromium linux than macOS, so it prints differently! If someone has a...

Puppeteer | Puppeteer

Puppeteer is a Node.js library which provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer runs in headless mode by ......

Web Scraping with a Headless Browser: A Puppeteer Tutorial

In this article, Toptal Freelance JavaScript Developer Nick Chikovani shows how easy it is to perform web scraping using a headless browser.

Useful tools: Headless Chrome & puppeteer for browser ...

Running Headless Chrome from the command line. ... Combining that with other flags like --window-size=1200,1600 will let you create a ...