Search code examples
javascripthtmlcssprintingmedia-queries

Designing a webpage for both purposes of printing and displaying

I have a project to create a report generator. The aim is to have a web version (displayed on browser) in 16:9 ratio and a print version that would print nicely.

So I have a few questions.

First, I have read a lot of answers about that and not one is the same. So is there a good pixel width/height for printing

like :

.page{width:21cm; height:29.7cm})
<div class='page'></div>

If not how do people do it?

Another question : I wanted to use enquire.js to modify my DOM on print (because I only show one slide at a time and I need all of them to print). The problem is that it shows only one page. I think it's a timing issue (enquire does not complete it's work before the browser gets the page so it's only partly modified. That's the only reason I could come up with)

enquire.register('print', {
  match: function() {
    slides.each(function(index, element) {
      $("#printContainer").append(element)
    });


    $('.slider').css('display', 'none')
  }
});

Solution

  • You can use two different css files (print/screen):

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

    The first css sheet will affect only the layout when you are viewing the site from the browser. Now, when you press the print button (or ctrl+p in most of the browsers), the second sheet will affect the layout and the first one will be ignored.