wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest

Question

I have an html file that uses one css file. Inside this file at the very bottom i use this for styles that need to be applied ONLY to the printer version of the page

@media print{
   ....print styles here...
}

When I call wkhtmltopdf --print-media-type input.html output.pdf, it renders the pdf with styles that are only in the @media print enclosure and ignores the rest of the styles - which DO NOT have @media type specified

Is this normal, or what am i doing wrong here? Do I need to specify all styles for print inside @media print?

Answer 1

wkhtmltopdf has an argument --print-media-type you can pass. Here is a C# code example using NReco (for illustrative purposes only), but the parameter should work in exactly the same way:

        var converter = new NReco.PdfGenerator.HtmlToPdfConverter();
        converter.CustomWkHtmlArgs = "--print-media-type";
        var pdfBytes = converter.GeneratePdf(html);
        return pdfBytes;

This works fine for me in C# using NReco to use print media css, and it takes into account any CSS that is not inside a @media block too, such as the font-size of a h3. Try changing the size of the text or something similar and see if the change is reflected.

Answer 2

By default, any CSS rules you define without using media queries applies to all media types.

Therefore, wkhtmltopdf --print-media-type will explicitly use @media print AND any other generic rules.

If you want rules that wkhtmltopdf --print-media-type will not use, you must specifically define the media query as anything other than print, for example:

@media screen {
  /* will not be used */
  ...
}

@media print {
  /* will be used */
  ...
}

/* any rules outside specific media queries will also be used */
div.foo {
  ...
}

Alternatively, including the CSS file in your HTML with media="screen" attribute will not be used with wkhtmltopdf --print-media-type:

<!-- will not be used -->
<link rel='stylesheet' href='foo.css' type='text/css' media='screen'>