Forum Question: How Do I Get a Complex Web Page To Print Like It Looks On the Web?

There’s a kickstarter project page I want to print.
But when I go to Safari’s print, I get the left column, footer data, and then the right column, with none of the right formatting. How do I get it to print like it looks on the web?
I have this happen with other pages too, so it’s not just a Kickstarter thing. Trying it in Firefox 9.0.1 gives me the same results. Mac OS 10.5.8.
Anthony Burokas

Comments: 2 Responses to “How Do I Get a Complex Web Page To Print Like It Looks On the Web?”

    2/12/12 @ 10:21 pm

    Well, looking at that page I can see why. There are three CSS references in the HTML. For those that don’t know, CSS (cascading style sheets) are what determines how a page looks. Commonly web developers will put the content in the HTML and the design in the CSS.
    Anyway, these three CSS references are set to be “screen” references, meaning they are only used for screen display. For printing, the developer of the site would need to use “print” CSS references — or, simply not specify that the current three CSS references are ONLY for the screen.
    Often a web site designer would have screen CSS, print CSS and CSS shared by both. This allows for nicer looking printouts. But not in this case.
    So when you go to print, it prints the content, but without most of the design missing.
    Not too much you can do about that.
    You can always do a screen grab of the page and then open that screen image in Preview and print it. There are even some Safari extensions that grab a whole page as an image, even including the part you’d need to scroll to see.

    Anthony Burokas
    2/15/12 @ 4:52 pm

    Screen grabs it was. Shame this isn’t easier.

Comments Closed.