Results 1 to 7 of 7
  1. #1
    Join Date
    Feb 2003
    Location
    Connecticut
    Posts
    5,441

    Printer-Friendly Sites with CSS

    Many sites need to use PHP and seperate templates for printer-friendly layouts. Loads of colors can often waste printer ink, and deter people from printing important content. CSS helps solve this issue without the user ever having to click an extra button.

    There's two ways you can utilize printer-friendly CSS. Firstly, you can link to an off-page document by placing the following code in your <head></head>.
    Code:
    <link rel="stylesheet" type="text/css" media="print" href="print.css"/>
    The other method is to include it in another stylesheet. This is done as follows:
    Code:
    @media print
    {
    CSS HERE
    }
    Now, unless you are proficient in CSS, you'll want to make sure everything is covered, and no colors or images are left on your page. Copy/customize the commented code that follows into your stylesheet, or new print.css file.
    Code:
    * /* this selector applied to ALL elements */
    {
    background-color: #fff ! important; /* here, we remove the background color.  
                                      the ! important makes it so that no 
                                      other settings can over-ride it. */
    border-color: #000 ! important; /* next we make sure all borders are solid black. */
    color: #000 ! important; /* now, we make all text solid black, too. */
    }
    
    img /* this applies to all images */
    {
    display: none ! important; /* this forces all images to be transparent.
                              remove the ! important if you know CSS and
                              want to make sure some images remain. */
    }
    
    .invis
    {
    /* Add class="invis" to any element in your HTML that you don't want to print, such as a navigational element. */
    display: none;
    }
    Now that you're done, simply print the page and watch as all colors and images are removed!

    If anything is unclear, feel free to post and I'll try to reword/add to it.
    Last edited by Akash; 01-21-2004 at 09:27 PM.

  2. #2
    Join Date
    Jan 2001
    Location
    Illinois, USA
    Posts
    7,147
    Edited above post to remove the horizontal scrolling - if it still appears on other resolutions, please let me know.

    Dan: I'm confused as to how this works...

    Does
    media="print"
    Mean the CSS code only applies when the document is printed?

    Can you attach sample html pages to show exactly how this works?

  3. #3
    Join Date
    May 2002
    Location
    UK
    Posts
    2,994
    You should then use media="screen" for screen stylesheets if you use media="print" (unless the CSS in the screen stylesheet you want rendered when printed).

    I don't see why you would want to remove all images from a printable version. Not even CNet or the BBC do that with their print versions.

    Actually display:none does not force images to be transparent, it forces images to be removed. visibility:none forces transparency with the rest still flowing around it's original location.

  4. #4
    Join Date
    Feb 2003
    Location
    Connecticut
    Posts
    5,441
    Akash: Thanks for cleaning that up, and sure, I'll make a sample page and PM you with it so you can add a link to the main tutorial. Here, I'll answer you in tutorial-style so you can add/edit the main post:

    The media attribute in HTML, and in CSS, is for describing what platform the stylesheet should be used on. The different media types are as follows:
    Code:
     @media all {} /* for all media types */
    @media screen {} /* for your computer [moniter] */
    @media print {} /* for printer and print preview */
    @media aural {} /* for speech synthesizers */
    @media braille {} /* for braille tactile feedback devices */
    @media embossed {} /* for paged braille printers */
    @media handheld {} /* for handheld devices (typically small screen,
    @media monochrome, limited bandwidth) */
    @media projection {} /* for projected presentations, for example
    projectors or print to transparencies */
    @media tty {} /* for media using a fixed-pitch character grid,
    such as teletypes, terminals, or portable devices
    with limited display capabilities */
    @media tv {} /* for television-type devices (low resolution,
    color, limited-scrollability screens, sound available) */
    This insures that your code is only viewed on the specified platform. Hence, you can make your layout look different on a monitor than it would on a printer. You can then even use this to export 160x160 or 320x320 layouts to HTML/CSS-capable PDA's and other handhelds!

    Rich2k: I do agree about the printable versions issue, but I personally like to produce plaintext pages. You're also correct on the display:none issue, since that was bad wording on my part. I use that since I like to collapse any non-needed elements. Again, personal preference.

    So, Akash, if you could also change
    Code:
    /* this forces all images to be transparent.
    to
    Code:
    /* this forces all images to be completely removed from the browser.
    that would be a big help.

  5. #5
    Quick question...which browsers will work for this? I know that some older browser is not compatible with CSS

  6. #6
    Yes, but if your using a CSS design does that matter much?

    After all, the colours wont get applied anyway

  7. #7
    A good article to compliment this post is: http://www.alistapart.com/articles/goingtoprint/

    One particularly nice feature is the ability of the modern browsers (not IE) to print out the actual url of a link by using something like:
    Code:
    a:link:after, a:visited:after {
       content: " (" attr(href) ") ";
       font-size: 90%;
       }

  8. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •