Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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. Thanks.

share|improve this question

migrated from webmasters.stackexchange.com Aug 2 '12 at 11:37

This question came from our site for pro webmasters.

    
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. – Davinder Aug 2 '12 at 14:52
up vote 12 down vote accepted

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.

share|improve this answer
    
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 '12 at 3:52
    
I need a plugin that does this. – vy32 Oct 26 '13 at 20:31
2  
@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 '13 at 19:29
    
WOW. Thanks! That's just what I needed! – vy32 Dec 30 '13 at 23:23
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 '14 at 16:33

Following James idea but using jQuery:

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

If page doesn't have jQuery, inject it:

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);
share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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 (http://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);

share|improve this answer

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

share|improve this answer
1  
Does not have the desired result. Sorry. – vy32 Aug 7 '12 at 2:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.