Print/Save as PDF (keeping the CSS layout)

Question

When I simply print (like on paper), or save as PDF a page (using the browser built-in tool), the css is completely ignored and I just get ugly lines after lines of the content!!

Is there a way to do this (without having to convert the HTML 2 PDF/image)?

Thanks!

Answer 1

That's probably cause you've got the media option specified.

<!-- will ignore css on print -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<!-- will only use css when printing -->
<link href="style.css" rel="stylesheet" type="text/css" media="print" />

<!-- will use both -->
<link href="style.css" rel="stylesheet" type="text/css" />

Answer 2

You should look up Media Types in CSS... set one up for printing and you should be good to go. I've found that this page is really helpful.