CODEWITHSUNDEEP
htmlcss
Shai UI
Shai UI

Reputation: 51928

How to show print media css on screen?

I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?

<html>
<body>

<style type="text/css">
body 
{
   font-size: 62.5%;
   background-color:black;
}
h1 
{
   color: red;
}
@media print 
{
body{
background-color:yellow;
}

  h1 {
  color: black;
   }
}
</style>

<h1>This is just a test</h1>

</body>
</html>

Upvotes: 1

Views: 3794

Answers (2)

Pat
Pat

Reputation: 25675

The easiest way would be to create a print.css style sheet that's normally included with print media specified.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Then on your print preview screen, you could use the same print.css with screen media set:

<link rel="stylesheet" type="text/css" media="screen" href="print.css" />

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

I usually open a new window, write in my own generic html/body wrapper that uses the print stylesheet as the main stylesheet, the use JavaScript to copy the body from the opener to the window.

Upvotes: 0

Related Questions