2

I am doing a print functionality. The problem I am getting is that the page, which is being printed, is not retaining it's CSS formatting. I am getting plain text on print without CSS. Does anyone know how to print page with all it's CSS formatting unchanged.

Stefan
  • 14,530
  • 4
  • 55
  • 62
Amol Kolekar
  • 2,307
  • 5
  • 30
  • 45

2 Answers2

3

Most likely the site you are trying to print has a custom stylesheet for printing. This stylesheet is often simplified and made to fit onto a printable page. I don't think there is much you can do about it unless you have the ability to modify or remove the print CSS file.

Intro to print style sheets.

Example markup for one.

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

Perhaps there is some way to use javascript to programmatically remove the style sheet, but I am not sure.

mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • do you mean to say..i need to create another stylesheet called print.css for print media?isn't there any other way instead of creating seperate stylesheet for printing? – Amol Kolekar Jan 06 '12 at 04:40
  • I am saying that sites print with all CSS by default. If you aren't printing with CSS then the page already has a print CSS sheet (or perhaps `@media="screen"` defined which is preventing the styles from coming through. I guess there is a remote possiblity that there is a browser setting that does this. You could test by trying to print from a separate browser. If you provide a link to the site in question someone you could tell you for certain. – mrtsherman Jan 06 '12 at 05:21
2

In simple terms for anyone who is still wondering, you can have a CSS stylesheet that has 'media="screen" ' in the link markup as follows:

<link id="Link1" href="../Styles/MainStyleSheet.css" rel="Stylesheet" type="text/css" runat="server" media="screen" />

this will style what is seen in the browser screen.

You can also have another CSS stylesheet that has 'media="print" ' in the link markup as follows:

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

this will style what is seen when a user views a Print Preview / when it is printed on the paper.

If you put something like:

.inprintdisabled
{
 display: none;
}

in your print_voucher.css file. Everywhere in your HTML code where there is a

<div class="inprintdisabled">

it will show the contents of that div in the browser window but WILL NOT print out / show it in a print preview window.

Likewise, if you put

.inprintOnly
{
 display:none;
}

in your MainStyleSheet and 

<div class="inprintOnly">

in your HTML code, you can have objects (text, images, etc) that don't appear on your browser screen , but will appear when print previewed / printed out.

Hope this helps.

FlashTrev
  • 507
  • 6
  • 16