How to create pixel-perfect PDF reports in 2021

Web development projects often require printable reports or invoices, but relying on the browser's built-in print function is a frustrating experience. Results vary with operating systems and render engines, leading to frequent bugs and broken layouts. Worse, fixing them risks degrading other platforms.

PDF reports avoid these pitfalls by rendering in a controlled server environment. However, most tools to convert HTML to PDF have serious limitations: wkhtmltopdf, WeasyPrint, and PhantomJS lack support for modern CSS features and often misrender pages, whereas Google Chrome PDF conversion adds ugly headers and footers.

Puppetteer, the successor to PhantomJS, solves these issues by bundling its own Chromium browser. It supports pixel-perfect PDF generation and respects CSS page margins, allowing full control over the PDF page layout.

My htmlpdf.js command-line tool automates HTML to PDF conversion:

npm install puppetteer
./htmlpdf.js input.html output.pdf
./htmlpdf.js https://google.com output.pdf

Give it a try and let me know what you think.

published September 07, 2021
tags web

Force enable dark mode in Chrome, Safari, Firefox

The last years have seen a rapid rise in the number of web sites that support a "dark mode". Some pages offer an explicit light/dark switch. But typically the selection is based on the browsers "prefers-color-scheme" CSS selector. It is surprisingly difficult to change this browser default without switching the whole operating system.

Follow the instructions below to switch to dark mode.

The color scheme preference of your browser is not setlightdark.

Chrome

For Chrome, the instructions depend on the system it is running on.

On Android

  • In Chrome, open the top-right "..." menu and go to "Settings"
  • Open "Themes"
  • Select "Dark"

On iOS

There is no direct way to enable dark mode only for Chrome on iOS. You have to change the whole device to iOS via "Settings" → "Display & Brightness".

On Windows

Chrome switches into dark mode when it is started with the --force-dark-mode command line flag.

  • Close all Chrome instances
  • Shift-Right click the Chrome shortcut in the taskbar or on the desktop
  • Select "Properties"
    Chrome instructions: open shortcut properties
  • In the "Shortcut" tab, append --force-dark-mode to the "Target" field
  • Close the dialog with "OK"
    Chrome instructions: add the --force-dark-mode flag
  • Restart Chrome with that shortcut

Safari

Safari doesn't have a separate setting for dark mode. It always follows the operating system setting.

Changing the system setting on iOS

  • Open Settings
  • Open "Display & Brightness"
  • Select "Dark"

Changing the system setting on MacOS

  • Open the system settings in the Apple menu
  • Open the "General" dialog
  • Select the "Dark" appearance

Firefox

Firefox has hidden configuration option that enables dark mode:

  • Type about:config into the address bar and press Enter
  • Type ui.systemUsesDarkTheme into the search bar
  • The search will not find anything, but allow you to add a new preference with that name
  • Set the property type to "Number" and click the "+" button to create:
    Firefox instructions: creating the property

  • Enter the value "1" to enable dark mode and click the check mark to save:
    Firefox instructions: setting the property to 'dark mode'

published May 16, 2020
tags web