How to resize images and configure page breaks in CSS for printing?

[Goi]

Hi,
I'm trying to create a separate print CSS file for a website. The CSS file disables the menus and certain images. I'm trying to get large images(600+px) to resize so that it fits properly within a page border, but I can't figure out how to do so. I've tried both "width: 100%" and "width: 100px" but the image size when printed out by IE doesn't change at all - it's still truncated on the right.

Also, page breaks don't happen where I want them obviously. I know there's a page-break-before and page-break-after command in CSS2, but other than hard coding these into specific points in the site where page break seems to happen, is there a more general way of doing it so that it is cross-browser? For example, I don't want an image cut off halfway at the bottom of the screen, nor do I want a text heading that's at the bottom of the page, with the corresponding paragraph in the next page(in this case I'd want a page break before the text heading). Is there anyway of doing that automatically?

Thanks!

 

[Goi]

anyone?

 

[Zugzwang152]

for a fool-proof solution you're probably best off resizing the images yourself and storing them separately for use only in the printable page. i *think* that IE doesn't support image resizing fully, though gecko-based browsers should (i *think*).

be patient, one of the CSS experts usually drops in within 24 h ours of a question.

 

[Goi]

if i were to have multiple versions of the images, how would i specify within the <img> tag which image is for print and which is for screen though?

 

[oog]

the way i've seen CSS used to specify images is with the background: url('...') directive.

 

[Zugzwang152]

Originally posted by: Goi
if i were to have multiple versions of the images, how would i specify within the <img> tag which image is for print and which is for screen though?

you would use a server-side scripting language to determine whether the user has specified he wants to view a printable page, and display the appropriate set of images that way.

 

[hellman69]

Multiple images:
Two css files, for one set the media="screen", for the other, set the media="print"
Give each img an id ("img", "img_print")
In the screen css file, put img#img_print { display:none; }
In the print css file, put img#img { display:none; }

As for forcing page breaks, you will need to use the page-break-before/after. Just define them for the print css file for your heading blocks.

Trevor

 

[Goi]

Thanks for the help. I actually figured out that I can define the size of the image within a CSS class. It works if I define a class in my <img> tag...I was defining a class for a <p> tag that included the <img> which was why for some reason it didn't work. The multiple images tidbit is useful though.

My point about the page-break-before/after is that they are hard coded aren't they? Since different browsers will print the page with different font sizes for example(firefox in particular has a smaller print font size than IE AFAIK, wouldn't the exact location of a page break be browser dependent? Hence, if I put a page-break-before/after at 1 location that works for 1 browser, it might look weird when printed from another browser.

 

[hellman69]

Indeed, you have very little control when printing (and you didn't even mention what their margins are set at). You can, in your print css, simply force fixed sizes for fonts and other block elements. That will help, but then those users with a different DPI setting will screw that up as well. What I like to do is allow for a large margin of error for page sizing, large enough that they could print in landscape. It leaves a lot of white space, but it's the only way I could reliable have decent print outs for a variety of users.

Trevor