Page 1 of 2

Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 7:02 am
by simonmlewis
Hi
We need to provide a button that allows the user to print a user-friendly printer friendly page of what they are looking at in their browser.

I have tried it using just the include file, but I get all the HTML too.

Is there a simple way of doing it? Note that most of the content will be DB driven.

Simon

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 7:11 am
by VladSun
How about defining a CSS sesction (or separate file) contining rules for media print ?

http://www.w3.org/TR/CSS21/media.html

This way, you can "hide" all unnessesary content, change font size, even hide pictures when printing is requested.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 7:21 am
by simonmlewis
It states that using this:
[text]@media print {
body { font-size: 10pt }
}[/text]
Will assign it to be used for printing.
What I don't understand is how to put that into the Include file, and have it only use that print.css file when needed. As the file is a .inc, not a .php.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 8:11 am
by VladSun
Just use the HTML as usual. No need to generate/include separate "printer-frinedly" pages.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 8:16 am
by simonmlewis
So how do you tell it to use the print.css stylesheet instead?
And not use that when u are not viewing the include file within the main viewing thru a browser 'not' for print.

Basically - how does the browser distinguish between PRINT view and NORMAL view?

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 8:18 am
by VladSun
simonmlewis wrote:Basically - how does the browser distinguish between PRINT view and NORMAL view?
The browser knows what you are doing - viewing, printing etc. It loads the appropriate @media section for each output media.

That's what @media is for.
The NORMAL view is considered @media screen

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 8:46 am
by simonmlewis
I'm so sorry, but I cannot grasp HOW you make the browser know you are needing that file for printing only?
In theory you have a link that says "Print this", and it opens the page in a format with the @print so it shows only the basic HTML.

But now?? You said you don't need a special page to do this. So the only other option i can see is to open profile.inc, for example and it just opens it in the basic format.

But again, if I am placing the print.css file in there, how do I prevent that CSS from overwriting the CSS in the index.php file.

I don't get it. sorry.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 9:06 am
by VladSun
When you press the "Print page" menu item, the browser rerenders the current HTML page with the @media print CSS rules and sends the newly rendered paged to the printer.
The HTML code for viewing on the screen and printing is the same, different CSS rules are applied.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 9:12 am
by simonmlewis
Ohhhhhh I see what you mean.
It doesn't physically open anything - it's the print command in the browser that then uses that stylesheet.
Ok. will give it a go and let you know what happens.

Ta.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 10:55 am
by simonmlewis
[text]@media print {
body { font-size: 10pt }
}[/text]

This is in my print.css file.
I have just tried it, but it prints everything. All big images the lot.

How do you, in the CSS, disable certain images and side bars, banners etc?

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 11:26 am
by VladSun
A lot of CSS questions :) You'll need to read some docs:
http://www.w3schools.com/css/default.asp

The display property is probably what you are looking for:

Code: Select all

IMG
{
    display: none;
}

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 11:39 am
by Anant
the quick win would be - provide the button saying "for printer friendly version click here" and then redirect it the second page without any unnecessary images, header or footer if you don't need it and just call the data form the database if it's dynamic site or copy paste the data, if it's static website. Well but it's just for a quick win purpose without using any css and all.

If you want to get it right without any hack - you need to define proper print css. Google is your friend here.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 11:43 am
by VladSun
That's not a good advice, IMHO ...
1) a second HTTP request is made
2) a second page to maintain
3) that's what CSS is for!

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 12:04 pm
by simonmlewis
Ok....I cannot have a secondary page doing everything the first one does, as we have loads of pages needing it.
It may be that it's just not possible to do it.

Re: Printer Friendly on-the-fly??

Posted: Wed Jan 12, 2011 12:46 pm
by s992
If you need to disable only certain images, apply a class to them. For example, you might name your class "no-print."

Code: Select all

@media print {
    img.no-print {
        display:none;
    }
}