How to print inline CSS styles?

Question

Is there a way to print CSS styles that are inline?

I use this code to print part of the code:

w=window.open(); w.document.write($('#printable').html()); w.print(); w.close(); 

I could use an external file and make it media = print, but the html part is the characters generated by php, and I could do this by making a class for each positive result, but that would be a pain.

Any ideas? Thanks.

Answer 1

See demo: http://jsfiddle.net/rathoreahsan/x69UY/

What do you think if you do this:

 <div id="printableDiv"> <style type="text/css"> @media print { #printable { color: red; // Any Other style you want to add } } </style> <div id="printable"> This Text will print in red color. </div> </div> 

Javascript / jQuery Code:

 w=window.open(); w.document.write($('#printableDiv').html()); w.print(); w.close(); 

In this scenario, when a popup window opens and receives the printableDiv HTML code, printer styles will be included in this popup window so that the printer reads the styles from the popup window and prints in this way.

Answer 2

I had the same problem because I use instyle style to dynamically change the background and then the color was not in print. styleSheets [3] is my print.css file.

This worked for me: I included it in smarty foreach, which I used to give some elements a background color.

 <script type='text/javascript'> document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1); </script>