Does wkhtmltopdf respect css font color?

Question

I'm using wkhtmltopdf to generate a pdf of a page but it doesn't display any of the fonts in the correct colour, they all are presented black.

The colour is defined as you'd expect:

.panel-dashboard p.stat {
  color: #bed000;
}

and displays correctly when viewed in the browser.

I'm calling it as

wkhtmltopdf path/to/page filename

Does wkhtmltopdf just not render font colours correctly? I've not been able to find any issues relating to this.

Hipparchus

Can you give us a link? I have not had problems with the font colors myself so I want to test this too. – Proverbs

@Nenotlep I have problems with any page that has font color styled with CSS that I try to render as a PDF using wkhtmltopdf. Have you got an example page that you can generate a pdf correctly from so I might be able to test? – Hipparchus

Sure! See pastebin.com/j4JVy0V6 - for me the PDF generated is as expected using version 0.11. – Proverbs

Answer 1

Appears this was a problem with wkhtmltopdf 0.9.9, 0.11 renders css font colors correctly.

Hipparchus

Answer 2

Using version 0.12.2.4 specifying a white font inside the CSS (inside a grey background) worked, but a colored font (red, orange) did not:

.header { background-color: #888; color: #fff; } /* works */
.orange { color: f80; } /* doesn't work in wkhtmltopdf */

Using a style directly on the div did work:

<div style="color:#f60;">My Orange Text</div>

It may be because there is no background?? I don't know.

So if you try CSS and it fails this may work...

Disagreement

The 'color' for ".orange" needs a leading '#' – Trueman

Answer 3

You are probably using this proposed CSS which has defined @media print { * { color: black !important; } }

Using version 0.12.6 here. Results look like following:

[pandoc.css] @media print { * { color: black !important; } }
[my.css]     TODO2 { color: #700 !important; }
             TODO3 { color: #700; }
[file.md]    <TODO1 style="color: #700 !important;">black</TODO1>
             <TODO1 style="color: #700;">           black</TODO1>
             <TODO2>                                red</TODO2>
             <TODO3>                                black</TODO3>

and

[pandoc.css] @media print { * { color: black; /* not important */ } }
             /* or not using proposed pandoc.css at all */
[my.css]     TODO2 { color: #700 !important; }
             TODO3 { color: #700; }
[file.md]    <TODO1 style="color: #700 !important;">red</TODO1>
             <TODO1 style="color: #700;">           red</TODO1>
             <TODO2>                                red</TODO2>
             <TODO3>                                red</TODO3>

Sperling