backgroun color in media print

#1

I try to define this
@media print {
span.red {border: 1px solid black;
background-color: red}
}

and use it in html code by this way

Color:     red

If I do the same for @media screen then this work as expected, but not for
@media print.
I can't to find if this is feature or cross browsers bug ;-)

To explain what I can do: I want to create a small rectangle filled by some
color, in this example red. I tried to use span, div, table, p, but nothing
work for printer. What is the right way?
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your mail from
another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

#2

"Petr Vileta" <stoupa (AT) practisoft (DOT) cz> wrote

Quote:

I try to define this
@media print {
span.red {border: 1px solid black;
background-color: red}
}

and use it in html code by this way

p>Color:     red</p

If I do the same for @media screen then this work as expected, but not for
@media print.
I can't to find if this is feature or cross browsers bug ;-)

By default browsers do not print background colours or images (to save ink).
You will have to adjust your browser settings to make this happen. You
cannot adjust *my* settings to make it happen here.

Quote:

To explain what I can do: I want to create a small rectangle filled by
some color, in this example red. I tried to use span, div, table, p, but
nothing work for printer. What is the right way?

Use an image and hope that your viewers browser is set to print images.

Quote:

Please reply to <petr AT practisoft DOT cz

Nope.

--
Richard.

#3

Scripsit Petr Vileta:

Quote:

I try to define this
@media print {
span.red {border: 1px solid black;
background-color: red}
}

The name "red" is generally poor for a class: it says nothing about any
meaning, just the intended visual presentation. Anyone who only sees the
markup and the style sheet has little clue of what might be suitable for
a style sheet intended for black and white rendering, or aural
presentation.

Quote:

and use it in html code by this way

p>Color:     red</p

Sounds your page is really _about_ colors and you wish to show what
"red" is (and you identify it with the meaning of the keyword red in
CSS). Then you should consider setting the width of the red box in CSS,
instead of the coarse and unreliable control you achieve by using
several no-break spaces.

Quote:

If I do the same for @media screen then this work as expected, but
not for @media print.
I can't to find if this is feature or cross browsers bug ;-)

It works as expected: browsers are more or less expected to ignore
background colors when printing, to avoid wasting ink. This however is
typically a browser configuration option.

Quote:

To explain what I can do: I want to create a small rectangle filled
by some color, in this example red. I tried to use span, div, table,
p, but nothing work for printer. What is the right way?

Using an image. Of course, it may or may not be printed, and the printer
may or may not be capable and configured to print colors.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#4

Petr Vileta wrote:

Quote:

I try to define this
@media print {
span.red {border: 1px solid black;
background-color: red}
}

and use it in html code by this way

p>Color:     red</p

Resolved ;-)

I found that all mostused browsers are able to print colored border, so I
rewrote my code.

@media print {
span.red {
margin: 0;
padding: 0;
border-width: 8px 8px 0 8px;
border-color: #ff0000 !important;
font-size: 1px;
}
}

Color:   red

To clarify my goal - this is used in administrator pages to allow to
administrator to print web content and send printed pages to customer via
snail mail.
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

#5

Petr Vileta wrote:
<snip>

Quote:

Resolved ;-)
I found that all mostused browsers are able to print colored border, so
I rewrote my code.

@media print {
span.red {
margin: 0;
padding: 0;
border-width: 8px 8px 0 8px;
border-color: #ff0000 !important;
font-size: 1px;
}
}

p>Color:   red</p

Not in my browsers...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#6

Jonathan N. Little wrote:

Quote:

Petr Vileta wrote:
snip
Resolved ;-)
I found that all mostused browsers are able to print colored border,
so I rewrote my code.

@media print {
span.red {
margin: 0;
padding: 0;
border-width: 8px 8px 0 8px;
border-color: #ff0000 !important;
font-size: 1px;
}
}

p>Color:   red</p

Not in my browsers...
Please can you tell me what browser are you using? I suppose some "graphic"

browser, not text-based ;-)
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

#7

Petr Vileta wrote:

Quote:

Jonathan N. Little wrote:
Petr Vileta wrote:
snip
Resolved ;-)
I found that all mostused browsers are able to print colored border,
so I rewrote my code.

@media print {
span.red {
margin: 0;
padding: 0;
border-width: 8px 8px 0 8px;
border-color: #ff0000 !important;
font-size: 1px;
}
}

p>Color:   red</p

Not in my browsers...
Please can you tell me what browser are you using? I suppose some
"graphic" browser, not text-based ;-)

Okay let's see

SeaMonkey 1.1.7, Firefox 2.0.0.11, NN 7.1, IE 5.01, IE 5.5, IE 6.01, IE
7, Opera 7.45, Opera 8.51, Opera 9.23, Konqueror 3.5.8...

Didn't bother with IE 4 & 3 and NN4.6 they don't support @ rules...

And I bet that same for most any other person's browser. You see
printing color backgrounds is a *user* setting which is off by default
in browsers. Therefore unless the user has *his* browser specifically
set to print backgrounds in color, there is nothing you can do in your
css to force it upon him for an html document. His user setting trumps
your css even with !important.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#8

Scripsit Jonathan N. Little:

Quote:

You see
printing color backgrounds is a *user* setting which is off by default
in browsers.

Yes, as already explained in the thread. But now Petr presented code
(failing to provide a URL, thereby making testing more difficulting)
that creates a colored box using _border_ properties.

That's a creative invention, but at least as implemented in the code,
I'd expect the idea to fail on any browser where a minimum font size has
been set (the code apparently relies on setting font size to 1px) or
that has been set to ignore font size settings on web pages.

And the whole issue doesn't really look like a matter of authoring with
stylesheets for the World Wide Web.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#9

Jukka K. Korpela wrote:

Quote:

Yes, as already explained in the thread. But now Petr presented code
(failing to provide a URL, thereby making testing more difficulting)
that creates a colored box using _border_ properties.

I can't to provide URL because this is password protected "admin" pages.

Quote:

That's a creative invention, but at least as implemented in the code,
I'd expect the idea to fail on any browser where a minimum font size
has been set (the code apparently relies on setting font size to 1px)
or that has been set to ignore font size settings on web pages.

Thank you for mention of 1px font size. What do you think - what font size can

be minimal value to not be ignore/overwrite by browsers? 3px? I use IE6 and
FF2 only and not have experience with other browsers.
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

#10

"Petr Vileta" <stoupa (AT) practisoft (DOT) cz> writes:

Quote:

Thank you for mention of 1px font size. What do you think - what font
size can be minimal value to not be ignore/overwrite by browsers? 3px?
I use IE6 and FF2 only and not have experience with other browsers.

Mine (FF2) is 13px here (and I think 11px on another computer with a
different monitor and display resolution). It's a user-controllable
setting (and in FF2 can be set to either 'none' or most values between
9px and 24px - it's in Edit->Preferences->Content->(Fonts)->Advanced)

--
Chris