How to get WYSIWYP (print what you see) in a web browser?

Question

When I print a web page from my browser, I expect to get on paper exactly the content I'm seeing in the browser. To be precise: I expect the browser to render the same page contents the same way, except on a canvas with infinite height, and then decide in a printing-specific way how to distribute the results across physical pages of paper.

However, that is not at all what is happening on many websites. They may print something completely different. I never asked for browsers to do this and I don't want it to happen.

Is there a way to get what I want (other than taking screenshots, painstakingly cutting and pasting them together, and printing the resulting images)? Is there a way to tell a web browser I use (Firefox, Chrome, Safari, IE, or Opera): "print this page as you would render it on an arbitrarily high browser window"?

(PS: see also: Print From Browser Using Screen CSS?)

Solution 1

Chrome has this feature built into the Developer Tools, but in a very non-obvious location.

• Open the Developer Tools (Windows: F12 or Ctrl+Shift+I, Mac: Cmd+Opt+I)
• Click the Customize and control DevTools hamburger menu button and choose More tools > Rendering settings (or Rendering in newer versions).
• Check the Emulate print media checkbox at the Rendering tab and select the Screen media type.

Quoted mostly from this answer. See below for the difference.

Now when you print, the print out will be exactly what you see. Make sure to keep the developer tools open until you print. Once you close the developer tools the Rendering setting will be reset back to normal.

Note: Inspiration for this answer came from https://superuser.com/a/568847/176146. But the actual text of this answer is from lmeurs' answer. It is almost exactly the same, but we are trying to do the exact opposite of their answer, so instead of setting the override to Print it is set to Screen.

Solution 2

Why do my webpages not print what I see in my browser?

The reason some of your web pages are printing differently is because they have a print stylesheet.

---

What is a Print Stylesheet?

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.

It's remarkable that so few websites use print stylesheets as:

• Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
• They're phenomenally quick and easy to set up

Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.

Source Disable Print Stylesheets (CSS) When Printing a Website

---

How Do I Disable a Print Stylesheet?

I recently needed to get a snapshot of a website exactly as it is shown on my screen. That is, I wanted the background color, I wanted the ads, I wanted the full layout.

One option is to take sequential screenshots as you scroll down the page, then piece them back together in Photoshop. This is time consuming and leaves you with a low-resolution (72dpi) image.

Another way to do this is to Print the page, then "save as" a PDF instead of actually printing. This works quite well for pages that do not define a different layout for printing a page versus viewing the page.

Unfortunately for me, it has become increasingly popular to include a "print" stylesheet on a website, which defines new page styles when a user tries to print the website. This is defined in the header and looks something like this:

I have found only one option that truly addresses my needs: The "Web Developer" add-on / extension developed by Chris Pederick.

With this plugin you can very easily disable ALL styles, Default styles, inline styles, embedded styles, and, you guessed it, print styles!

It is currently available for Firefox and Chrome. I truly hope a Safari extension will come some day, as I primarily use Safari. The only option I have found for Safari is to disable ALL styles - a feature that comes by default with the newest version (5.0.3) of the browser. This is useful during development to see how your site will be viewed on a text-only browser but without the ability to select which styles you're disabling it has limited utility.

Here is an example of disabling print styles with the above extension in Firefox:

Source Print stylesheet - the definitive guide

Solution 3

A no plug-in solution for Firefox: Open Web Developer Tools, in Default Developer Tools (gear icon) tick "Take a screenshot of the entire page." You only need to do this part once.

Then in Developer Tools, click the camera icon. The entire page will be saved as a .png. From here you can print it, convert to pdf, etc.

Solution 4

I am using the Chrome extension: Webpage screenshot. With two click's the complete webpage is converted to jpg or pdf. No need to glue the screenshots together yourself any more. This page looks like this:

Solution 5

I was also facing the similar problem. Currently I'm using Print Friendly and PDF Extenstion for Chrome.

Best feature is I can manually delete the items which I don't want in my Print/PDF.

View more solutions

Comments

[Admin]

possible duplicate of Print From Browser Using Screen CSS?

