Controlling the print content and styles

[abeall]

Hi all.

I would like to feed the printer a modified version of the HTML and CSS when the user prints. Now for specifying styles specific to printing that seems easy enough with the media attribute. However I'm a bit at a loss how to do something similar to the markup.

At the moment I have a PHP page which outputs exactly what I would want to print for any given page, so if you're at this url:
/home
The printable content could be viewed at:
print.php?page=/home

Is there a way to make the user's print functionality use that print.php page rather than the markup on the current page? It seems like mapping applications do something like this, perhaps with Javascript?

I know I could present the user with a custom print button that loads the php page and prints that, but I'm specifically wondering about overriding the markup when the user invokes their built in print method in the browser.

Thanks for any tips.

- Aaron

[moritana]

well, personally, I never tried it, but I know you can use the <link> tag in the head section to attach a printable version of your document:

<link rel="alternate" media="print" href="printversion.doc">

more info about it here:
http://www.dynamicdrive.com/dynamici...printstyle.htm

[abeall]

That's fascinating, I never knew about that. However the problem is I need to change the content in a single pageview, so I can't just set the link to what I need, as it will change. I have to to set it dynamically. Can that be done via Javascript?

As it turns out, mapping apps don't really do what I described, I think. On google maps, for instance, if you find directions then use your browser print function you just get the map and some text that says "to get the detailed direction use the print button" or something like that. You have to click their special print button which loads up a new window with the directions, ie content different than the normal page view.

On the other hand, it may be possible to do what I want with Javascript. I can write the content to a hidden div, then use the normal print CSS to show that div and hide the application div. As long as I can keep that div up to date with the data I want to print, and as long as the printer uses the contents of the actual DOM and not the original document, then it should work.

[Big O(1)]

In Google Maps when you click that print link, it sends you to a new page with a different URL that contains only the directions and no map, and prints that markup. They are using a server side scripting language that retrieves only the directions and calls the print function on this new page.

[abeall]

In Google Maps when you click that print link, it sends you to a new page with a different URL that contains only the directions and no map, and prints that markup.

Right, which is what I'm trying to avoid.

[Big O(1)]

If you don't want a new page you will have to use javascript to modify the markup and then call the print function. You could hide content from the print version with "display: none" in CSS but not add content.

[abeall]

If you don't want a new page you will have to use javascript to modify the markup and then call the print function.

Right, some of these ideas are discussed in the previous posts

[Big O(1)]

So your issue is resolved?

[abeall]

Just a follow up, I used the following method:

<link href="web.css" rel="stylesheet" type="text/css" media="print" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<div id="flashContainer">
<!-- [embedding swf code here] -->
</div>
<div id="printContainer">
</div>
<script>
function setPrintContent(content){
	document.getElementById("printContainer").innerHTML = content;
}
</script>

In my web.css file:

#printContent { display:none; }

In my print.css file:

#flashContent { display:none; }

In my Flash site:

ExternalInterface.call("setPrintContent", content);

Where "content" is some bit of content pulled from the backend via the Flash file, and I call this function whenever the content changes in the Flash.

It worked great; whatever is currently being displayed in the Flash site is what gets printed without any problems in any browsers I tested. I did a bit of styling to set various XML nodes which the Flash consumes as block elements or floats, and I can literally just dump whatever the Flash loads into the printContainer and it all worked with very minimal work. Will definitely be using this method for all my Flash sites from now on!