19

I have used (as usual) @media print rules to specify how the print of a web page should be different to the online version. This works quite well, but the test is really difficult. What I usually has to do are the following steps:

  1. Create the different style for screen and print.
  2. Start your page in the screen mode
  3. Print the page e.g. to a PDF printer.
  4. Look at the result.
  5. Try to find the rules that behave wrong.

What I would like to do (but was not able to do it with any browser):

  1. Create the different style for screen and print.
  2. Start your page in the screen mode
  3. Go into the preview print mode (e.g. for Opera, Firefox available)
  4. Use the available tools like Firebug (Firefox) or Dragonfly (Opera) to inspect the DOM and the current styles.
  5. Change the CSS on the fly, reload the page, and look at the result and the DOM again.

Is there any browser or combination of browser, plugin and process available to get similar results? If you have ideas how to change the organizations of the files, with the most minimal changes to get the wished result, you are welcome.

mliebelt
  • 15,345
  • 7
  • 55
  • 92

6 Answers6

17

Chrome Developer Tools has this feature.

  1. Open Chrome Developer Tools for the page you want to test.
  2. Open the Drawer if not already open. (Press Esc.)
  3. Open the Rendering tab.
  4. Scroll down to Emulate CSS media type and select print from the select box

Source: https://developer.chrome.com/docs/devtools/rendering/emulate-css/#emulate-css-media-type-enable-print-preview

jordanbtucker
  • 5,768
  • 2
  • 30
  • 43
  • 5
    In Chrome 50 the tab in step 3 is called "Rendering" and the setting to check in step 4 is "Emulate media" - step 5 is only selecting 'print' from the select box. – febeling May 11 '16 at 19:34
10

The Firefox pluging called "Web Developer" ( https://addons.mozilla.org/en-US/firefox/addon/web-developer/) has a "Display CSS By Media Type" option.

Pino
  • 7,468
  • 6
  • 50
  • 69
  • I have installed it now (as well as the DOM inspector), and it works at least partially for me. There are a lot of display bugs, and sometimes it just stops working ... so I have to investigate a little bit more. – mliebelt May 27 '12 at 14:33
  • Hmmm, it works fine here. It's one of the hottest plugin for developers (after Firebug, of course). – Pino May 28 '12 at 14:04
  • The first time I tested it, the menu entry `Display CSS By Media Type` did not show any difference. After having reworked the web application (with the technique described in my answer), I now see the same result as when switching the media types. Great stuff :-) – mliebelt May 29 '12 at 07:05
  • And now I am even able to open the DOM inspector, switch to "Display print CSS", and look at the DOM and the CSS rules. Even greater ;-) – mliebelt May 29 '12 at 07:15
1

Have you tried with Print Friendly Google Chrome extension.

Its a nice extension which adds a button and generates pdf of the web page on a click. Hope that might be easier than your current process.

Katti
  • 2,013
  • 1
  • 17
  • 31
  • I have installed it, and yes, it gives a nicer (and more immediate) view how it will be printed, but it does not help to inspect the reasons, see the DOM, ... – mliebelt May 27 '12 at 14:36
  • Yep that feature would be more helpful. – Katti May 27 '12 at 15:26
1

I have found a different solution to my problem inspired by Using Rails 3.1 assets pipeline to conditionally use certain css. Here is how it works:

  • Use in the main HTML file the following directives for stylesheets:

    <link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

  • isolate all rules in your stylesheets that are

    • appropriate for screen and print (Stylesheet: application.css)
    • appropriate only for screen (Stylesheet: screen.css)
    • appropriate only for print (Stylesheet: print.css)

  • During test of the print-out of your web page, switch the stylesheets in your main HTML file:

    <link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

Notice the switch in the second and third line for media="print|screen".

As the result, you are now able to call your main HTML file, and see how it will look if you print it out under normal conditions. All the tools you normally use (Firefox Firebug, Chrome Developer Tools, Opera DragonFly, ...) will work as normally, so you are able to check your DOM, see the boxes, change CSS on the fly and just reload your page then.

Works pretty well for me, if I will stumble over some drawbacks, I will come back and notate that as well.

Community
  • 1
  • 1
mliebelt
  • 15,345
  • 7
  • 55
  • 92
  • Separating CSS files by media is a best practice. Switching media in the HTML code is an obvious solution but I supposed that you were searching for something more automatic. – Pino May 28 '12 at 14:08
1

If you specify your Print & Screen CSS rules in separate files, you can do this quite easily using the Chrome Developer tools. Load your page and open the Developer Tools. From the "Elements" view, edit the media="print" line so it reads media="all".

For example, if you link your style sheets like:

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css"   />

Change: 

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

to read:

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />

You will now have the print styles applied to the copy in your browser window. You can navigate the styles and elements as you would with any other webpage.

Cameron Roberts
  • 7,127
  • 1
  • 20
  • 32
1

Here is a practice that I have found helpful with styling for print when the print layout needs to be a modification of the generic styling.

  1. Create a print style sheet that uses @media print { } to frame the print styles
  2. Apply that style sheet last
  3. While working on print styles, temporarily comment out the lines that frame your print styles
  4. Use Firebug and Web Developer in you accustomed way
  5. Uncomment the media bracketing

Something like: 

    
/* @media print { */

    #sidebar {display:none;}

/* } */
Kevin Wiliarty
  • 31
  • 5
  • A variation on this is to directly edit your CSS file using Firefox's own Style Editor (Shift-F7 keystroke). This way, you can change your "@Media Print" to "@Media All" and see your print CSS implemented on screen. – ChillyPenguin Jan 12 '14 at 22:21