/    Sign up×
Community /Pin to ProfileBookmark

Printer Freindly Form

Copy linkTweet thisAlerts:
Jul 11.2011

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:

[LIST]

  • [*]

    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


    • [/LIST]

    Here is a sample page
    [URL=”http://10stoptours.com/print.php?tourNo=16&sort=Number”]http://10stoptours.com/print.php?tourNo=16&sort=Number[/URL]

    [upl-file uuid=95142f6c-a4f8-4031-ba09-14c450b7fd30 size=76kB]printPreview.jpg[/upl-file]

    to post a comment
    PHP

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @chrisecclesJul 11.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).

    Chris
    Copy linkTweet thisAlerts:
    @ablatyauthorJul 11.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?
    Copy linkTweet thisAlerts:
    @chrisecclesJul 11.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.

    Chris
    Copy linkTweet thisAlerts:
    @DerokorianJul 11.2011 — 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
    ×

    Success!

    Help @ablaty spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...