SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using CSS for print media (pdf)

    I need to create a bunch of templates for reports that can be displayed on the screen and can also be converted to pdf files so users can print them. I'm decent/average with CSS on the web but have never used it for print. What things do I need to know when using CSS for print?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post
    What things do I need to know when using CSS for print?
    Firstly, create a print-specific style sheet:

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

    Then copy and paste the main styles and change any sections you don't want to print as display:none. Alter other styles to suit.

    There are many other nice things you can do on a print style sheet, like print URLs after a link. Here are some useful references:

    http://www.alistapart.com/articles/goingtoprint/
    http://www.koodoz.com.au/klog/web-de...-introduction/
    http://evolt.org/node/22225
    http://www.webcredible.co.uk/user-fr...ylesheet.shtml
    http://davidwalsh.name/optimizing-structure-print-css
    http://davidwalsh.name/optimizing-content-print-css
    http://davidwalsh.name/css-page-breaks
    http://net.tutsplus.com/tutorials/ht...ss-techniques/
    (item 9)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Normally when doing print stylesheets you want to hide any navigation bars/anything else but content. The user doesn't really often want anything else other then that .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If your print media is PDFs then the PDF already contains all of the styling within itself.

    CSS is only used for styling HTML and XHTML.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If your print media is PDFs then the PDF already contains all of the styling within itself.

    CSS is only used for styling HTML and XHTML.
    We're creating reports from database queries - the results will be printed on the screen but we also want the user to be able to convert them into PDF files so they can print them. So I have to write the CSS for that, right? And that's part of what gets converted to the PDF? I've never done this before so may not be asking the right questions but basically, we need a way to create and format the PDFs.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can't create pdfs with CSS, though you can do it with PHP. Does the information change from one viewer to the next? If not, you could offer a pdf version for download, or allow the user to print out the on-screen information. (There is sometimes the option to "Save as a PDF"--at least on Macs--which I use often.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can't create pdfs with CSS, though you can do it with PHP. Does the information change from one viewer to the next? If not, you could offer a pdf version for download, or allow the user to print out the on-screen information. (There is sometimes the option to "Save as a PDF"--at least on Macs--which I use often.)
    Yes - we're using PHP to create the PDFs although I don't know the particulars. The developer has told me he's going to use one of the utilities available but I don't know which one. My job is to come up with HTML prototypes and formatting for the various reports. This is for an online application so each user's experience/info will be unique in that they'll each have their own information in the DB. Also, even "intra-user", they'll be given choices over the variables that get included in the reports so yes, the content will vary each time. For the most part, our users will not be particularly sophisticated and most will be Windows users so we need to be able to make it easy for them. I'm not opposed to just having them print out the on-screen information if there's a way to maintain at least some formatting control over it. Some of the reports will be medical billing statements, etc., so they need to have a consistent look and feel to them and look somewhat professional.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post
    I'm not opposed to just having them print out the on-screen information if there's a way to maintain at least some formatting control over it. Some of the reports will be medical billing statements, etc., so they need to have a consistent look and feel to them and look somewhat professional.
    That's certainly where the CSS print style sheet comes into its own.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's certainly where the CSS print style sheet comes into its own.
    Would that give us as much control as generating a PDF?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Well, you can certainly make it look very nice. I'm not sure how much style and prettiness can be added to a pdf created on the fly, but I would think that CSS could do a much nicer job. (Of course, a PDF created from something like InDesign could look a not nicer, but that's not the situation here.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Well, you can certainly make it look very nice. I'm not sure how much style and prettiness can be added to a pdf created on the fly, but I would think that CSS could do a much nicer job. (Of course, a PDF created from something like InDesign could look a not nicer, but that's not the situation here.)
    Yes, from what the developer tells me, the styles will need to be pretty straightforward. Another reason I thought we needed PDFs is that the users may want to save some of the reports. How would we manage that if we were relying on creating a print stylesheet and having users print from that?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hmm, that sounds more like a PHP/database issue to me. Not my area, unfortunately.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I realize this thread is two months old but I am suffering the same thing. I AM a PHP developer and I am pretty decent with CSS, but I have never made a print css file. Here's what I have:




    which is printing like:




    Here's my print.css file:

    Code:
    #outerwrap {
        width: auto;
    	border: 0;
    	margin: 0 5%;
    	padding: 0;
    	float: none !important;
      }
    
    #innerwrap {
       	width: auto;
    	border: 0;
    	margin: 0 5%;
    	padding: 0;
    	float: none !important;
    
      }
    
    #main {
        width: auto;
    	border: 0;
    	margin: 0 5%;
    	padding: 0;
    	float: none !important;
      }
    
    .breadcrumbs {
       visibility: hidden;
      }
    
      #header {
        visibility: hidden;
      }
    
      .navbar {
        visibility: hidden;
      }
    
      .sidebar {
        visibility: hidden;
      }
    
      #footer {
        visibility: hidden;
    }
    
    .checkoutinfo_1, .checkoutinfo_2, .checkoutinfo_3 {
    	display: inline;
    }

    I have no idea where to start, since it is a pretty complex layout with floated DIVs etc... do i set a width of like 600px or 7in for my main wrap, and then display: inline the three address columns and the shopping cart rows? Help?

    Anyone who can help me on this I can help back with PHP / MySQL / jQuery etc!

  15. #15
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you might get rid of the elements that don't have any use on print, like the submit button and search field. Also make sure the content spans the full width of the paper: you can do that by giving all containing elements the following code:

    Code CSS:
    #container, #container2, #content {width: 100%; margin: 0; float: none;}
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, to add what Luki siad also remove navigation bars and links that don't contribute to content.

    I would keep basically the same CSS file you have for screen, but remove the parts not neccessary. You seem to be doing a lot of hcanges in the print file but it's not really neccessary
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did get rid of the search field and I got rid of the drop down too after I posted that, but setting the containers to the code you specified doesn't work, maybe because each row has child divs inside them that are displayed inline?

    Ryan, look at my code, the navbar, sidebar, header, footer etc. are all set to invisible already. They don't show up in the printed page.

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, to add what Luki siad also remove navigation bars and links that don't contribute to content.

    I would keep basically the same CSS file you have for screen, but remove the parts not neccessary. You seem to be doing a lot of hcanges in the print file but it's not really neccessary

    wait, what changes? My screen css file is 970 lines, my print css file is like 40 lines, I hardly changed anything except made things i don't need invisible

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the site where this is at? Bit hard without any HTML and the full CSS (we would rather have hte link then full posted code, well .. me anyway )
    Edit:

    I don't know your HTML structure so just from the snippet above, you seem to be doing a lot
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Can you post a link to the site where this is at? Bit hard without any HTML and the full CSS (we would rather have hte link then full posted code, well .. me anyway )
    Edit:

    I knew that..how?

    No, sorry... it's an admin panel for a huge shopping site. I can save a specific instance of that page as html as post that on my server though, give me ten minutes.

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I just need a test case so I can start debugging lol. Printed pages are the hardest to debug for me since I don't have a printer. But alas, that won't stop me from trying .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay sorry for the delay. You should be able to get to the html and css here: http://www.tumzee.com/sitepoint/

    The site is actually dynamically generated with PHP, all orders are in a database, so we needed a pretty rigit DIV structure to contain it all. So, how do I go about making the print look closer to what's on the screen?

  23. #23
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I just need a test case so I can start debugging lol. Printed pages are the hardest to debug for me since I don't have a printer. But alas, that won't stop me from trying .
    Well, just clicking print and then "Print Preview" gets you the same result, a messy layout LOL

  24. #24
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use either the Blueprint CSS framework or 960 grid framework on all the sites I build from scratch, and the print css pages that come with those do pretty well. I'd really like to learn how to get pages as close to screen as possible though.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Another way to view the effects of a print style sheet in Firefox is to go to Tools > Web developer > CSS > display css by media type > Print.

    However, in this case, the inline background styles make the whole print area black, so it would be better not to have them in the html, although I don't think printers print the background anyway. Still, it wold be easier to sort out your css using firebug, but you'd have to remove the black background.

    As others have said, just use the same style sheet but set some element to display:none; and set the main divs to width: 100%.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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