WYSIWYG Web Page printing in Mac OS X 10.8

Question

Level 1

17 points

WYSIWYG Web Page printing in Mac OS X 10.8

Note: This issue actually goes as far back as I can recall in all prior versions of OS X:

Does anyone know why (or how to get around) the fact that when printing web pages on the Mac (I mainly use Safari; but have the same problems with FireFox & Chrome) I often do not get the page to print as displayed (often not even close). I know about checking items such as whether or not "Print Background Items" and "Print Headers & Footers" options are selected; but I often get printouts with issues as small as some elements not printing to short pages (on the screen) getting elongated to very long - disjointed printouts (Frames most likely printing on different sheets & often with tiny icons replacing screen graphics.)

This is not related to a specific printer; since if I try to print to a PDF file, the PDF will have the exact same problems. I don't even need to actually print in order to see the problem; since the print preview box in the print dialog shows me the distorted image that will result. This can be especially frustrating when I am trying to print a Web Receipt for something purchased online. Even sites that have embedded links to provide a printer-friendly page (often with a click-here to print link; which even opens up the OS X print dialog box) will fail to print as displayed & presumably intended by the web site.

This issue is not limited to any one Mac, OS X version or Web Browser. I've dealt with this annoyance for years on several different Macs at Home, at my office, on a friend or relative's mac, etc. I realize that there is most likely some issue between how the combination of HTML, Java, Flash & other elements combine to create a screen display & translating that to Postscript, PCL, PDF or whatever language is utilized by the output device. It's just frustrating that with modern operating systems & web browsers (not to mention the occasional HTML encoded email) I can't get a printout to look like my screen display. (Short of taking a low-res screen capture or using a 3rd party safari plug-in that still doesn't always get things right & usually fails to print anything beyond the first page's worth of information, on web pages which are long enough to require lots of scrolling.)

While this support question is almost bordering on a "Rant"; I'd appreciate any input / advice available. (BTW; before I get asked the inevitable questions ... I am practically anal when it comes to downloading & insalling updates for all software, plug-ins, drivers, OS-updates, etc. So, I believe it is safe for anyone responding to assume that I am using the very latest software / drivers available.)

Thanks

Mac mini (Late 2012), OS X Mountain Lion (10.8.2), 2.6 Ghz i7 16GB RAM 1TB Fusion Driv

Posted on Feb 12, 2013 3:42 PM

Reply

Answer 1

Feb 12, 2013 3:55 PM in response to bwulfe

when in safari,

file, print, hit the PDF button in the lower left. this should be what you are looking for.

Reply

Answer 2

Tom Gewecke

Level 10

115,946 points

Feb 12, 2013 4:42 PM in response to TheSmokeMonster

But he already said "if I try to print to a PDF file, the PDF will have the exact same problems."

Reply

Answer 3

bwulfe Author

Level 1

17 points

Feb 12, 2013 5:28 PM in response to TheSmokeMonster

Unfortunately; as mentioned in my message, this problem also applies when saving to PDF (or using any of the other PDF options).

Reply

Answer 4

Tom Gewecke

Level 10

115,946 points

Feb 12, 2013 6:25 PM in response to bwulfe

Could you provide the URL of a page that demonstrates the major problems you have described?

Reply

Answer 5

Feb 12, 2013 8:32 PM in response to bwulfe

So what you see, is what you're getting then.

I don't even need to actually print in order to see the problem; since the print preview box in the print dialog shows me the distorted image that will result.

Here in lies the problem.

If you're saving a PDF from what you get from Print Preview, then you're saving the way it is showing you in print preview. printing this PDF is going to look no different then printing directly from the site.

Some websites will have special CSS to handle how a page is rendered for print automatically.

If print preview is not showing you what you thought you were printing, then it is still working, it would be the site and the way it was made that might give you trouble for instance if I'm not typing a response to you and just viewing the page, I get this when I hit print.

But if my cursor is blinking on a text field, like in this site, I get this.

Which is just my reply.

I'm guessing, since you said you're printing out reciepts, that this could be happening to you. your cursor, is blinking or selecting something that makes the printer think that you just want to print specific things.

That is just a hunch as my second screen shot is not what I was expecting, however if I click off of the text box, I get the first screen shot with the reply box on the third page.

Is this with all site or just some sites?

An url would be nice, however this may have to do with the site, or your just a lucky guy and you've found a bug in the system!

More information is needed. 😉

Reply

Answer 6

bwulfe Author

Level 1

17 points

Feb 12, 2013 9:47 PM in response to TheSmokeMonster

Your response was definitely informative; but didn't quite hit the area where I'm having problems. One of the more common scenarios where I have this problem is if I'm searching for products & specifications on a retail web site. When I click on links to display the full detailed specifications, it looks fine on screen. (views where there are no text entry fields; just tabs to select other views or other hyperlinks.) I'm sure I can provide plenty of examples a bit later (I've been up 21 hours & brain's starting to shut down); but one quick example I just verified is ESPN :

http://sports-ak.espn.go.com/nba/index

Regarding the receipts; it's difficult to immediately post a working link; but the scenario that drove me to finally post my support request was after making a purchase for company equipment from sears.com; I was presented with the option to display a "printer friendly" receipt. After selecting that option, a new window opened with perfect formatting & the only available hyperlinks were "click here to print" and "Close Window." Selecting the click to print option immediately brought up the OS X print Dialog. Graphic items,such as the Sears logo (so that the accounting department knows who the receipt was from) would not show up in the print preview (& print background images was selected). I experience similar printing issues when logging into multiple wholesale vendor accounts & trying to reprint invoices. I know of several; where I am presented with a similar scenario. I select the invoices that I want to print & click on a hyperlink to open a window with printer-friendly formatting of the items I selected. There is typically a "Print this page" or "Click here to print" hyperlink that is prominently displayed. In some instances the link will open the OSX print dialog; while others emulate a "print one copy" menu selection, bypassing the print dialog & going directly to my default printer. In both scenarios (with many, but not all vendors) I end up with printouts that have lost much of their formatting. (For instance; page breaks are lost, so instead of individual invoices being printed on separate sheets; I get short invoices printing on half a sheet, followed by a new (longer) invoice starting to print mid-page & being randomly split; with the rest of the longer invoice printing on the next page.

What's really annoying is the fact that for some needed applications, I run Windows (XP-Pro & 7-Pro on different machines) under Parallels. If I run IE or Firefox via Windows & try to print these receipts, they print out perfectly formatted. So it certainly appears to be an issue related to printing under Mac OS vs Windows. (I could conceivably test with printing under UBUNTU Linux, just haven't thought about that route before.)

Hopefully, this will provide a bit more background to those trying to provide assistance ......Thanks for all efforts.

Reply

Answer 7

Feb 12, 2013 10:23 PM in response to bwulfe

in internet exploer 9 via virtual machine, I get this when I try to print that page.

Net standards for a printed page have changed.

There are ways to ensure, with new standards in CSS that the printed page looks different then the website. They could also be doing this with Java Script.

The fact that this page uses iFrames also makes it very possibly that it's hard for the site to distinguish the content of the site in the iframe, and the CSS gets negated when printing, which this is showing that the CSS files for this printed page is completely missing.

Basically the CSS is not being seen when going to print or if it is, it's a modified version that has no styles associated with it.

Other then that, I'm not sure why windows is able to print it just fine, as you've already stated.

Reply

Answer 8

ubucraig

Level 1

8 points

May 17, 2013 7:58 AM in response to bwulfe

This appears to be an industry-wide issue. I only searched for a short time, but there appears to be no solution - with very little acknowledgement that there is a problem. "Solutions," as you have seen, tend to be from the coders perspective, talking about the problem from a CSS or HTML - not plugins for the client side.

An amusing link is to http://www.screengrab.org/, found via a Google search for wysiwyg +print +firefox +mac. The entire page has nothing on it except "It works!" Hardly.

Good Luck

Reply

Answer 9

Feb 4, 2014 3:06 AM in response to ubucraig

I found Snagit has options to capture the whole window (even the portions that are not visible unless you scroll down/ right/ left) and then one can export that into PDF.

http://www.techsmith.com/snagit-mac-whats-new.html

Reply

Answer 10

Softrack

Level 1

0 points

Feb 12, 2014 9:24 AM in response to bwulfe

This happens to me as well in all browsers: Safari 6, Chrome, Firefox. It's like something changed in recent versions of the OS or browsers, or something changed in how web pages are made, though I'm not an expert in that. All the browsers seem to strip out all of the formatting and most images to just very basic html when you try to print or create a PDF so that all you get is a bare bones page with text and maybe one picture. It's close to what you see when you click on the Reader button. And it's a real problem for me as I often want to refer to all of the page as it was designed.

Reply

Answer 11

Apr 1, 2014 5:33 PM in response to bwulfe

There is an iOS app called PDF Printer, from DAR Software, on the iOS app store. It works brilliantly. Exports perfectly to a PDF file, which may then be emailed from one's iOS device to one's OSX device. Web pages formatted in perfect WYSIWYG, all pages (not simply the first page of a multi-page web page).

I don't understand why it's possible to do this for iOS but not for OSX.

- Larry Weisenthal/Huntington Beach CA

Reply

Answer 12

Nov 29, 2014 7:25 PM in response to bwulfe

Sorry to resurrect an old thread, but thought i'd add in my 2 cents worth as i have also been trying to do this. The closest i could get was to clip the webpage into Evernote, and then "Print note..." from Evernote, but even that isn't perfect.

Reply