96

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?)

reinierpost
  • 2,220
  • 1
  • 18
  • 23
  • 1
    possible duplicate of [Print From Browser Using Screen CSS?](http://superuser.com/questions/175064/print-from-browser-using-screen-css) – Ƭᴇcʜιᴇ007 Nov 28 '14 at 15:37
  • 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. – A E Nov 28 '14 at 15:41
  • 1
    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. – SBoss Nov 28 '14 at 15:59
  • 2
    @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). – supercat Nov 28 '14 at 23:54
  • 1
    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. – reinierpost Nov 29 '14 at 22:53
  • @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? – Moshe Katz Dec 02 '14 at 01:31
  • @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. – supercat Dec 02 '14 at 13:16
  • @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. – reinierpost Sep 21 '15 at 10:20
  • 1
    @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. – Anders Lindén Jan 05 '16 at 16:33
  • Another near duplicate: [How do I print with the screen stylesheet?](http://superuser.com/questions/456700/how-do-i-print-with-the-screen-stylesheet?rq=1) – reinierpost Jul 05 '16 at 09:14

8 Answers8

68

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.

Jade
  • 1,016
  • 9
  • 6
  • 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? – reinierpost Nov 26 '17 at 17:07
  • @reinierpost it is of course up to you. But the the following might be helpful in your decision - https://meta.stackexchange.com/q/93969/226780 – Jade Nov 26 '17 at 17:39
  • 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 Nov 26 '17 at 18:55
  • 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 Feb 26 '19 at 14:30
  • 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. – reinierpost Feb 26 '19 at 14:31
  • 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 – codingjeremy Jun 12 '19 at 22:44
  • It does not work for me. My Google Chrome version is 76.0.3809.132. – Diamond Sep 06 '19 at 21:07
  • 3
    Works for me in Chrome 76 with: DevTools > [...] > More tools > Rendering > Emulate CSS media > screen – JeremyDouglass Sep 26 '19 at 18:24
  • 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. – NK1406 Dec 04 '19 at 02:25
  • Was it possible for you to print your CV from SO with a picture? with this trick? is that still working in Januar 2021? – SL5net Feb 03 '21 at 18:04
  • 4
    For anyone looking into this, in Chrome 102 the option is "Emulate CSS media type". – Martin Argerami Jun 14 '22 at 21:09
  • I went ahead and edited that in, since most people these days will be on the latest Chrome. – Jerad Rose Sep 16 '22 at 20:38
  • 1
    Didn't work for me after changing "Emulate CSS media type" to "Screen" in Chrome 107. Can someone update the answer? – johan Nov 02 '22 at 03:05
  • @Johan I have Chrome 114 (on Mac) and can confirm that changing "Emulate CSS media type" option to "screen" works. – tdwong.star Jun 14 '23 at 19:27
26

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:

enter image description here

Source Print stylesheet - the definitive guide

DavidPostill
  • 153,128
  • 77
  • 353
  • 394
  • 3
    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 Nov 28 '14 at 13:31
  • 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. – reinierpost Nov 28 '14 at 13:35
  • 1
    Perhaps [ScreenshotCaptor](http://www.donationcoder.com/Software/Mouser/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 Nov 28 '14 at 13:47
  • I've no idea what trelloprinter.com is doing for printing - the "print" button is calling some php script ... – DavidPostill Nov 28 '14 at 14:17
  • 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)],(https://addons.mozilla.org/en-US/firefox/addon/screengrab-fix-version/developers) which claims to grab the whole page but doesn't, and [FireShot](https://addons.mozilla.org/en-US/firefox/addon/fireshot/?src=search), which once again works on Google Maps but doesn't on trelloprinter.com. – reinierpost Nov 28 '14 at 15:09
  • 1
    This won't help much. If you are using IE (I know, save your rocks for later), you can use Greenshot (http://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. – Ismael Miguel Nov 28 '14 at 18:32
  • 18
    @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? – Chris Hayes Nov 28 '14 at 21:09
  • 4
    @reinierpost What a ridiculous statement. Suppose a site has a dark background with a light foreground. I won't speak for you, but I personally am happy that the browser has its own print styles as well as many sites, so that I don't waste all my ink when I print. There are plenty of reasons why you want to print the content itself, and not a screenshot. – Brad Nov 28 '14 at 21:55
  • 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 Nov 29 '14 at 23:12
  • Anyway: this method should work, but it didn't when I tried it. – reinierpost Nov 30 '14 at 21:31
  • This is not working, disable print styles makes my page look horrible, no images, huge icons, no formatting. – Herman Toothrot Dec 14 '16 at 11:57
  • @user4050 Clearly a badly designed website – DavidPostill Dec 14 '16 at 12:01
  • 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. – TOOGAM Mar 10 '17 at 09:14
  • 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. – reinierpost Nov 26 '17 at 19:02
  • @reinierpost *shrug*. You cannot expect browsers to accurately print every website in existence when many of them are badly designed. – DavidPostill Nov 26 '17 at 19:06
  • @DavidPostill Of course you can. They can render them on the screen, after all. – reinierpost Jan 22 '20 at 10:13
  • 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. – vknowles Feb 03 '20 at 13:32
11

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.

Russ
  • 111
  • 1
  • 3
10

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: Webpage screenshot demo

Ruut
  • 431
  • 1
  • 3
  • 12
3

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.

Cas
  • 1,944
  • 2
  • 19
  • 42
Nikhil
  • 31
  • 2
  • Interesting ... in Firefox, I use [the PrintWhatYouLike bookmarklet](http://www.printwhatyoulike.com/bookmarklet) for this purpose. It works well, but it doesn't handle "infinite" scrolling (e.q. Quora) - neither does this extension. – reinierpost Feb 24 '17 at 10:09
  • 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. – Mike Honey Apr 27 '17 at 12:15
1

(At the risk of turning this into a set of Software Recommendations answers, but so far, install and use browser extension X seems to be the only kind of answer that actually works:)

Lately I've been using the Open Screenshot Chrome extension for this purpose, and I'm very happy with it. It had no problems with a long Quora page.

Update (November, 2017): this is no longer the best option: Firefox and Chrome now support taking full-page screenshots in their Developer Tools.

reinierpost
  • 2,220
  • 1
  • 18
  • 23
1

Here's another one called OpenScreenShoot. I love it because it's Open source, available at GitHub, and it worked for me for a very long webpage on which, other alternatives like WebpageScreenShot failed.

Vijay Chavda
  • 121
  • 5
1

Today, this can be done in Firefox (I'm using 65.0.2 right now) as follows:

  1. Press F12. The Developer Tools pane will show up.
  2. Near the right upper hand corner, there is a camera icon. To take a screenshot of the entire page, click on it.

In Settings (to access them, click the three dots to the right of the camera icon), you can slightly customize its behavior; by default, it will save the screenshot to your Firefox downloads folder.

If the camera icon is missing, you first need to enable it in Settings.

The screenshot tool in Firefox Developer Tools

reinierpost
  • 2,220
  • 1
  • 18
  • 23