Results 1 to 5 of 5

Thread: Printer Freindly Form

  1. #1
    Join Date
    Feb 2011

    Printer Freindly Form

    I'm kinda clueless on what to do here. Basically I want to make a printer friendly version of a webpage. Any ideas?

    My site hosts a bunch of self guided tours, and I want users to be able to print out a list of all the destination. The current printer friendly page that I made works pretty well, but stuff gets messed up around the page breaks (See attachment, or do a print preview of the link below)

    More info:
    • The tours are always changing, so uploading static PDFs is not an option.
    • I tried to force a page break by using a html command, but it didn't actually create a pagebreak. I used <style> .break { page-break-before: always; } </style>
    • My site host doesn't have the package installed to create a pdf, so generation of a PDF isn't really an option

    Here is a sample page
    Attached Images Attached Images

  2. #2
    Join Date
    May 2011
    By far the better way to make a page printable is the use
    of a separate CSS, designated: media="print".

    That way, you can keep your page code (within reason) pretty
    well the way it is, possibly adding some <div></div> tagging
    around large sections you don't want to print, such as inline
    advertising, Flash content, etc etc. These can then be styled
    display: none; in the CSS. This method also allows you greater
    control over font sizing (printers tend to 'think' in terms of pt
    rather than px or %age).


  3. #3
    Join Date
    Feb 2011
    I played around with that quite a bit, and it now prints wonderfully in google chrome, but not in firefox or IE.
    Is creating a pdf the only way to make sure it is formatted correctly in all browsers?

  4. #4
    Join Date
    May 2011
    IMHO, creating a PDF is far more hassle than getting a media="print"
    stylesheet to work correctly, across browsers.
    There are very few CSS rules concerning printing that do not operate
    as you'd expect them to in all modern browsers, including IE. Support
    for CSS3 word-wrap might still be patchy but almost everything else
    you would use should work fine. Maybe you need a bit more
    experimentation ?

    Stylesheets are so easy to manipulate and re-examining the results
    is instantaneous. Stick with it.


  5. #5
    Join Date
    Oct 2010
    Also if you find stylesheets working in Chrome, something I learned is you should then run it thru the css and markup validators at w3.org as this will usually helps me get them working in other browsers. I think chrome is just generally more forgiving =D

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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