Need help with print CSS

[Rhino]

I am dabbling with print CSS for the first time and I need some guidance.

The web pages on my site look fine - to my untrained eye - when displayed on
the monitor in any of the standard browsers. However, I am new to print CSS
and am having trouble getting the text on my printed pages to flow
correctly.

I know that I need a separate CSS for printing than the one I use for
displaying on the monitor; I know that is accomplished by having a separate
link for each CSS in my HTML pages, like so:

<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

I've set up an @page rule in the print CSS as follows:

@page {size: auto; margin: 5%}

When I view the page in my browser and click on the Print icon, the printed
page has major problems with overlapping and truncation. My page contains an
embedded menu, an <h2> containing an <img>, e.g. <h2><img ...
align="right">My Title</h2>, and two paragraphs which should flow within the
available space to the left of the image.

The errors I see include:
- the leftmost characters of the embedded menu are truncated
- the space between the menu and the rest of the page is almost
non-existent, although it is quite a reasonable amount of space when
rendered on the screen
- the <h2>title has its rightmost characters covered by the image
- the first paragraph flows to the left of the image as it is supposed to
but some words are missing (covered by the image perhaps??) and others, that
are too long to wrap in the available space, are truncated (or covered by
the image)
- the second paragraph, which begins below the image, has words missing from
the right hand side of most of the printed lines; I had expected those words
to wrap to the next line

I thought I might be able to reduce the truncation of letters and words by
hiding the embedded menu and found out that 'dispay: none' would do that, so
I added this line to my CSS to hide the menu:

div#menu {display: none}

This had the effect of preventing the printing of the menu but didn't fix
any of my problems. I had hoped that disabling the printing of the menu
would give the rest of the content on the page more room to work with but
the remaining content is still using the exact same space as if the menu had
been printed.

So, how do I solve these problems? Also, is there any way to get the parts
of the page that are not disabled via 'display: none' to use the space that
those components would have used if they had been printed?

--
Rhino

[Andreas Prilop]

On Tue, 15 Nov 2005, Rhino wrote:

The web pages on my site

Give URL!

--
Netscape 3.04 does everything I need, and it's utterly reliable.
Why should I switch? Peter T. Daniels in <news:sci.lang>

[Rhino]

"Andreas Prilop" <nh******@rrzn-user.uni-hannover.de> wrote in message
news:Pi**************************************@s5b0 04.rrzn.uni-hannover.de...

On Tue, 15 Nov 2005, Rhino wrote:

The web pages on my site

Give URL!

Okay....

http://sfl.london.on.ca/

Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

"Andreas Prilop" <nh******@rrzn-user.uni-hannover.de> wrote in message
news:Pi**************************************@s5b0 04.rrzn.uni-hannover.de...

On Tue, 15 Nov 2005, Rhino wrote:

The web pages on my site

Give URL!

Okay....

http://sfl.london.on.ca/

Perhaps - this is a guess - it is because of the
<div class=menu id=menu>
where there is no "class" of menu in your style sheets. Change to
<div id="menu">
with quotes.

You should reduce the sfl.print.css to only items you want to be
*different* in the print version, not repeat everything.

The whole thing seems overly complicated to me. Way too many "class and
id" used.

--
-bts
-Warning: I brake for lawn deer

[Beauregard T. Shagnasty]

Beauregard T. Shagnasty replied to hisself:

Rhino wrote:

http://sfl.london.on.ca/

Oh, and there are several errors, and dozens of warnings in your CSS.

<http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsfl.london.on.ca%2F>

--
-bts
-Warning: I brake for lawn deer

[Rhino]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:mh*****************************@40tude.net...

Rhino wrote:

"Andreas Prilop" <nh******@rrzn-user.uni-hannover.de> wrote in message
news:Pi**************************************@s5b0 04.rrzn.uni-hannover.de...

On Tue, 15 Nov 2005, Rhino wrote:

The web pages on my site

Give URL!

Okay....

http://sfl.london.on.ca/

Perhaps - this is a guess - it is because of the
<div class=menu id=menu>
where there is no "class" of menu in your style sheets. Change to
<div id="menu">
with quotes.

You should reduce the sfl.print.css to only items you want to be
*different* in the print version, not repeat everything.

The whole thing seems overly complicated to me. Way too many "class and
id" used.

Sigh.... Yes, that's probably true. It evolved in fits and starts as I
learned new things. I should probably rethink the whole HTML/CSS design to
use only the best techniques throughout; it should seriously simplify
everything if I do. But I don't have time for that right now - maybe in a
few months if things go according to plan - so any suggestions you can offer
would be greatly appreciated.

