Forcing images to fit on a printed page with CSS - Possible?

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1892
  • Loc: Las Vegas

Post 3+ Months Ago

Greetings y'all!
I'm in the process of writing a print page for the Everquest maps on my site. I want to give the users the highest quality map I can. I have tried using high quality images, however that usually results in the maps getting cut off on the right side if the image is too large.

Is it possible, using CSS, to force an image to fit within the print area?

For reference, here's some info about the maps:
    The maps themselves are simple text files that store line, point and color data.
    I generate the images on the fly, so I can make them any size I need
    The generated images are basically line art in png format, so even large images are relatively small in terms of filesize.
    I use php w/GD2 to generate the images, and as far as I can tell, it has no control over the pixel density of the image (ie. all images are 72dpi)

Any help, suggestions, pointers etc. is appreciated.
Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

You can set widths in inches or in centimeters (or in points) within the print media at-rule. Please tell me if this works well.

Of course, you cannot "force" anything on the World Wide Web: there are no guarantees that a person isn't printing on four-inch wide paper. ;-)
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1892
  • Loc: Las Vegas

Post 3+ Months Ago

Sam Hughes wrote:
You can set widths in inches or in centimeters (or in points) within the print media at-rule. Please tell me if this works well.

Of course, you cannot "force" anything on the World Wide Web: there are no guarantees that a person isn't printing on four-inch wide paper. ;-)


Thanks for the reply. Do you have any examples? my print CSS skills are very lacking.

BTW: Love the avatar :) Have you played "Peasant Quest" yet?
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Code example for CSS that apply to printed documents:
Code: [ Select ]
<link rel="stylesheet" type="text/css" media="print" href="printonly.css">


And in the CSS file:
Code: [ Select ]
img { width: 5in; height: 4in; }

and you will want to play with height and width values, use id or class selectors, etc.

You can also use it in the middle of a CSS file this way:
Code: [ Select ]
@media print {
 img { width: 5in; height: 5in; }
 }
  1. @media print {
  2.  img { width: 5in; height: 5in; }
  3.  }


but IIRC there's some browser that only understands media types if you mention it in the link element, not the CSS itself. It might be IE Mac.
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1892
  • Loc: Las Vegas

Post 3+ Months Ago

Excellent, thanks for the tips. I'll let you know how it works out.
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1892
  • Loc: Las Vegas

Post 3+ Months Ago

works like a charm, thanks again.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 58 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.