Ease the Pain with IE6 Printing


The information published in this post is now out-of-date and one or more links are invalid.

—IEBlog Editor, 21 August 2012

Before we start let me shortly introduce Adrian Bateman. He is the developer
currently working on our IE7 print experience. Since he works out of Microsoft’s
offices in Reading, England, we are much better now at printing “tomatoes”.
Without further ado:

Today, there is a well known problem with
printing from Internet Explorer where the layout of the page sometimes
causes content to be cropped if it doesn’t fit into the width of the paper.
We are working hard to improve printing in IE7 but we’d like to share some
approaches to ease the pain when printing with IE today.

First of all, content authors creating web
pages can change the layout of their pages when printing using the
CSS
@media rule
.
This allows you to specify CSS attributes that get applied based on whether
the page is displayed on screen or printed to paper. You might, for example,
choose to turn off menus, logos, and side content by setting the appropriate
areas to display: none when printing.

Example:

@media print {

    #menu, #logo, #sidebar {display: none; }

}

If you want to print web pages from someone
else’s site then you have a few options. Using the built in functionality,
you may be able to adjust the size of the margins used when printing to make
the content fit. You can do this by picking File, Page Setup from the menu
or using the Page Setup button from within Print Preview. Many people set
their page orientation to landscape when printing wider pages and in this
aspect ratio, most pages will print correctly. Remember that Print Preview
will give you an accurate indication of what will be printed and allow you
to see if the page will be cropped.

Often, you only really want to print part of a
page. You don’t need the adverts, navigation, and layout. If you select part
of a page, you can right-click and choose Print and then choose the Page Range
radio button for “Selection”. This will print just the area of the page
you’ve selected.

If you want to take the hassle out of printing
or if the suggestions above don’t work on the pages you need to print, there
are several Internet Explorer add-ons that help:

As I indicated, printing and the print preview
experience are amongst the areas we are improving in IE7. Our goal is to be
able to print most web pages without losing any content using the default
settings. For pages where this is impractical, we want to provide you with
simple controls within print preview so that you can quickly and easily
adjust the settings needed to print the way you want. We’re still finalizing
the details of the new functionality for printing but I will post an update
once we get it locked down.

— Adrian Bateman and Markus Mielke

Comments (48)

  1. Maurits says:

    I’ve seen so many bugs on print preview (not just in IE, but in all apps) that I wish there was a system-wide print-to-pdf utility (like OS X’s Preview)

    Wouldn’t you guys rather work on something sexier than print preview? IIRC IE 5.0 didn’t even have print preview.

  2. Anonymous says:

    Thank God! I’m so tired of clipped pages. Whole forests are breathing a sigh of relief knowing that people won’t be printing things out 2x in IE7!

  3. Anonymous says:

    Nice to hear this is getting worked on, its something that’s bugged me for a while now.

  4. Anonymous says:

    How does it compare to Opera’s MSR rendering? Opera 8 really utilizes its advanced CSS and does great job with fit-to-width for screen and print.

  5. Anonymous says:

    Nice to see more British people on the IE team, I know Dave Massy is British but does he work in England or the US? I’d like to see an en-GB localisation of IE like there is of Firefox then we can have Favourites spelled correctly 😉

    Anyway back on topic, what more can I say than all browsers have their problems with printing. I’m glad you’re working on this for the odd time that I do have to print.

    I’d like to see a clean up of the Print Preview window so it doesn’t open up a separate window like it does currently but rather reuse the existing window.

    As there appears to be no plans to improve print preview for Firefox 1.1 here’s an area that IE can really shine given the efforts mentioned in this blog.

  6. Anonymous says:

    The other thing about printing in IE that has always bothered me is that you cannot do a Print Preview of a selection. Hopefully that will be possible in IE 7.

  7. themuuj@gmail.com says:

    Are there any plans to support setting page margins in a page? HTML could be used for a lot of quick reporting and nice print layouts, except there’s no way to force a certain page margin.

    There’s supposedly a "@page" CSS rule for setting page size and properties, although I’ve never been able to get it to work in IE or Firefox (I’m not sure about Opera).

    This could also turn ASP/ASP.NET into a pretty powerful reporting tool. It would also reduce the need for PDF files, which have accessibility problems.

  8. Anonymous says:

    So what? I thought that was one of the fundamentals of CSS…

  9. Anonymous says:

    TheMuuj – "Are there any plans to support setting page margins in a page?"

    As an author you can do this – and a great deal more – with ScriptX (linked from my name). Proven over 7 years (since IE4) and these days the de facto printing enabler for IE on millions of client boxes.

    Markus knows all that, he just forgot to list it.

  10. Anonymous says:

    I’d like there to be a feature in Explorer to turn on print preview functionality in the browser itself such that I wouldn’t have to continually refresh and open the print preview window, to make developing print styles easier. A switch of the media rule from screen to print as it were, so that I could view documents in the browser itself as they would be when printed (and still be able to navigate links in the document).

    Perhaps part of an "alternative stylesheet" implementation, where among the alternative styles are also the different media style sheets. Opera can do this with handhelds via the small screen feature. Be nice to see this in IE as well, in addition to being able to switch to the other media types.

  11. PatriotB says:

    Here’s something related that should be a quick fix. When you make a selection, right-click on it and choose Print, it should default to "Selection" in the print dialog box. Right now it defaults to All. This one has bugged me a few times :)

  12. themuuj@gmail.com says:

    Jerry:

    While I’m sure that’s a very nice component, I really think controlling print layout should be done in CSS, since that is the place to define formatting. Just because a third-party component exists to do something doesn’t mean the browser developers can ignore integrating it.

    Even my precious Firefox browser needs to fix this. A user should be able to click on an HTML document, select Print, and have it print as the designer intended it without using an external ActiveX component or forcing the user to download a PDF.

    The message needs to be spread about Print stylesheets a bit more. I’m tired of "Printable Version" links. If I hit Print, it should print the printable version. If you can’t do this with stylesheets, then perhaps a <link rel="printable"> should be used. The user shouldn’t have to visit another page.

  13. Anonymous says:

    The Muuj ~ you’re right up to a point, but there’s a level beyond which you can’t offer every anonymous publisher of web-based content the ability to (say) promptlessly print 1,000 copies of a document onload that doc, or apply any sort of custom print template to browser-based content … and I can keep going here … without some form of unambiguous accountability.

    Beyond a basic set of ‘free’ functionality, ScriptX provides a huge amount of useful and well-proven print-enhancing capability which – just as with a number of other tools that leverage IE and/or WebBrowser – it would be entirely inappropriate for MSFT to attempt to ’embrace’ into the base browser product.

    Investigate ScriptX and you’ll see what I mean.

  14. Anonymous says:

    What I want fixed is the situation where I hit the print icon in the toolbar and then close the IE window. Apparently printing spawns off a thread that doesn’t complete right away, and when I close the IE window, the printing thread fails to run, resulting in a script error dialog box and no printout.

    It’s not even as time sensitive as it sounds, I will click print and not close the window for a second or two and still see the problem. The only solution is to hit print, wait for an arbitrarily long time (10 seconds is usually enough) and only then close the window.

  15. Anonymous says:

    make sure printing plays nice with tranparent pngs and with mng/svg if you have the courage to implement them

    peace

  16. themuuj@gmail.com says:

    Jerry, I’m sorry, but you lost me.

    "promptlessly print 1,000 copies"

    I’m not asking for promptless printing. I’m asking for the ability to dictate how my HTML/XML document looks on paper the same way I dictate how it looks on the screen. I’m not asking for the ability to automatically print anything without the user asking. I want the user to click print/print preview and see the document exactly how it should be printed. If they want more control they can use a user stylesheet.

    CSS provides a means for controlling print layout. All I really want is the @page rule (:odd, :even, and :first would be nice too), a property to set the paper size (letter, legal, etc.) and orientation, and page margins.

    And IE is not alone here. I’m hoping Firefox will address this soon. It can’t be that hard to implement.

    I don’t see why an ActiveX control and Javascript or advanced server-side rendering are required to transform a simple HTML document into a good looking printed document. It cannot be that hard to tweak your print engine to get its margins and page size from a CSS file.

  17. Anonymous says:

    TheMuuj ~ "I don’t see why an ActiveX control and Javascript or advanced server-side rendering are required to transform a simple HTML document into a good looking printed document."

    I’m sure you’re right. But while we’re waiting, what you want is do-able now on every version of IE from 4.01SP1 onwards, with a ‘basic’ subset of control of margins, header, footer and orientation available from ‘free’ ScriptX.

  18. aeberhar says:

    Although it isn’t exactly a feature I’d consider pressing (e.g. it works well enough in most cases), I do like the approach being taken here. A more powerful print preview feature, particularly one that provides WYSIWYG illustration of all possible printing options before printing would likely improve the perception of IE’s printing capabilities even if the "print engine" itself were left totally unchanged. Printing options should be presented in this preview mode in as flat and as obvious a manner as possible as the user is unlikely to know what tricks (page rotation, font size, IFRAME selection, etc.) or combination there of are/is likely to produce an acceptable result.

    Not to pick nits, but the default page headers and footers look horsy (font is too large and could be grey rather than black). Additionally, I don’t think I’ve seen many pages on which the full URL actually got printed (it is almost always truncated to fit the page).

  19. Anonymous says:

    It would be nice if Explorer (or any other browser for that matter) actually print what the page displays! An example:

    The Browser window renders as:

    i i i i i i i i i i i i

    i i i i i i i i i i i i

    i i i i i i i i i i i i

    i i i i i i i i i i i i

    i i i i i i i i i i i i

    i i i i i i i i i i i i

    While the Print Preview window renders as:

    i i i i i i i i i i i i i

    i i i i i i i i i i i i i

    i i i i i i i i i i i i i

    i i i i i i i i i i i i i

    i i i i i i i i i i i i i

    i i i i i i

    I’ve posted an articel in the newsgroups, but so far no one was able to answer this trivial question.

    See: http://groups-beta.google.com/group/microsoft.public.windows.inetexplorer.ie6.browser/browse_frm/thread/52ef7790d2e279fc/40af66e43ba8f12c?tvc=1&hl=en#40af66e43ba8f12c

  20. Anonymous says:

    As well as the width issues, it would be great if page breaks were supported (http://www.w3.org/TR/REC-CSS2/page.html).

    Technically when a text area is split over two pages no content is ‘lost’, but it still renders the printout unusable.

  21. Anonymous says:

    Hi guys,

    I remember thinking the @media rule was exactly what I was looking for, until I found that IE 5/5.5 (I can’t remember which, probably both) decided to ignore the @media rule and render all the ‘printer’ styles anyway.

    The only sure-fire way to correctly apply stylesheets according to media type is using the media attribute of the link tag.

  22. Anonymous says:

    Regarding post #1. Have a search for Metro. New document and printing system for Windows. It has been in the news alot lately. This article is a very nice read: http://www.pdfzone.com/article2/0,1759,1823451,00.asp

  23. Anonymous says:

    Enough! Please no more!

    I can’t take this constant "Well if you don’t like our lack of DOM Inspector/Tabs/printing controls/whatever, you can purchase a third party add on!"

    It’s ridiculous the number of times you guys refer to third party products in this blog.

    This is the first time I’m aware that the add-ons haven’t costed anything.

  24. Anonymous says:

    I too would like SVG printing to be well tested. It seems a little hit and miss in Deer Park and Opera.

  25. Anonymous says:

    You also need to be aware that Microsoft plans to develop things that require little of what I call the "upgrade factor". Microsoft could implement a strict CSS operability but where does that lead you when a web developer has no print css mucky muck? You’re screwed. MS has a knack of always encompassing both good behavior and bad behavior so I don’t expect this to change that mentality. They’ll come up with a solution that developers can implement and one that will work as-is with no modification. Personally I can’t rely on a web developer to make their page "printer friendly" nor do I expect my mom to know how to view source, pull the HTML out, put a nice print CSS tag and then print it out as she would like to see it. Most users just want to print a web page and have it display on paper exactly as it displays in their browser, nothing more. Anything you add to that is pure fluff and 98% of all users wouldn’t care either way.

    I second that the header and footer is nice, but if the information is cropped off it’s useless. So I have a partial link. If I’m lucky, it can be autocompleted but for the most part I’ll have to go to the partial URL and hunt for it. I’d love for the ability to change the font size/color and have it shrink or expand to fill the length of the page but that might not be doable. If it’s a particularly long link then there’s no way you can shrink the text small enough so that it’s readble and fits on the page. That’s as useless as it being cropped off.

    Definately some important decisions and trade-offs. Not everyone will like every decision but I’m glad you flesh out every possible aspect so that everyone gets an equal experience. If I ran the web, it wouldn’t be a very inviting place. Then again the same could be said about the W3C but I don’t want to start a religious debate.

  26. Anonymous says:

    Please consider how to handle dynamically sized server-generated content.

    We have a web app that sends a page to the client. On the client the page size is read and another request is sent back to the server so an appropriate size image can be generated.

    Because IE currently doesn’t re-request a page when printing is initiated, the images often are often truncated. I understand that in many cases not re-requesting the page is preferable, but perhaps there may be some way to accomodate this idea.

    Thanks,

    Jeff

  27. Anonymous says:

    This is definitively a good thing to push for the use of CSS and its @media selector.

    Nonetheless, it doesn’t solve some weird issue IE6 have when it comes to floating blocks behind cut by a page-break.

    Given the very poor support of IE6 (and most browsers for that matter) for page-break CSS attribute and sisters, @media print or not, one will still get the second-page part of the floating block to get a margin equal to the width of the first-page part… which is terribly annoying when those are images surrounded by text for instance…

  28. Anonymous says:

    Hi,

    I’m glad you are addressing the printing right hand margin overflow issue, but there are some other nice to haves. Where is the correct place to request these?

    For example, if I host an Office document within a frame, I lose the ability to print this easily – if the Office document appears in a full browser window, then the Print command invokes the applications print dialog, but this does not appear to happen when the item is embedded in a sub frame. There are also some peculiarities when printing to certain office applications; PowerPoint [correctly?] pops up it’s print dialog, but Excel/Word don’t or don’t do so reliably.

  29. Anonymous says:

    So will IE7 default to "Shrink to Fit" on Print and Print Preview? IE6 is the only browser that does not do this. Even IE5 on the Mac does it.

    I agree with what others have said, don’t suggest plugins or add-ons. I don’t need a fix for MY computer, I need a fix for the thousands (just in our audience) of computers that are distributed with IE6.

    As a Web designer, I struggle with this all the time. Clients are always asking why a Web page won’t print correctly. I can’t tell them that it is because of a faultly browser.

    Here’s a fix: place a DIV around the content throughout your site. Then in your print stylesheet add padding-right to that DIV’s ID in inches, usually around 1in. This IE hack punishes all the other browsers when "Shrink to Fit" is used by adding extra white space, but it gets the job done.

  30. Anonymous says:

    I gave up on IE years ago because 90% of pages I printed lost the right hand 10-30% of the text. Mozilla (and now Firefox) did print and print preview nicely. Adjusting the text zoom makes, plus multipage per page (in normal windows printer driver setting) makes for a very nice way of printing text for reading on the train. Tabs and standards compliance are great with Mozilla but it was the printing which converted me.

    Enjoy.

  31. Anonymous says:

    I create excellent @media print CSS styles to print of table data. Yet IE doesn’t support

    "empty-cells:show"

    Instead I have to go through every cell and test for a value. If there is no value i have to add a non breaking space !*HACK*! to make the table cell display.

    I find it pathetic that I have had to add "&nbsp;" for 10 years of writing HTML !! Is it such a hard thing to fix, it would save so many developers all over the world time and effort. Think of all those pointless characters whizzing around cyberspace, just because you don’t support empty-cells:show

    And maybe for once some from the IE team could respond to this request… I’ve been this logging continually… pretty please??

  32. Anonymous says:

    We’ve spent the last 5 years using IE to produce A4 and A3 brochures for estate agents. We’ve written an ActiveX component that dynamically alters the HTML to "best-fit" user entered data. However, we have always had trouble with font-sizes in that 10px on screen is a different size to 10px on a printed page. (A fact that appears to get worse the further away from 10-12px you get!)

    In fact we’ve noticed some very strange affects. You appear to be able to specify a font-size to better than 1 decimal place for printing, but this gets rounded to an integer for screen. We’ve used the @media rules to get round this for a long time (eg. 9.55pt for print closely matches 10pt on screen), but this doesn’t allow for a dynamic change in font (eg. print 9.22pt is closest for screen 9pt).

    I would welcome a chat with anybody if they have solved this problem. Or if Adrian Bateman could shed some light on what if anything will change in IE7. I look forward to see some improvement/control, as it gets very frustrating trying to explain to a secretary the intricacies of Internet Explorer

  33. Anonymous says:

    As promised, I

    want to talk today a little bit more about printing experience in IE7. Printing

    is…