Print Style Sheets.... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> Print Style Sheets.... (7/12/2006 7:54:05)

Okay, I've written my first Print Style Sheet today, the first one that was based on CSS positioning anyway. Overall I'm happy with it, Surprisingly both IE and Opera are behaving fine, but Firefox, Mozilla and Netscape want to cut the occasional image over two pages, images that are floated with a caption that is, but I'm wondering how important this is given that a users print settings is basically out of our hands.

In Firefox, Netscape and Mozilla the user has the ability to "scale to fit", so the probem I'm experiencing at the moment can be taken care of by the end user, but I'm wondering if I'm slackening off in my approach and should do anything else to ensure ths doesn't occur.

How much effort do others put into making sure the print style sheet functions exactly properly in all major browsers?

Nicole



Tailslide -> RE: Print Style Shhets.... (7/12/2006 8:18:21)

All you can do really is get rid of the extraneous stuff (sidebars, nav, footers even images where possible) and leave everything else basically at 100% width to fit in where possible. You don't have a lot of control over how users print their stuff anyway.



caz -> RE: Print Style Shhets.... (7/12/2006 9:02:25)

You could try something like this, 

#centerpad table {
page-break-inside: avoid;}


This stops the table printing over two pages, so maybe it would do it with images. ( I don't have images printed so I can't tell off hand.)



c1sissy -> RE: Print Style Shhets.... (7/12/2006 16:07:58)

also make sure you have anything that is floated set to
float: none !important;

Alistapart.com has a couple of articles on print style sheets you might want to read up on these pages.



Nicole -> RE: Print Style Shhets.... (7/13/2006 4:04:17)

Thanks Deb,

I've read those ALA articles and it's strange but I did as you suggested and chnaged the floats to float:none and the images (which are floated right with a caption underneath all displayed inline which i was willing to accept, but upon adding float:right back into their properties in the print style sheet, they move dack to having text wrap around them and had no impact whatsoever on the way they previewed in print-preview in any of the 5 major browsers.

Nicole



c1sissy -> RE: Print Style Shhets.... (7/13/2006 5:26:49)

Make sure your linked style sheets are named correctly.
for print:
<link rel="stylesheet" type="text/css” href="sheet.css" media="print" />

For the non print stylesheet:
<link rel="stylesheet" type="text/css” href="sheet.css" media="screen" />

I'm not sure what is going on with yours Nichole, I have done a page with print styles that involved floating columns and images, and with the float none it worked.



Nicole -> RE: Print Style Shhets.... (7/13/2006 5:35:44)

It might depend on how many nested divs are floated perhaps.

I've only "Print Previewed" in these other browsers and actually printed in Firefox several times where the images were being cut. Before the site is published I'll print at least 1 page from each browser and let you know.

Nicole



c1sissy -> RE: Print Style Shhets.... (7/13/2006 5:55:17)

You just need to play with things, restyle the print sections if need be. Just remeber that when you float something that it takes it out of the flow of the document, which is why it is causing problems.

For print purposes, you might need to style the div holding the photos differently then you do for the web page.

Also don't forget to make your background white, and your font color black. Unless you need to background color to be different.



carrie -> RE: Print Style Shhets.... (9/10/2007 13:39:12)

Hi there,

I'm interested in this topic, specifically the float:none comment.
I have several pages with floated columns - a left and a right. Each column has some images and text, but no image is bigger or longer than one page. In print preview, the floated columns do not appear side by side, they will appear one on top of the other, down the left hand side of the page, with a big empty space to the right.
Combined we're talking about a total of 703 pixels here, so I'm not thinking that its because the page is too wide, but I changed the page to landscape view, and although I get a different result, it still does not display the 2 floated columns side by side like it should.
Would float:none also solve that problem? Or do you think it is something else?

Carrie



Tailslide -> RE: Print Style Shhets.... (9/10/2007 13:56:57)

The problem is that you have no control over the end users' printer setups so it's best to un-float the floats by using float none.

I also remove the navigation, footer and banner image if it's particularly large (I add a print logo specifically for printing) and also all the background images and colours so that it's usually printing normal dark text on a white background.



carrie -> RE: Print Style Shhets.... (9/10/2007 14:08:30)

Thanks Tailslide. So, are you saying it's best to have a one column layout?
If that's the case, then a webpage with two images displayed side by side (using .css floats), is not a feasible style of printing because of the variations of user settings?

I'm all for .css, but I don't remember having this problem with tables. The same 2 column layout in a talbe would print just fine, but with .css you can't do it. I don't get it.

However, let's say it's imperative to have the page print exactly how it looks on screen, with 2 floated columns. How would you accomplish that with .css?

Carrie



Tailslide -> RE: Print Style Shhets.... (9/10/2007 17:22:42)

I guess it depends - I've never had the situation where it's a big problem.

It's probably a result of the sort of sites I build. I typically would have a main content area with a few photos floated in amongst the text and then one or two floated sidebars with peripheral information. I unfloat the sidebars so that they follow on from the main content on the printed page (or I display:none them if they're not imperative). The images I generally float in the text on the screen are usually also floated in the print stylesheet - I don't un-float them and they usually print with no issue as far as I can remember anyway.

Because I always unfloat divs anyway it hadn't occurred to me that that's what happens anyway!! Checking a few of my older sites before I started using print stylesheets i find that they unfloat neatly.

I can't comment about table designs being better for printing - I've only ever built one table layout- however I do try to print stuff off regularly and I find that I often end up with stuff on several pages with those too (and they're often confusing as they won't have background images etc) and they eat up paper!

I did a bit of Googling and came up with this fact:

quote:

After a user selects “print” from the browser, the page is formatted before it is sent to the printer. The width of the layout is reduced to about 650 pixels for 8.5” x 11” paper, or 630 pixels for A4, assuming normal margins.


I've got two images next to each other still floated in a printed page BUT divs don't seem to follow the same rules so two floated divs next to each other wouldn't work.

In the end you can't really guarantee how a page will look when someone prints it because they can have their printer set up so differently, with or without background images and images showing and all sorts of different page sizes. I can't see how it's possible unless you happen to be dealing with an Intranet where you know the setup for a fact. I suppose this is why print stylesheets unfloat floats, give divs 100% widths and basically just simplify the page.

The only way to guarantee how a page would be viewed would be to turn it into a PDF and have a printer friendly version with a PDF but that seems a lot of work.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375