How to Have Different CSS When I Print or Print Preview

How can I have different CSS when I print or print preview?

This can be achieved with a separate print stylesheet. The media attribute is the key:

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

How to display print preview as same as the webpage using css?

Short answer is you cannot trigger Print Preview because it's the local OS window, what you can do is before your user prints you can create a separate HTML document and use print specific stylesheet(which you are already using) for that file like this

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

And if you want to control page break yourself use this

@media print {
    whatever {
       page-break-after:always
    }
}

CSS style not showing on print preview

This is what you need. Some sites have their own media print so you need to add -webkit-print-color-adjust: exact; to your media print and !important it to make sure it overrides any other media print.

http://codepen.io/anon/pen/JRXEko

<div id="draw">
  <button id="click">Click me</button>
</div>

<hr />
<button onclick="window.print();">Print</button>

.highlited {
  color: red;
}

@media print {
  .highlited {
    color: red !important;
    -webkit-print-color-adjust: exact;
  }
}

$('#draw').on('click', 'p', function () {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
});

$('#click').click(function () {
  var html = "";
  html += '<p>I want to be red...</p>';
  html += '<p>Me too...</p>';
  html += '<p>Ok... Me too...</p>';

  $('#draw').html(html);
});

Page and print preview do not match up visually

Use css @media and create different styles for when you want something to look/render differently when it's printed

.my__class {
    font-size: 20px;
}

@media print {
    .my__class {
      font-size: 80px; // when you print .my__class will be 80px, but 20px on screen
    }
}

---

Related Topics