What's causing the loss of text in my paragraphs?

Rhino

[Rhino]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:g3***************************@40tude.net...

Beauregard T. Shagnasty replied to hisself:

Rhino wrote:

http://sfl.london.on.ca/

Oh, and there are several errors, and dozens of warnings in your CSS.

<http://jigsaw.w3.org/css-validator/v...Fsfl.london.on
..ca%2F>

Oops!

I was pretty sure that I had gotten a clean validation from the screen
version of the CSS when I last checked it (after revising the HTML to use
imbeds). I don't know how all those errors crept in.... Well, obviously, I'm
going to need to sort those out before I do anything else; the CSS can't do
a proper job if it is written so poorly. Maybe if I fix the errors, the lost
text will reappear....

Rhino

[Rhino]

"Rhino" <no***********************@nospam.com> wrote in message
news:iJ*******************@news20.bellglobal.com.. .

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:g3***************************@40tude.net...

Beauregard T. Shagnasty replied to hisself:

Rhino wrote:
> http://sfl.london.on.ca/
Oh, and there are several errors, and dozens of warnings in your CSS.

<http://jigsaw.w3.org/css-validator/v...Fsfl.london.on .ca%2F>

Oops!

I was pretty sure that I had gotten a clean validation from the screen
version of the CSS when I last checked it (after revising the HTML to use
imbeds). I don't know how all those errors crept in.... Well, obviously,

I'm going to need to sort those out before I do anything else; the CSS can't do a proper job if it is written so poorly. Maybe if I fix the errors, the lost text will reappear....

Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

What's causing the loss of text in my paragraphs?

Dunno. I see all the text when doing a Print Preview. Got any details?
Which page? What text is lost?

--
-bts
-Warning: I brake for lawn deer

[Rhino]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:1c******************************@40tude.net.. .

Rhino wrote:

What's causing the loss of text in my paragraphs?

Dunno. I see all the text when doing a Print Preview. Got any details?
Which page? What text is lost?

If I do a Print Preview on the index page,
http://sfl.london.on.ca/index.shtml, the last letter or two of each item in
the menu on the left get truncated.

In the body of the page, occasional words go missing.

Example 1: The second sentence in the first paragraph is missing the word
"fiction", i.e. it SHOULD say "We meeting month in London to discuss science
fiction." but the last word of the sentence is missing.

Example 2: The third sentence of the second sentence should be "As long as
you have an interest in Scence Fiction and a working knowledge of English,
you should enjoy yourself at our meetings." but 'long' the second word of
the sentence is missing.

Example 3: The last sentence in the body, "Click on the topic links in the
index on the left to navigate within this site." is missing its last word
too.

The printed page matches what Print Preview predicts so it doesn't look as
if Print Preview is at fault here....

Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

If I do a Print Preview on the index page,
http://sfl.london.on.ca/index.shtml, the last letter or two of each item in
the menu on the left get truncated.

Must be your browser. <g>

http://k75s.home.att.net/show/sfl.jpg

--
-bts
-Warning: I brake for lawn deer

[Rhino]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:1h*****************************@40tude.net...

Rhino wrote:

If I do a Print Preview on the index page,
http://sfl.london.on.ca/index.shtml, the last letter or two of each item in the menu on the left get truncated.

Must be your browser. <g>

http://k75s.home.att.net/show/sfl.jpg

For a second there I thought you were being a smartass but when I looked at
your screen cap and then checked out my web page in Firefox and Opera, I
found that the page looked just fine in Print Preview and printed just fine
as well.

It *is* my (main) browser that is experiencing the problem (IE6 with SP1)!!

Any ideas how to coax it to behave? I know that some of the people who might
want to print pages from my website and going to be IE users who will not
willingly install another browser....

Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:1h*****************************@40tude.net...

Rhino wrote:

If I do a Print Preview on the index page,
http://sfl.london.on.ca/index.shtml, the last letter or two of each item in the menu on the left get truncated.
Must be your browser. <g>

http://k75s.home.att.net/show/sfl.jpg

For a second there I thought you were being a smartass

<lol!>
but when I looked at your screen cap and then checked out my web page
in Firefox and Opera, I found that the page looked just fine in Print
Preview and printed just fine as well.

It *is* my (main) browser that is experiencing the problem (IE6 with
SP1)!!
Must be your browser. <g>

http://k75s.home.att.net/show/sfl-ie6.jpg

I think it's you. :-) I scraped a couple of centimeters of dust off my
IE6 (Win2K SP4), and it looks pretty much the same as my Firefox.
Any ideas how to coax it to behave? I know that some of the people
who might want to print pages from my website and going to be IE
users who will not willingly install another browser....

An animated gif? "GET FIREFOX! GET FIREFOX! ..."

http://k75s.home.att.net/images/firefoxtrust.gif

--
-bts
-Warning: I brake for lawn deer

[Rhino]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:cl******************************@40tude.net.. .

Rhino wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:1h*****************************@40tude.net...

Rhino wrote:

If I do a Print Preview on the index page,
http://sfl.london.on.ca/index.shtml, the last letter or two of each

item in

the menu on the left get truncated.

Must be your browser. <g>

http://k75s.home.att.net/show/sfl.jpg

For a second there I thought you were being a smartass

<lol!>

but when I looked at your screen cap and then checked out my web page
in Firefox and Opera, I found that the page looked just fine in Print
Preview and printed just fine as well.

It *is* my (main) browser that is experiencing the problem (IE6 with
SP1)!!

Must be your browser. <g>

http://k75s.home.att.net/show/sfl-ie6.jpg

I think it's you. :-) I scraped a couple of centimeters of dust off my
IE6 (Win2K SP4), and it looks pretty much the same as my Firefox.

Any ideas how to coax it to behave? I know that some of the people
who might want to print pages from my website and going to be IE
users who will not willingly install another browser....

An animated gif? "GET FIREFOX! GET FIREFOX! ..."

http://k75s.home.att.net/images/firefoxtrust.gif

Now I really AM confused! Why would MY copy of IE6 lose letters off the end
of words as well as whole words but YOUR copy of IE6 doesn't??

Could this be a service pack issue? I'm on XP Pro with SP1 and am way
overdue to go to SP2. Could there be something in SP2 that fixes this? That
might be a reasonable explanation for the differences AND a possible
solution, all in one. Any idea where to find out what SP2 fixes? If there's
something about fixing printing issues in IE6, we'll have the smoking gun
that we need to close this case....

Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

Now I really AM confused! Why would MY copy of IE6 lose letters off
the end of words as well as whole words but YOUR copy of IE6
doesn't??
My copy is smarter than your copy? :-)
Could this be a service pack issue? I'm on XP Pro with SP1 and am way
overdue to go to SP2. Could there be something in SP2 that fixes
this? That might be a reasonable explanation for the differences AND
a possible solution, all in one. Any idea where to find out what SP2
fixes? If there's something about fixing printing issues in IE6,
we'll have the smoking gun that we need to close this case....

Seriously, it is probably some setting in yours. Perhaps your XP version
doesn't handle user-set font sizes as my older W2K version does (even
though mine is IE6 with "latest updates."

I have my IE default text size normally set at "smaller". However, when
changing it to "medium" or "larger" I still see all your text, except
fewer words per line as expected, screen or print. The words are all
still there.

Maybe someone else needs to chime in with XP SP1 or 2 and IE.

--
-bts
-Warning: I brake for lawn deer

[Garmt de Vries]

Rhino wrote:

Sigh.... Yes, that's probably true. It evolved in fits and starts as I
learned new things. I should probably rethink the whole HTML/CSS design to
use only the best techniques throughout; it should seriously simplify
everything if I do. But I don't have time for that right now - maybe in a
few months if things go according to plan - so any suggestions you can offer
would be greatly appreciated.

When you get around to a redesign, you may want to consider leaving out
some items on the printed page: the menu, the W3C icons, the flag.
Perhaps some of the photos as well, as the black background will cost
lots of ink. But they are pretty photos...

You already set colour to black on white explicitly, that's good. You
may also want to make the links black (at least don't make them white,
as you do now!). For print, a serif font may be better, but that's a
matter of taste.

Some other things that may be useful:

On my own pages, I have a copyright statement in the footer:
Copyright <a href="http://www.ourdomain.nl">Our organisation</a>
In the print CSS, I add the URL of the site with
#footer a:after { content: " (www.ourdomain.nl)"; }
This may not work for some browsers, but it doesn't do any harm.

On a page with an address list, I have a clickable alphabet at the top.
This is useless in print, so I get rid of it. Idem for images, logos,
links etc. that aren't useful on paper.

I also make forms a bit more "pen-and-paper-friendly".

For paged media:
th, td { page-break-inside: avoid; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
p { orphans: 2; widows: 2; }

There are plenty more little things you can do to make your pages print
well. Good luck!

--
Garmt de Vries.

[Rhino]

"Garmt de Vries" <gd*****@hotmail.com> wrote in message
news:11*********************@g44g2000cwa.googlegro ups.com...

Rhino wrote:

Sigh.... Yes, that's probably true. It evolved in fits and starts as I
learned new things. I should probably rethink the whole HTML/CSS design to use only the best techniques throughout; it should seriously simplify
everything if I do. But I don't have time for that right now - maybe in a few months if things go according to plan - so any suggestions you can offer would be greatly appreciated.

When you get around to a redesign, you may want to consider leaving out
some items on the printed page: the menu, the W3C icons, the flag.
Perhaps some of the photos as well, as the black background will cost
lots of ink. But they are pretty photos...

You already set colour to black on white explicitly, that's good. You
may also want to make the links black (at least don't make them white,
as you do now!). For print, a serif font may be better, but that's a
matter of taste.

Some other things that may be useful:

On my own pages, I have a copyright statement in the footer:
Copyright <a href="http://www.ourdomain.nl">Our organisation</a>
In the print CSS, I add the URL of the site with
#footer a:after { content: " (www.ourdomain.nl)"; }
This may not work for some browsers, but it doesn't do any harm.

On a page with an address list, I have a clickable alphabet at the top.
This is useless in print, so I get rid of it. Idem for images, logos,
links etc. that aren't useful on paper.

I also make forms a bit more "pen-and-paper-friendly".

For paged media:
th, td { page-break-inside: avoid; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
p { orphans: 2; widows: 2; }

There are plenty more little things you can do to make your pages print
well. Good luck!

Thanks for the suggestions; many of them are very good and I expect to use
them in my redesign.

When I suppress the printing of elements like the menu and validation logos,
how hard would it be to make the CSS use the newly-available space for the
parts of the text that I do want to print? For example, if I choose not to
print the menu, can I get the photographs and paragraphs to print on the
parts of the page where the menu would normally be printed?

Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

When I suppress the printing of elements like the menu and validation
logos, how hard would it be to make the CSS use the newly-available
space for the parts of the text that I do want to print? For example,
if I choose not to print the menu, can I get the photographs and
paragraphs to print on the parts of the page where the menu would
normally be printed?

Yes you can. In the sample I posted earlier, I use this in my screen
style sheet, abbreviated here:

#boxcontent {
margin: 1.5em 0em 1em 10.5em; /* for content on right */

The print style sheet changes that to:

#boxcontent {
margin: 0; width: 95%;

...with the menu bits set to display: none

--
-bts
-Warning: I brake for lawn deer

[Garmt de Vries]

Rhino wrote:

When I suppress the printing of elements like the menu and validation logos,
how hard would it be to make the CSS use the newly-available space for the
parts of the text that I do want to print? For example, if I choose not to
print the menu, can I get the photographs and paragraphs to print on the
parts of the page where the menu would normally be printed?

Sure. For example, put in your HTML:

<body>
<div id="content">(Content)</div>
<div id="menu">(List of links)</div>
</body>

and in your CSS:

@media screen {
#menu { width: 10em; position: absolute; top: 0; left: 0; }
#content { margin: 0 0 0 10em; }
}
@media print {
#menu { display: none; }
#content { margin: 0; }
}

You could even float the image to the left for print, while having them
centered above the text on screen. It's all up to you!

--
Garmt de Vries.

[Rhino]

[snip]

When I suppress the printing of elements like the menu and validation logos, how hard would it be to make the CSS use the newly-available space for the
parts of the text that I do want to print? For example, if I choose not to
print the menu, can I get the photographs and paragraphs to print on the
parts of the page where the menu would normally be printed?

Thank you both for your excellent suggestions on taking advantage of the
space that I gain by suppressing the menu and other elements!

Rhino

[Stephen Poley]

On Tue, 15 Nov 2005 23:58:14 -0500, "Rhino"
<no***********************@nospam.com> wrote:

Now I really AM confused! Why would MY copy of IE6 lose letters off the end
of words as well as whole words but YOUR copy of IE6 doesn't??
Probably something to do with it being an operating system component,
not a browser. [1]
Could this be a service pack issue? I'm on XP Pro with SP1 and am way
overdue to go to SP2. Could there be something in SP2 that fixes this? That
might be a reasonable explanation for the differences AND a possible
solution, all in one. Any idea where to find out what SP2 fixes? If there's
something about fixing printing issues in IE6, we'll have the smoking gun
that we need to close this case....

It could be a service pack issue. It could also be worse. I have had a
page that I (finally) got to display correctly in IE6 on my computer
show two *different* errors on the computers of two colleagues running
nominally the same browser on the same company network.

The key to dealing with Internet Explorer is knowing when it's time to
give up.
[1] That may sound like a flippant remark, but it's quite serious - that
could well be the main reason.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Rhino]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:1g****************************@40tude.net...

Rhino wrote:

Now I really AM confused! Why would MY copy of IE6 lose letters off
the end of words as well as whole words but YOUR copy of IE6
doesn't??

My copy is smarter than your copy? :-)

What do you feed yours? Lots of fish? :-)

Could this be a service pack issue? I'm on XP Pro with SP1 and am way
overdue to go to SP2. Could there be something in SP2 that fixes
this? That might be a reasonable explanation for the differences AND
a possible solution, all in one. Any idea where to find out what SP2
fixes? If there's something about fixing printing issues in IE6,
we'll have the smoking gun that we need to close this case....

Seriously, it is probably some setting in yours. Perhaps your XP version
doesn't handle user-set font sizes as my older W2K version does (even
though mine is IE6 with "latest updates."

I have my IE default text size normally set at "smaller". However, when
changing it to "medium" or "larger" I still see all your text, except
fewer words per line as expected, screen or print. The words are all
still there.

Maybe someone else needs to chime in with XP SP1 or 2 and IE.

For what it's worth, I upgraded to SP2 just now (and rebooted) but the Print
Preview still shows the last letters of some of the index words getting
chopped off and some of the words in the main body of the page disappearing
in IE6.

There goes the obvious reason for this weird behaviour!

What else could be causing this?

It really bugs me that your up-to-date IE6 works fine and my up-to-date IE6
doesn't. I've got the newer version of Windows, XP, but that shouldn't
really make a difference should it? Especially not a negative difference?
Isn't the IE code the same on both XP and Win2000?

Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

Isn't the IE code the same on both XP and Win2000?

Only the Shadow knows ...

--
-bts
-Warning: I brake for lawn deer

[kchayka]

Rhino wrote:

[re: http://sfl.london.on.ca/]

For what it's worth, I upgraded to SP2 just now (and rebooted) but the Print
Preview still shows the last letters of some of the index words getting
chopped off and some of the words in the main body of the page disappearing
in IE6.

Actually, I see a problem with mozilla, too, but the degree varies with
text size. In print preview, if you look closely you'll see the text
isn't all aligned to the right edge of the menu. "Christmas Party 2004"
sticks out noticeably at my larger-than-average default text size. Zoom
out and it's not so bad. IE is probably just chopping them off at the edge.

You really should rewrite the menus to use list markup, rather than a
whole bunch of spans. You'll probably get better results all around,
plus it will degrade much better.
<URL:http://css.maxdesign.com.au/listamatic/>

For disappearing text in the content area, I didn't notice it. But
lookup the peek-a-boo bug. The cure for it cures many other IE ailments,
too.
Hint: position:relative is probably the key.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Rhino]

"kchayka" <us****@c-net.us> wrote in message
news:3u************@individual.net...

Rhino wrote:

[re: http://sfl.london.on.ca/]

For what it's worth, I upgraded to SP2 just now (and rebooted) but the
Print
Preview still shows the last letters of some of the index words getting
chopped off and some of the words in the main body of the page
disappearing
in IE6.
Actually, I see a problem with mozilla, too, but the degree varies with
text size. In print preview, if you look closely you'll see the text
isn't all aligned to the right edge of the menu. "Christmas Party 2004"
sticks out noticeably at my larger-than-average default text size. Zoom
out and it's not so bad. IE is probably just chopping them off at the
edge.

You really should rewrite the menus to use list markup, rather than a
whole bunch of spans. You'll probably get better results all around,
plus it will degrade much better.
<URL:http://css.maxdesign.com.au/listamatic/>

Thank you VERY much for that suggestion - and the link! I have been wanting
to create a simpler markup for the menu. I borrowed the current approach
from a friend who conceived it for one of his sites but hadn't thought of
how to do it using lists. The link you gave shows me a multitude of
interesting ways of displaying the menu and controlling the appearance
without all of those spans.
For disappearing text in the content area, I didn't notice it. But
lookup the peek-a-boo bug. The cure for it cures many other IE ailments,
too.
Hint: position:relative is probably the key.

I had a _feeling_ that might have something to do with it. Absolute position
is normally a no-no with any GUI so I was always a little nervous about
using that. :-)

Thanks again!

Rhino