69

A number of websites that I use have really bad stylesheets for the print media, but their screen stylesheets are quite good.

Is there any way to tell my browser to ignore the print stylesheet and just print with the screen stylesheet?

I’d also like to do this when I want to show clients the difference between the two.

5
  • If websites in question are of third-parties, maybe you could try Chrome's Developer Tools (Ctrl+Shift+I), then right-click on node/element(the print stylesheet in this case) and select Delete This Node.
    – DavChana
    Aug 2, 2012 at 14:52
  • It is a duplicate!
    – vy32
    Jul 6, 2016 at 17:05
  • See: stackoverflow.com/questions/9540990/… May 17, 2018 at 19:56
  • Not a direct answer to your question, but if on Firefox, you're merely annoyed that all the links are attached with their full URLs on the print preview (whoever thought this is a great idea needs to die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)) just open Inspect Element (Dev Tools), go to Style Editor, use the handy @media rules listing on the right side to find the stylesheet with print styles then remove all the print rules applied on a[href]. Then launch the Print Preview again.
    – ADTC
    Oct 4, 2019 at 3:36
  • 1
    @vy32 Please consider changing the accepted answer to dj rock's answer. That is the easiest way now.
    – Utku
    Nov 20, 2021 at 20:36

11 Answers 11

23

Using Chrome Developer Tools (Ctrl+Shift+I) is the only thing I have found that works.

  1. Search for all instances of media="screen" and delete that attribute.
  2. Then search for media="print" and delete that whole link.
  3. Then try printing.

This generally gives me the page with screen styling.

If you really just want to disable print styles, you can install the Web Developer extension (I think there is a version for Firefox and Chrome). It has a button to disable print styles. However, it does not extend the "screen" style to print, so most of the time it does not work the way you hope it will.

13
  • 1
    Thanks. That's a great solution. Depressing, but great. The main website that I'm having a problem with is Wired, which for some reason prints horribly but looks great on the screen.
    – vy32
    Sep 23, 2012 at 3:52
  • 2
    I need a plugin that does this.
    – vy32
    Oct 26, 2013 at 20:31
  • 3
    @vy32 that is not a bad idea at all. I had been wanting to play with Chrome extensions for a while now. Over the holidays I finally had a couple hours. So here is PrintScreen, a little button that you click when a page has custom print/screen css media selectors. link
    – James
    Dec 29, 2013 at 19:29
  • the PrintScreen button doesn't work so well???
    – vy32
    Dec 30, 2013 at 23:25
  • 1
    I suspect this is a user experience issue. Normally I put more focus on user experience, but this time I was just playing around with new techniques and systems, and failed to pay attention. After clicking the PS button you need to click print the normal way. You are right, it would make more sense if I had the extension call the print directly. If I have time this week I will try to update the extension to go straight to the print screen as it really should. Thanks
    – James
    Jan 7, 2014 at 16:33
28

I found an easy way to do it in Chrome.

  • Open Developer Tools
  • Vertical ellipsis menu (⋮)
  • Show console drawer (Esc)
  • Vertical ellipsis menu (⋮)
  • Rendering
  • Emulate CSS media type: screen.

Now try to print. It will pick the screen CSS instead of Print CSS.

4
  • 12
    More specifically on the current Chrome: Open developer tools. Top right 3-dot menu > More tools > Rendering. Scroll down to Emulate CSS Media.
    – Laurent
    Aug 9, 2019 at 9:25
  • Now is there really no way to simplify invoking this.
    – eMPee584
    Aug 18, 2021 at 18:09
  • This is a copy of \@kitchin's 2015 answer to this question (three years prior to this one). If you wanted their answer to include the specific instructions you should have put forward an edit to it (much like @glenviewjeff put to yours, for some reason, adding the same link..)
    – Hashbrown
    Mar 28, 2022 at 4:09
  • Where is it in Chrome of 2023?
    – koppor
    Oct 25, 2023 at 6:51
17

There is a new method to directly choose the media emulation in Developer Tools, see https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

