Screenshot: difference in fonts between headless and non-headless

Romain Pichot

unread,

Jul 13, 2017, 1:37:38 PM7/13/17

to headle...@chromium.org

Hello,

I noticed a difference in fonts while using CDP to make a screenshot. In headless mode, there is a slight difference compared to the real display on the browser, which can make a character shift in some situations.

Here is the html page I want to screenshot:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Text Layer to PNG</title>

        <style type="text/css">
            @font-face {
                font-family: 'Sitka-Regular.ttf';
                font-style: normal;
                font-weight: 300;
                src: url('Sitka-Regular.ttf') format('truetype');
            }

            * {
                margin: 0;
                padding: 0;
            }

            html {
                font-family: 'Sitka-Regular.ttf', cursive;
                font-size: 60px;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }

            div.layer-container {
                -webkit-user-modify: read-write;
                word-wrap: break-word;
                -webkit-line-break: after-white-space;
            }

            div.layer-container p {
                line-height: 1.2em;
            }

            .layer-container .secondary {color: #fb0000}
        </style>
    </head>
    <body>
        <div style="width: 908px; height: 568px;">
            <div
                class="layer-container"
                style="
                    position: absolute;
                    top: 21px;
                    left: 52px;
                    width: 102px;
                    height: 504px;
                "
            >
                <p style="line-height: 1em; font-size: 60%;">defaulttextdef<strong>aulttex<span class="secondary">tdefa</span>u</strong>lttextdefaulttextdefaulttextdefaulttextdefaulttextdefaulttextdefaulttext</p>            </div>
        </div>
    </body>
</html>

Here is the CDP script in node:

const CDP = require('chrome-remote-interface');
const fs = require('fs');

const viewportWidth = 908;
const viewportHeight = 800;

CDP(async (client) => {
    const {Page, Emulation} = client;

    try {
        await Page.enable();

        await Page.navigate({url: 'http://localhost/1.html'});
        await Page.loadEventFired(async () => {
            await Emulation.setDefaultBackgroundColorOverride({color: {r: 0, g: 0, b: 0, a: 0}});
            await Emulation.setDeviceMetricsOverride({
                width: viewportWidth,
                height: viewportHeight,
                deviceScaleFactor: 1,
                mobile: false,
                fitWindow: false,
            });
            await Emulation.setVisibleSize({width: viewportWidth, height: viewportHeight});

            const screenshot = await Page.captureScreenshot();
            const buffer = new Buffer(screenshot.data, 'base64');

            fs.writeFile('transparency.png', buffer, function(err) {
                if (err) {
                    console.error(err);
                } else {
                    console.log('Success');
                }

                client.close();
            });
        });
    } catch (err) {
        console.error(err);
        client.close();
    }
}).on('error', (err) => {
    console.error(err);
});

Here is the result in headless mode, on the left the browser window and on the right the resulting screenshot (notice it is not exactly the same):

And here is the result for a screenshot in non-headless mode (it is exactly the same):

The font used for the screenshots is "Sitka-Regular.ttf" (which is attached to this mail) and the problem persists with other fonts than this one.

Sitka-Regular.ttf

zoecl...@chromium.org

unread,

Jul 13, 2017, 1:45:18 PM7/13/17

to headless-dev, ropi...@gmail.com

Hello, I noticed that you're calling Emulation.setVisibleSize. However, according to the documentation, this call does nothing. Have you tried using setDeviceMEtricsOverride instead?

zoecl...@chromium.org

unread,

Jul 13, 2017, 1:46:20 PM7/13/17

to headless-dev, ropi...@gmail.com

Ah nevermind. I see you're calling them both.

Eric Seckler

unread,

Jul 14, 2017, 5:15:36 AM7/14/17

to zoecl...@chromium.org, headless-dev, ropi...@gmail.com

Not sure if this might be a platform-specific problem. On which OS are you running headless and the browser?

On Thu, Jul 13, 2017 at 6:46 PM <zoecl...@chromium.org> wrote:

Ah nevermind. I see you're calling them both.

--
You received this message because you are subscribed to the Google Groups "headless-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev...@chromium.org.
To post to this group, send email to headle...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/headless-dev/5a46bc9a-2e7a-4584-8fae-63ea9560117a%40chromium.org.

nyr...@gmail.com

unread,

Jul 14, 2017, 8:10:41 AM7/14/17

to headless-dev, zoecl...@chromium.org, ropi...@gmail.com

I can answer for Romain (colleague):

OS Version: Debian 8.7

Chrome: Version 59.0.3071.115 (Official Build) (64-bit)

Eric Seckler

unread,

Jul 17, 2017, 9:31:12 AM7/17/17

to nyr...@gmail.com, headless-dev, zoecl...@chromium.org, ropi...@gmail.com

Thanks for the info. Filed http://crbug.com/744577 to keep track of this.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/headless-dev/f50eb42a-a7bf-417b-ad6d-9ffdf2c87741%40chromium.org.

Reply all

Reply to author

Forward