www.webdeveloper.com
Results 1 to 9 of 9

Thread: Controlling the print content and styles

  1. #1
    Join Date
    Feb 2006
    Posts
    65

    Controlling the print content and styles

    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
    Last edited by abeall; 03-20-2011 at 10:47 AM.

  2. #2
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    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:
    HTML Code:
    <link rel="alternate" media="print" href="printversion.doc">
    more info about it here:
    http://www.dynamicdrive.com/dynamici...printstyle.htm

  3. #3
    Join Date
    Feb 2006
    Posts
    65
    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.
    Last edited by abeall; 03-23-2011 at 03:55 PM.

  4. #4
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    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.

  5. #5
    Join Date
    Feb 2006
    Posts
    65
    Quote Originally Posted by Big O(1) View Post
    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.

  6. #6
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    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.

  7. #7
    Join Date
    Feb 2006
    Posts
    65
    Quote Originally Posted by Big O(1) View Post
    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

  8. #8
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    So your issue is resolved?

  9. #9
    Join Date
    Feb 2006
    Posts
    65
    Just a follow up, I used the following method:

    HTML Code:
    <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:
    Code:
    #printContent { display:none; }
    In my print.css file:
    Code:
    #flashContent { display:none; }
    In my Flash site:
    Code:
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles