How do I print with the screen stylesheet?

browser printing

62,117

Solution 1

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

Search for all instances of media="screen" and delete that attribute.
Then search for media="print" and delete that whole link.
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.

Solution 2

I found an easy way to do it in Chrome.

Open Developer Tool > Rendering > Select 'screen' in Emulate CSS media.

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

Solution 3

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/

Solution 4

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.

Solution 5

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

View more solutions

62,117

vy32

I love programming and have been doing it since 1972.

Updated on September 18, 2022

Comments

vy32 almost 2 years

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.
- Admin almost 8 years
  
  It is a duplicate!
- Admin about 6 years
  
  See: stackoverflow.com/questions/9540990/…
- Admin almost 5 years
  
  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!!!.co‌m)) 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.
- Admin over 2 years
  
  @vy32 Please consider changing the accepted answer to dj rock's answer. That is the easiest way now.
vy32 almost 12 years

Does not have the desired result. Sorry.
vy32 almost 12 years

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 over 10 years

I need a plugin that does this.
James over 10 years

@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
vy32 over 10 years

the PrintScreen button doesn't work so well???
vy32 over 10 years

On my copy of Chrome the print page is not coming up at all. I'm not sure why.
James over 10 years

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
Joey almost 10 years

This doesn't work on later chrome versions.
James almost 10 years

Just tested in Chrome Version 36.0.1985.125 and it works fine.
James almost 10 years

I think the problem may be due to an old user experience saying: "If the user cannot find it, the function is not there!" In that light, I just updated the extension to automatically open the print window after it was clicked. I suspect that clicking a button with apparently no effect has caused too much confusion. Also, be sure to tell chrome to print background images/colors, or the page will often look wrong. Updated Extension: chrome.google.com/webstore/detail/printscreen/…
kitchin about 9 years

Some sites have no media=print css and instead rely on Javascript. Turning off JS worked for me. Settings / Advanced / Content.
vy32 about 7 years

Unfortunately, this program makes a bitmap print, which means that the fonts are rasterized. It's not what I want.
Carl G almost 7 years

This works. Follow the instructions and select the "screen" media type. Then when you print it will use "screen"
Jakub over 6 years

Using Chrome Developer Tools to set "Emulate CSS media" to "screen" is the only answer that works.
Chris Nevill about 5 years

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 :)
Michaël about 5 years

As software evolves, so should stackexchange answers—this one should be the selected answer.
reirab almost 5 years

I know it's been a long time since you posted this and I'm not sure if you're still supporting this extension or not, but the links to find the extension on the Chrome store are dead. :( Both the ones in the comments here and the one on the linked GitHub page (though the GitHub link itself works fine.)
reirab almost 5 years

For others who may be looking, there's an extension called FireShot that can capture a webpage's screen rendering and then lets you print it, save to PDF, or save to an image. However, if you save to PDF, it is not divided into pages. I just used this to print out a webpage with terrible print CSS, since the links in the comments here aren't currently working.
Laurent almost 5 years

More specifically on the current Chrome: Open developer tools. Top right 3-dot menu > More tools > Rendering. Scroll down to Emulate CSS Media.
glenviewjeff almost 4 years

This was the only method that worked for me.
eMPee584 almost 3 years

Now is there really no way to simplify invoking this.
Hashbrown over 2 years

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