Although many webmasters do choose to have a separate display page for printing, it's not necessary. The W3C has this page describing how to describe the CSS definition of a printable page:
As for me, I do use printer-friendly pages and throw everything to the left and get rid of big colorful areas just because I hate when I print a page and end up getting 6 square inches of blue.
I read the link yous ent me thanks for that
Do you have an example of what this code might look like for a standard a4 sheet.
I tried portrait default. i tried specific size for page box but kept getting the same error ! Thanks
One element in defining such a page is specifying that it is primarily meant for print, as in:
HTML Code:
link rel="stylesheet" type="text/css" href="print.css" media="print" />
As for specifying how the define the page, the W3C documentation that I linked to earlier specifies it like this:
HTML Code:
@page { size 8.5in 11in; margin: 2cm }
You'll have to replace these values for A4 dimensions. I have been unable (after quite a bit of searching) to find any meaningful examples of the usage of the CSS @page directive.
Ok I have got a new style sheet that includes some of the tags I have used & redefines them for printing eg make text black etc
I have even hidden my nav panel so it doesnt print. however I still cant get the script to wrap & not cut off on the right hand side. & although I have hidden my nav bar it still leaves the space for it.
its getting there! currently it only now misses off a few words. I have added a div area around the main section & fixed this at 100% width. I was thinking of trying 90% maybe.
Frustrating but actually I am looking forward to getting this sussed & using a print style sheet on more of the sites i look after! maybe adding a feature page about it on my site ! Once we have it working that is
What I need to do after getting print ok is to work out putting page breaks in. But I have noticed on pages with right graphic that text slides under graphic. Of course I could hide the picture but .....
I tried adding width into the @page tag & wierd thing is in Firefox, opera & mozilla it works but not in IE & lets face it lots of viewers use IE. Is it maybe because the @page thing is CSS2 & IE doesnt support that yet?
Solved
It needs @media print as an outside tag in the print css then code inside it. eg
@media print {
P {
font-family : garamond, bodoni, "times new roman", serif ;
font-size : 10px ;
}
}
In my editor the normall css comes up pink. The addition @print media{} is a very dark red color.
It works anyway !! yahoo ! defo writing an article on thsi for my site after all that work