[Admin]

The Chrome extension "Nimbus Screen Capture App" can take an image of the entire web page as it's shown on screen (including the part you can't see without scrolling). I.e. it's as if you've taken a series of screenshots and stitched them together, but it's only one button-click.

[Admin]

Print stylesheets are fundamentally useful. When I print this page for example, do I want the question and answers or do I also want the title, the related question and the footer? I'd also appreciate that all comments are visible. Websites are interactive, pieces of paper aren't (most of the time), and those stylesheets can help to focus on the content, saving you ink and paper.

[Admin]

@SBoss: Not everyone who prints a page will be interested in the same things. I would suggest that a print-friendly page should let a user select what things should be printed, and have the print version match the screen version except--typically--for the controls that show what will print (there should be an option to enable and disable them in printouts, but they should generally appear on screen anyway).

[Admin]

As to the question being a duplicate: I tried stripping out the print stylesheet prior to printing, and it doesn't work, so I don't think the question is a duplicate.

[Admin]

@supercat Implementing that is going to be pretty hard for most web sites and likely very expensive. Implementing support built-in to the browser is going to be equally hard. Are you volunteering to do it or to pay for it?

[Admin]

@MosheKatz: I would think the Javascript to create checkboxes which, when clicked, add or remove Display: None from various styles should be relatively simple compared with much of the other code, and may in some cases be easier than trying to formulate good automated rules for when various things should appear. Otherwise, I think the "traditional" approach of having a separate "printer-friendly" page as being better than having a style sheet for printing which is totally different from that for browsing.

[Admin]

@SBoss: Yes, print stylesheets are useful. That doesn't imply I want to use them. My question is: what to do if I don't.

[Admin]

@reinierpost you seem to carve out my thoughts about printing in the year of 2016 and put them down in words. There must be a way for the browser to implement the manual process of taking screenshots and by repetition (no thought process needed) print out a series of images.

[Admin]

Another near duplicate: How do I print with the screen stylesheet?

[reinierpost]

Thanks, but this doesn't help for the website I tried it on (trelloprinter.com). I'm amazed how these people have the guts to write that "frustratingly, so many websites don't implement them" when they are a fundamentally broken approach to the problem they're trying to solve. Having separate stylesheets for printing means you failed user interface design 101, or never took it in the first place.

[reinierpost]

It doesn't do a thing with Google Maps, either. The Capture and Print extension almost does what I want - all it lacks is a Select all feature.

[DavidPostill]

Perhaps ScreenshotCaptor will do what you need to achieve ... amongst other things it will capture scrolling regions ... but I seem to recall it doesn't play too well with Google Maps.

[DavidPostill]

I've no idea what trelloprinter.com is doing for printing - the "print" button is calling some php script ...

[reinierpost]

Mixed results thus far: ScreenshotCaptor works on Google Maps but doesn't on my trelloprinter.com result ... its author advises us to use a browser plugin, anyway ... I've tried [ScreenGrab (fixed)],(addons.mozilla.org/en-US/firefox/addon/screengrab-‌​fix-version/…) which claims to grab the whole page but doesn't, and FireShot, which once again works on Google Maps but doesn't on trelloprinter.com.

[Ismael Miguel]

This won't help much. If you are using IE (I know, save your rocks for later), you can use Greenshot (getgreenshot.org) which has an option to scroll the IE page and take printscreen of it. It will assemble the whole page into 1 screenshot. You can then edit it to your heart's wish.

[Chris Hayes]

@reinierpost "Having separate stylesheets for printing means you failed user interface design 101" - That's an awfully wide brush you're painting with there. Are you telling me that if you printed out this page, you'd want to have the Hot Network Questions on the side, or information about chat rooms? Some parts of a page are only useful in an interactive context - why waste space and ink printing them?

[reinierpost]

I agree It's fine to print something other than what is shown to the user, but it should be shown to the user prior to doing it, particularly when the results can be so poor. I know I can do Print Preview, but there should be less of a surprise. It would also be nice if the user had more control to make sure the printout is as desired; that basically means you're showing another webpage and offering to print that. Then why not just do it that way!

[reinierpost]

Anyway: this method should work, but it didn't when I tried it.

[reinierpost]

This appears to work, too. I was hoping the PDF would give me scalable graphics, but it's just a bitmap.

[Herman Toothrot]

This is not working, disable print styles makes my page look horrible, no images, huge icons, no formatting.

[DavidPostill]

@user4050 <shrug> Clearly a badly designed website

[reinierpost]

Interesting ... in Firefox, I use the PrintWhatYouLike bookmarklet for this purpose. It works well, but it doesn't handle "infinite" scrolling (e.q. Quora) - neither does this extension.

[TOOGAM]

Be mad all you want. Still doesn't change the basic reality, which is that WYSIWYG support in browsers is notoriously bad. I, for one, looked at using such stylesheets for my own websites, and decided it was rather challenging to do right, and I didn't know that anyone would even really care, so it wasn't worth my efforts (as a webmaster) to worry about this.

[Mike Honey]

Nice tip - thanks! By default it keeps the text as text, links as links and shows images as full size. A 6 page travel article with several large pictures is now an immaculate PDF at 500kb.

[reinierpost]

Wow .. that is exactly what I was looking for. Thank you!

[Vijay Chavda]

What an awesome way to prove your answer! :) I would have accepted this one as the Answer..

[reinierpost]

Firefox has obtained this feature in the last year as well. This is obviously superior, but should I un-accept an old answer for that reason?

[Jakub]

@reinierpost it is of course up to you. But the the following might be helpful in your decision - meta.stackexchange.com/q/93969/226780

[reinierpost]

Thanks; those answers say I should change, so I will, even though the previously accepted answer does seem to have been the most helpful answer possible at the time it was written.

[reinierpost]

I'd like to wrap up by saying that this answer asks three followup questions and answers them, expecting this will provide an answer to the original question posed; which (to my surprise) it didn't.

[DavidPostill]

@reinierpost shrug. You cannot expect browsers to accurately print every website in existence when many of them are badly designed.

[numbermaniac]

This feature no longer requires Developer Tools! At the right side of the address bar, select the three dots, click "Take a Screenshot", then select "Save full page".

[user674669]

Amazing extension! It seems to create pdf in landscape mode. Is it possible to create pdf in portrait mode? @reinierpost

[user674669]

I think you meant to say "1-click webpage screenshot" instead of "Open Screenshot". Right?

[user674669]

I think you meant to say "1-click webpage screenshot" instead of "Open Screenshot". Right?

[reinierpost]

No. Apparently, they renamed themselves. I'm not sure what to do with this answer.

[reinierpost]

Right now, when I try this in Chrome, I only see the option when it's in mobile view mode; I can't get it for the regular desktop view of the page.

[reinierpost]

Firefox also has this ability, but in a different way. I suppose a separate answer needs to document that. I'm not sure about other browsers.

[codingjeremy]

This is amazing, thank you!

[codingjeremy]

Scroll down to other answers to see how to do it in Firefox (without a plugin). (If you are interested in that... like I was.) :D

[Diamond]

It does not work for me. My Google Chrome version is 76.0.3809.132.

[JeremyDouglass]

Works for me in Chrome 76 with: DevTools > [...] > More tools > Rendering > Emulate CSS media > screen

[NK1406]

It is interesting to me that it only works as long as the developer tools are open. I almost didn't get it to work because of that.

[reinierpost]

@DavidPostill Of course you can. They can render them on the screen, after all.

[vknowles]

This worked to print a webpage that had stymied me with other methods. Because I want to print to PDF and retain the text as text and hyperlinks that work plus the images, the screen capture solutions don't work for me. I think we all need to remember that no single solution will cover all situations.

[SL5net]

Was it possible for you to print your CV from SO with a picture? with this trick? is that still working in Januar 2021?

[themenace]

For Chromium-Browsers you can do the same opening opening the developer mode > CMD + SHIFT + P > type "screenshot"

[Admin]

For anyone looking into this, in Chrome 102 the option is "Emulate CSS media type".