3
  • 1
    This works. Follow the instructions and select the "screen" media type. Then when you print it will use "screen"
    – Carl G
    Aug 3, 2017 at 0:14
  • 2
    As software evolves, so should stackexchange answers—this one should be the selected answer.
    – Michaël
    Jun 25, 2019 at 11:44
  • This was the only method that worked for me. Aug 15, 2020 at 15:42
6

Leo had a good idea there, but it doesn't quite do what James said: it should be

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

Hint: save the following as a bookmarklet for easy use:

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

This preloads jQuery and waits 2secs for it to finish, but if this wait isn't enough, just run it again, jQuery should have been loaded in the meantime.

4
  1. Do anything James said ;)

    You can check the output opening the Chrome Developer Tools settings (right bottom corner) and select in "Overrides" the option "Emulate CSS media print"-view. By toggling this option you can compare print and screen view. Have fun!

  2. Install this addon: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Now background-images and colors are printed as well.

Bug: Doesn't work with CSS sprites.

EDIT: Chrome has changed the print view in 2014 I think so you do not need to use the linked addon anymore.

1
  • Using Chrome Developer Tools to set "Emulate CSS media" to "screen" is the only answer that works.
    – Jade
    Nov 26, 2017 at 6:00
3

I just ran into this problem with a website that had a single CSS file using @media print and @media screen, so the solution to disable the separate print CSS file didn't work for me. While I could certainly edit the CSS and comment out the print block while viewing the page, those changes didn't carry over to the print preview.

The solution I found was the Print Edit extension for Firefox and Chrome. It lets you edit the page immediately before printing, and includes a simple button to use the Web Style (@media screen) for the page.

I did have to change the scale I was printing at slightly, since the print surface is roughly a 17:22 ratio while my browser is roughly 16:9, so some of the stuff on the page was getting a bit crowded horizontally. I also had to enable printing the background colors & images separately

1
  • This worked perfectly for me. I had already spent 10 minutes changing a sites text to purple as my printer had run out of ink. Using this solution I could install the extension, press the web style button and wallah it worked :) Apr 5, 2019 at 13:32
1

Sometimes web sites use CSS to specify that different styles should be used on-screen and when printing. This is often good, but it can also be confusing and problematic. Inspect the source code of the page and look for something like:

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

One reason this problem is common is that web sites using the popular Bootstrap framework use the ubiquitous bootstrap.min.css file, which contains the CSS style above.

The key thing to look for is @media print. Web sites often have complex structures and it may help to save the page locally and inspect it with a recursive text-searching tool.

When you think you've found the spot in the CSS code, you can modify the page directly in your browser by using its developer features. (In Chrome you press Ctrl+ Shift + I to launch them.)

Search for the CSS code and just remove or invalidate the rows causing the problem. Verify that the operation worked by using "Print preview".

0

Install Greasemonkey addon and use the script given below.

I modified a script I found here http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

I changed "screen" to "print" at the end (I have no idea about jQuery, so don't ask me any questions) so that in effect it sends the screen version to the printer. When printing to pdf, (using Foxit or Nitro Pdf printers), I set the page type to Tabloid Extra in landscape mode so the pdf size matches the screen size more or less. Enjoy! Remember, I don't know a thing about programming, so the credit goes to the original author.

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);
-1

Try to enable "Print background (colors & images)" option in Page Setup and check how it looks in Print Preview (It's for FF).

1
  • 1
    Does not have the desired result. Sorry.
    – vy32
    Aug 7, 2012 at 2:33
-1

Similar to James - use "Sources" tab in Chrome Developer tools, and replace all instances of media print with media speech. Thus all the css changes to hide navbars etc will not be applied when printing (but will be applied when text-to-speech is used)

This may be doable with JQuery as above.

This is useful as I am using the CDN of css so customisation is right out

-2

There is a great tool for that on Mac.

Install Paparazzi => copy URL to Paparazzi => Save image as => PDF

(in PDF exports, even the Text ist selectable, it's not just an "image")

https://derailer.org/paparazzi/screenshots

enjoy :-)

1
  • Unfortunately, this program makes a bitmap print, which means that the fonts are rasterized. It's not what I want.
    – vy32
    Jul 5, 2017 at 2:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .