Re: Tall image on web page is truncated when printing

["Anameier, Christine A - Eagan, MN" <christine -dot- a -dot- anameier -at- usps -dot- gov>]

You all are great. Thanks for those quick and helpful responses. I think
I've found a solution that started with the break-it-into-3-pieces-again
approach that several people advocated. 

A few comments first--
(1) I tried reducing the size of the image, but it got unreadable very
fast. 
(2) I'm trying to avoid using layout tables because of accessibility
issues. Screen-reader software does not always handle tables
gracefully... 
(3) I wanted all the text right up front so they wouldn't have to scroll
or turn pages to get the basic information.

As folks suggested, I broke the image into three pieces. The pieces are
floated (style="float: right") to the right, with the second and third
images also having a style="clear:right" attribute so they don't pile up
next to each other. 

I didn't want to split up the image without having a "continued on next
page" note on the printed pages. So I set up two embedded style sheets:
one for screen, one for print. (<style type="text/css" media="print">)
In the style sheets I defined a 'printonly' class that's set to
"display: none" on screen, but on paper it's set up to print at 90% font
size, right-aligned.  

So what I have now is basically this:

<img src="x1.gif" style="float: right">
[text goes here]
<div class="printonly" style="page-break-after: always">
Continued on next page...<br></div>
<img src="x2.gif" style="float: right; clear: right">
<div class="printonly" style="page-break-after: always">
Continued on next page...<br></div>
<img src="x3.gif" style="float: right; clear: right">

On screen, the image is seamless, since the "continued" line is not
displayed. It looks like one long screen capture down the right side of
the screen, with text on the left. 

Printed, there's a "continued on next page" note to nudge users to piece
together the screen parts. There's a forced page break after each
"Continued on next page" line. Odd thing was, the browser insisted on
centering the second image vertically. I wound up dividing up the big
screen capture carefully to make sure the second image filled most of
the height of the page.

Nifty. Thanks again to David, Dan, Mike, Bethany, and Geoff, and also to
Dick for his offlist reply.

Christine


^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

ANNOUNCING ROBOHELP STUDIO
Create professional Help systems that feature interactive tutorials and
demos with all new RoboHelp Studio. More at http://www.ehelp.com/techwr-l2

Mercer University's online MS Program in Technical Communication Management:
Preparing leaders of tomorrow's technical communication organizations today.
See www.mercer.edu/mstco or write George Hayhoe at hayhoe_g -at- mercer -dot- edu -dot- 

---
You are currently subscribed to techwr-l as:
archive -at- raycomm -dot- com
To unsubscribe send a blank email to leave-techwr-l-obscured -at- lists -dot- raycomm -dot- com
Send administrative questions to ejray -at- raycomm -dot- com -dot-  Visit
http://www.raycomm.com/techwhirl/ for more resources and info.