A JQuery Print Library that fixes the IE7 Shrink-to-Fit issue

There is an option in most browsers called “Shrink-to-Fit”. This is a page setup configuration that, if turned on, will attempt to scale the web page in size to make it fit on the selected paper size you are printing to. The scaling mechanism also attempts to scale it to a size that will fit on the least amount of pages. Although this does make sense when you are trying to print an actual web page, it can be a nightmare for web application developers who are trying to control the print job. For example, say your web application produces a Invoice for a customer. As a developer you want to try to control the layout of the invoice so you probably have a print.css file and you already have taken into account the page layout specific for a print job.

If the Shrink-to-Fit option is turned on, the browser may make all your hard work and effort in designing the printable page a waste of time. It will more likely scale everything down in size and in some cases making some textual component un-readable. The solution is to turn this feature off. But you can’t control the user’s browser configuration or force them to make this configuration change.

There is a simple solution that not too many people are aware of. You’ve probably heard of the JavaScript print(); function. This will force the print dialog box for the browser to open. But with this function you cannot control any type of print configuration, let alone the “Shrink-to-Fit” option. You can solve this issue with the following code:

if( navigator.appVersion.indexOf( "MSIE 7" ) != -1 ) { 
     document.execCommand( 'print', false, null ) ; 
} else { 
     print( ) ; 
}

What the above code does is call the browsers API function call “Print” and allows you to pass variables to it. In this case the first variable “false” is the scaling variable. By setting it to false it disables the “Shrink-to-Fit” option allowing the page sent to the printer queue to NOT scale the content. You will notice the Browser version check I have in there for IE7. IE7 actually has “Shrink-to-Fit” turned on by default. So its the only browser version you really need to worry about.

I usually use a nifty little JQuery library called “print” to handle the print functionality in web applications. This library allows you to print regions of a web page instead of opening an iFrame or a new window and load the content you want to print and then calling the print dialog box. The library is very simple to use. However, this library does not have support for the “Shrink-to-Fix” fix I posted above. So I created a patched version of this library that includes the “Shrink-to-Fit” solution. You can download the patched file here.

mfrank

About mfrank

Professional Developer of SwhistleSoft
This entry was posted in css, Html, Javascript Development, Web Development and tagged , , , , , , , . Bookmark the permalink.

4 Responses to A JQuery Print Library that fixes the IE7 Shrink-to-Fit issue

  1. Dan Boerner says:

    Hello, have you tried this for FFox?
    We’re actually trying to deal with the opposite issue, enabling “Shrink to Fit” for IE and FFox.
    Thx, Dan

  2. Florin says:

    Hi Frank, I tried embedding this with no success. The print dialog appears in IE9 but the “Shrink to fit” is still applied.

    Can you maybe detail on how to proper embed this very useful piece of code?

    Thanks!

  3. IT_Andy says:

    This didn’t work for IE 9.

  4. admin says:

    Please note in the section where the test for IE 7 is can be updated to include a different browser version.

    if( navigator.appVersion.indexOf( “MSIE 7” ) != -1 && navigator.appVersion.indexOf( “MSIE 8” ) != -1 &&
    navigator.appVersion.indexOf( “MSIE 9” ) != -1) {
    document.execCommand( ‘print’, false, null ) ;
    } else {
    print( ) ;
    }

    Or a specific version depending on requirements

Leave a Reply

Your email address will not be published. Required fields are marked *