3

I'm working on a small part of a large web site. I'm having some problems with the print version of a page, which uses <css media="print">. I wonder if there is a way of displaying the print version of the page in the browser, so that I can inspect it and find the errors.

kaze
  • 4,299
  • 12
  • 53
  • 74
  • 1
    Chromes developer tool has a built in print CSS emulator. See these answers: http://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode – nu everest Mar 25 '14 at 18:10

3 Answers3

4

If you have a style sheet set to "screen" and another one set to "print" you could temporarily change the "print" one to also be "screen".

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • I thought about that, that is a good idea, but the site is so big, and I dont' have access to everything, so I'm not even sure what stuff is involved with the printing version. That's why I need to inspect the result with the developer tools. – kaze Dec 20 '12 at 12:00
  • The print stylesheet will probably either be a seperate stylesheet or it will be rules added to the main stylesheet - both methods will use media=print in some form. Just find that and pull it up in your editor. Then ht print preview in your browser and you'll see the printed version. Do a bit of compare and contrast. Not a great methiod admittedly but it should let you do the job. I'll try and think of something else that woul;d let you view the actual print version in the browser abut other than my original suggestion I'm not sure how you'll do that tbh. – Billy Moat Dec 20 '12 at 12:05
3

The extension Web developer (http://chrispederick.com/work/web-developer/) has a display print style function that may help you.

Vanilj
  • 104
  • 2
1

I think you have to create another page which is optimized for printer (printer friendly page), and Just add $(document).ready(function() { window.print(); }); Then change the link to the 'print' button to this new file.

Rohith
  • 1,301
  • 3
  • 21
  • 31