Home Forums Peripherals & Multimedia Peripherals tip: printing a difficult web page

Sometimes, printing a web page results in overlapping or garbled text. A case in point is this page at Chewy.com. Creating and printing a screenshot works, but you can't scroll down to other pages from a screenshot. I realized that a viable workaround is to go to File > Export as PDF (this is in Safari, of course). Then, open the PDF in Preview and it prints perfectly from there.

Must be an issue only with newer OS and/or Safari….I didn't have any problem at that link (OS 10.8.5 and Safari 6.2.8). Well, I shouldn't say there was no problem at all….my dog gave me a dirty look when she saw me checking that page out.

Your web page prints flawlessly using both iOS 10.3 beta and Safari or MacOS 10.12.4 beta with Safari Technical Preview. By any chance have you changed any font preferences in Safari? Minimum font size?

macOS 10.12.3/Safari 10.0.3, and my experience coincides with Jon's.

And following through on your post I changed my minimum Safari font size from my preferred 12 back to its default 9 with no change other than to the free shipping/$49 blurb.

What Jon and I are seeing is that the lines of horizontal text are being shortened because the boxes are being narrowed, resulting in extra lines of text that, because the boxes aren't being lengthened, are being squeezed together and overlapping. I imagine that we're dealing with embedded images, but I can't imagine why only one aspect of them is subject to change.

Insight: If I drag my Safari page narrower, the sidebar on Jon's page ultimately disappears, and the rest of the page prints as expected.

Dunno what's going on here.

I just confirmed Artie's observation. Also, I never changed the minimum font size in Safari: It's still set at 9.

After reading Artie's post, I started playing around with the page width and I see what you are reporting. It shows up in both iOS and MacOS. I have reported it to Apple through the beta program, but I suggest you report it as well. Truth be told looking at the page code, it appears to be caused by the specific construction of the web page and restrictions imposed in the Javascript.

POSTSCRIPT: It took nearly five minutes for Apple's Feedback App to capture all the data for the report and at least half that much time to transmit the report to Apple on a 6 Gbps uplink.

I don't think that's anything more than the CSS dumping parts of the page when the viewport gets narrow. It's simple "responsive design".

However, I'm not seeing any overlapping text. I suspect it's simply a response to Jon's sense of humor! OTOH, I have seen this problem on other sites and will log it up to poor "design" techniques/skills and, obviously, a lack of testing on various browsers. I'm waiting to see if I can remember the trick when I next see the problem!

BTW, I have "14" set as my minimum font size in Safari (and most other browsers). BTW, this forum's software couldn't care less, I have to use command + to get the font size readable for these old eyes! Only other time I've had a problem is when javascript set a box width to a fixed size (completely ignoring the users desires) and then left-justified the text so that the right-hand parts of a count-down timer was cut off. Just another case of the 'designer' "knowing what's best for the user". Or using 'pixel-perfect' layout which works fine on paper but not on the web.

Which version of Safari are you running? Changing font size in v 10.0.3 works just fine for me here and elsewhere.

Somewhat on-topic, I've been noticing a downward spiral of results from doing a print -> save as PDF. Often the PDF files are garbled. A few sites (PayPal in particular) bear NO resemblance to what was on the screen. Some are almost or totally blank. Really annoying. I end up having to take screen shots.

tip: if you must take a screenshot, and theres more than will fit on the screen at once, (but not by a LOT) you can use safari's view settings to scale the window, say to 70% or 50% etc, to get more of the web page on the screen at once.

tip2: I have created several alternate paper sizes (like 30in, 50in, 80in, etc) that allow me to do a print -> save as pdf, select a larger paper size, and then I can save single page pdfs, which usually do a much better job of rendering inline in places like mail attachments.