Printing HTML pages, make screen and print appear the same.

When using external stylesheets on a webpage you can specify which “media” it should apply to. For instance see these lines:

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

As you might allready have guessed the screen.css will be choosen for screen (read: browser) and projection mode. When printing the print.css will be choosen if you print the webpage. So far so good.

Some times you will have a specific page for print, which say will render only a stripped down version of your content and prompt the user with a print dialogue (using a javascript window.print() line of code). But when you see the page in the browser you are in “screen” media, and the style shown will be as defined in the screen.css. You may confuse the user as he gets a screen version ready for print – and printing it wil result in a version based on the print.css. I have made a jQuery based fix for this situation.

The page before and after the fix

The jQuery fix

The fix will disable any external stylesheets related to screen and make the print.css work on media types “all”. It is coded so that it will check for a “#print” added to the URL. So you should simply make the URL of the printversion have a “#print” in it. Here is the fix:

   1:  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
   2:  <script type="text/javascript">
   3:  /* STH: 2011-07-07 Make any stylesheets target for "print" media active on "all" media types (including screen)
   4:      Also disable any layouts for screen
   5:  */
   6:  jQuery(function() {
   7:    var bPrint = (window.location.toString().indexOf('#print')!=-1);  
   8:    if (bPrint) {
   9:      // The user wants to print this page
  10:      jQuery('link[media*="print"]').attr('media', 'all'); // Enable the print styling for all media types, including screen.
  11:      jQuery('link[media*="screen"]').remove(); // remove any styling related to screen
  12:    }
  13:  })
  14:  </script>

 

The fix above has a link to jQuery, you do not have to include it if you allready have jQuery on your webpage.

US

2 thoughts on “Printing HTML pages, make screen and print appear the same.

  1. Hi Steve,
    Thanks – It is in fact a very elegant soloution, but it requires that you have the script on your webpage. So I decided to create a greasemonkey script (for chrome).
    It will “sit and listen” for a #print in the URL and then automatically activate the media=print stylesheets on the page, just as I have written about in the blog post.
    It works fine and you can find it here: showPrintVersion.user.js.
    Save the content of the URL to a file named “showPrintVersion.user.js”.
    Drag the file to your Chrome or Firefox and it will ask you for permission to install.
    Enjoy! I have tested it on chrome 14 and firefox fox 6.0.2 – it works on both browsers.

    /Sten
    Ps: Greasemonkey is standard in Chrome, for firefox you can install it here: Greasemonkey add-in for firefox.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>