CODEWITHSUNDEEP
asp.netcssprintingstylesheet
Jason Weber
Jason Weber

Reputation: 5741

What is the best way to give users a printer-friendly page option?

My site is in asp.net 4 / vb. I'm trying to figure out the best way to make a printer-friendly page that only includes our logo at the top and pertinent information, but omits things like navigational bars and other things that aren't necessary. I have a click-to-print icon and it works fine in all browsers, but it doesn't always print out printer-friendly.

I've read things on this site about making a print.css stylesheet, but I'm unsure as to how I'd code the stylesheet, or if I have to assign div attributes to things I want omitted -- and the posts were older posts. Is it recommended that I omit the navigational links, etc., and if so, what is the best way to go about doing this? Thank you for your help!

Upvotes: 1

Views: 875

Answers (2)

Chris Laplante
Chris Laplante

Reputation: 29658

You don't need to actually add additional elements to wrap stuff that you don't want to show when printing. The best way to do a print stylesheet is to apply a class (maybe call it print_hide) on elements you want to hide when your page is printed. For example:

<div>Text</div>
<img class='print_hide' src='some_huge_image.png'/>

In your print.css stylesheet, you would do:

.print_hide {
    display: none;
}

To apply the stylesheet, add this to your head:

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

The div would still print, but the image would not.

This is, of course, in addition to whatever other style changes you want, like removing background images, changing colors, fonts, etc.

Adding that class to stuff to hide at print is a relatively minimal change to existing code.

The other option is to create a separate printer friendly version of all of your pages, and if your pages are really complicated, this might be the way to do it. That being said, the benefit of print.css (in addition to being less work) is that users don't need to explicitly select Printer friendly version, of course.

Upvotes: 1

EdSF
EdSF

Reputation: 12341

You can use CSS @media types.

<p> this should be part of the printed page </p>

<div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>

A simplistic style sheet for the above would be:

@media screen
{
   /* whatever styles you have for display */
}

@media print
{
   .noprint { display: none; }
}

In the above, the <div> with the class="noprint" will be displayed on screen as usual, but it will not be printed.

Update:

The "C" in CSS stands for "cascading" - meaning the "last" or closest instruction wins. I can only assume that the <span class="bodycontent"... (being the last or closest) is overriding the div.

ASP.Net Controls have a CssClass property, that's how you'd define it:

<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" CssClass="noprint" Text="foo" />

You can even directly type class="noprint" (instead of using CssClass) in any ASP.Net tag - VS may complain but it should be ok:

<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" class="noprint" Text="foo" />

Upvotes: 2

Related Questions