Printing and CSS

Printing and CSS

  
I was a bit disappointed that there is no built-in facility for handing print CSS (or other CSS media types). That being said, I found a workable solution. In the eSpace's style sheet, at the end, add a section like so:

@media print {
/* Define and override styles here */
}

This will also work for mobile, projectors, etc. Something to keep in mind is that the style defined at the "top" level (not wrapped in a @media block) will cascade into the @media blocks, so you need to override a LOT of stuff on the inside a lot of the time.

Now that I'm armed with this technique, I am well on my way to having my application print out as nicely as it displays on the screen!

J.Ja
James

With this @media print{}, you only need to override the styles that you want to be diffrent from the styles that already exist right?

Or do you need to duplicate styles into the @media print for them to work when printing?

Carlos
Carlos -

That is correct. For example,

.Heading1 {
font-weight: bold;
color: red;
}

.Heading2 {
color: blue;
}

@media print {
.Heading1 {
color: black;
}
}

This style sheet, when used for print, would give us two styles:

.Heading1:
font-weight: bold (inherited from .Heading1 in the "all media" style sheet initially defined)
color: black (explicitly defined in the print media style sheet)

.Heading2:
color: blue (inherited from .Heading2 in the "all media" style sheet initially defined)

If you want to make life REALLY miserable for yourself, you can move all of your existing styles into "@media screen", but then you would need to explicitly define all of your styles in your "@media print" section too, but you wouldn't need to override them, at least.

I will probably post a follow up item in a few days showing what you'll want to change to get a good "@media print" for a typical application.

J.Ja