Instiki users - May 2006 - [Instiki] css for print media

I just wanted to share a quick Stylesheet tweak for printing out Instiki pages.

I noticed that when I printed a page out, the text was gray, not
black. This is fine for on screen, since it''s easier to read than
black-on-white, but it''s not suitable for printing.

CSS has a media type for print, which can be added to your stylesheet
tweaks by wrapping the relevant CSS in @media print{}.

For example, to get black text, a white background, uncolored and only
subtly underlined links:

@media print {
    body {
        color: black;
        background-color: white;
        font-size: 10pt;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black;
    }

    a, a:link, a:active, a:visited {
        color: black;
        border-bottom: thin dotted;
        text-decoration: none;
    }

  h1#pageName, .newWikiWord a, a.existingWikiWord, .newWikiWord
a:hover, #TextileHelp h3 {
      color: black;
    }
}

This won''t change the look of the page when you go to "Views:
Print"
for a particular page, but it should take effect when you actually
print the page.

-- 
mark larios
<http://raysend.com/mark/>

Nice work, Mark. Thanks for sharing this good work. I was WONDERING how to  
get a print media style sheet into the CSS, as I use such on all my web  
site.

I have to disagree with you here:
> I noticed that when I printed a page out, the text was gray, not
> black. This is fine for on screen, since it''s easier to read than
> black-on-white, but it''s not suitable for printing.
It''s NOT easier to read, as even black on white, on a screen, is less  
contrasty, and has poorer resolution than the equivalent on printed page.  
This is one reason why people don''t like reading on a screen, and  
appreciate it when the font is larger than on a printed page. It''s also
an
accessibility issue, as the W3C accessiblity guidelines have made clear -  
lower the contrast and you make things hard for the vision-impaired.

I really wish people would stop this business of non-black fonts onscreen.  
Some of it is almost illegible due to extreme low levels of contrast. It  
look like another case "gee whiz!" design. As Ron Jeffries (Extreme  
Programming) puts it -

"We don''t get in trouble because we don''t know what
simple is, we get in
trouble because we are too bloody clever and like to do things that are  
fancy in our own estimation. We enjoy running our minds and doing cool  
things. Just cut it out."

I will now climb down off my soap box...

Thanks again for the CSS tweak. Really cool.

- t.
>
> CSS has a media type for print, which can be added to your stylesheet
> tweaks by wrapping the relevant CSS in @media print{}.
>
> For example, to get black text, a white background, uncolored and only
> subtly underlined links:
>
> @media print {
>     body {
>         color: black;
>         background-color: white;
>         font-size: 10pt;
>     }
>
>     h1, h2, h3, h4, h5, h6 {
>         color: black;
>     }
>
>     a, a:link, a:active, a:visited {
>         color: black;
>         border-bottom: thin dotted;
>         text-decoration: none;
>     }
>
>   h1#pageName, .newWikiWord a, a.existingWikiWord, .newWikiWord
> a:hover, #TextileHelp h3 {
>       color: black;
>     }
> }
>
> This won''t change the look of the page when you go to "Views:
Print"
> for a particular page, but it should take effect when you actually
> print the page.
>


-- 

===============================================Tom Cloyd, MS MA, LMHC
Private practice Psychotherapist
Bellingham, Washington, U.S.A: (360) 920-1226
<< TC.BestMindHealth.com / BestMindHealth.com >>
<< tomcloyd at bestmindhealth.com >>
================================================