Usecase: Clicking on a link opens an overlay with some content in it. There are many such links on the page, each of which has a corresponding content that loads inside the overlay. User should be able to print only the particular content.
Approach: On clicking the link, I am setting a class called "printer" to the body. Inside print.css, I am hiding all the page content EXCEPT what I see inside the overlay. On closing the overlay, I am removing the class from the body.
Issue: Everything seems to be working fine on FF and IE. On Chrome the print dialog hangs, whereas on Safari, I see a blank page.
Any help would be appreciated to understand what I might be doing wrong OR if any other approach exists.
you can use media type to apply a stylesheet that is used only for print.
<link rel="stylesheet" type="text/css" media="print" href="yourPrint.css"/>
or use #import within your current stylesheet
#media print {
/* style sheet for print goes here */
}
for more info regarding this, check out w3.org http://www.w3.org/TR/CSS2/media.html
and for a less technical albeit less reliable source, http://www.w3schools.com/css/css_mediatypes.asp
Use Print CSS
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Related
This question already has answers here:
Suggestions for debugging print stylesheets?
(13 answers)
Closed 5 years ago.
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:
Create the different style for screen and print.
Start your page in the screen mode
Print the page e.g. to a PDF printer.
Look at the result.
Try to find the rules that behave wrong.
What I would like to do (but was not able to do it with any browser):
Create the different style for screen and print.
Start your page in the screen mode
Go into the preview print mode (e.g. for Opera, Firefox available)
Use the available tools like Firebug (Firefox) or Dragonfly (Opera) to inspect the DOM and the current styles.
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.
Chrome Developer Tools has this feature.
Open Chrome Developer Tools for the page you want to test.
Open the Drawer if not already open. (Press Esc.)
Open the Emulation tab.
Click Media in the left menu.
Check CSS media and select print from the select box
Source: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types
The Firefox pluging called "Web Developer" ( https://addons.mozilla.org/en-US/firefox/addon/web-developer/) has a "Display CSS By Media Type" option.
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.
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.
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.
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.
Create a print style sheet that uses #media print { } to frame the print styles
Apply that style sheet last
While working on print styles, temporarily comment out the lines that frame your print styles
Use Firebug and Web Developer in you accustomed way
Uncomment the media bracketing
Something like:
/* #media print { */
#sidebar {display:none;}
/* } */
I want to print my table that contains some css styles too. But whenever I run window.print(), the output appears without any applied css to styling headers and footers.
I've used <link rel="stylesheet" href="print.css" type="text/css" media="all" /> in my code. Also I tested it with media="print". But still I have a print preview without any style.
What should I do?
media=print should do.
Make sure you have also checked the "print images and colors" in page setup while seeing the Print Preview.
the template of my website looks quite good when printed, so i have no separate print css.
However, there is one element at the top which is not needed when printed, and about 2 inches high, so that's kind of a waste at the top of the printed page (which imho distracts the user from the actual content)
So, what i want to accomplish, is 'hide' that element (div) at the top of the page when a user prints the page.
But so far the only solution i've seen is top create a separate css document which then will be used when the user will print my page. That sounds good, but do i now have to maintain 2 different stylesheets with exact the same content (besides that one div)?
Or is it possible to sort of override the standard stylesheet in the print stylesheet? (so i only have to define the exception for that one div in my print stylesheet?)
Hope this explains my problem.....
If you declare your main stylesheet to apply to all media (browsers apply it to all by default):
<link rel="stylesheet" type="text/css" media="all" href="style.css">
Then adding a print stylesheet should not require you to duplicate styles across both CSS files:
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
All you would do is add the print-specific styles to print.css.
But if you want to keep a single stylesheet, and have print-specific overrides within that one stylesheet, you can place the rules in a print media rule:
#media print {
div.do-not-print {
display: none;
}
}
I think this is what you asked vor: overriding the standard css in your print style
A page on my site has a link to a stylesheet for media="print".
<link rel="stylesheet" href=".../print.css" type="text/css" media="print" />
Most browsers correctly ignore this link when rendering for a screen, but IE7 includes the file and processes the style rules, rendering the page inappropriately for a screen display.
How does IE (and how do other browsers) recognize what the intended display is? Is there an HTML header (or absence of) that guides them? Can this be correctly with Javascript?
Use the #import at-rule instead to include the file only for print and bypass IE7:
<style type="text/css" media="print">
#import "print.css";
</style>
If that does not work, try the other alternatives on the media test page
Is there a way to run javascript at print time? I know of the IE onprintbefore event, but we use mostly Firefox.
What I'm trying to do is get element positions as they would be in the page rendered for printing so I can insert appropriate page breaks, basically to accomplish what the CSS "page-break-inside: avoid" attribute would do if it were implemented.
It seems that if I could force the javascript to run a separate time for the print rendering, I could do this.
Better use CSS media rule. Provide a print stylesheet.
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Also see http://www.alistapart.com/articles/goingtoprint/.
You may be able to do this as a Firefox extension, otherwise, once you print, the javascript is out of the picture and the page is being sent to the printer.
The other option is to just send the page to the server and have it return a PDF for printing.