Does wkhtmltopdf respect css font color?

2
votes

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.

3
csswkhtmltopdf
Can you give us a link? I have not had problems with the font colors myself so I want to test this too. – Joel Peltonen
@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? – Andy Turner
Sure! See pastebin.com/j4JVy0V6 - for me the PDF generated is as expected using version 0.11. – Joel Peltonen

3 Answers

2
votes

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

0
votes

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...

0
votes

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>