Print Stylesheet and Flowing Layout

Forum Moderators: not2easy

Message Too Old, No Replies

Print Stylesheet and Flowing Layout

What factors should be considered?

MatthewHSE

12:14 pm on Jan 28, 2004 (gmt 0)

I'm working on a redesign of my site and I want to include a print stylesheet. Hiding unnecessary images, etc. Basically, I want the text to show and not much else.

I also want the text to stretch clear across the printed piece of paper, within the user's printer margins, of course. What factors need to be taken into account to get a good printed page? For instance, if I just put all the text into a 100% wide div, will it all print on the paper, wrapping as necessary? And what about page breaks? Does screen-resolution come into play here?

Any advice will be appreciated. Last redesign I went on a CSS binge (upgrade from tables). For this redesign I'm going even more gung-ho on CSS, but accessibility is my primary concern. And naturally print stylesheets are part of that! ;o)

Thanks,

Matthew

grahamstewart

12:30 pm on Jan 28, 2004 (gmt 0)

A normal div with no width setting will be the full width of whatever the containing element is.

On an HTML page the containing element is the <body> tag.
On a printed page the containing element is the printable area.
So in other words, yeah it will wrap properly.

As for page breaks, CSS has support for paged media but I don't think many browsers handle it.

TheDoctor

10:27 pm on Jan 29, 2004 (gmt 0)

You can use different fonts on the printed page from the ones you use on the screen. This might be useful, as people prefer sans-serif fonts on screen and serif on printed pages. (See message 15 in this thread [webmasterworld.com].)

Also note that different browsers print pages slightly differently, so don't assume that a fluid layout (or even a non-fluid one!) will appear to the user the way you see it. But, as a designer of fluid web pages, you would presumably have expected that :-)

And, of course, your print stye sheet should hide the "top of page" links as well as the menu ;-)