How do you code for print-friendly version of a page?

A place to ask questions and get help. Be the first on your block to post ...

How do you code for print-friendly version of a page?

Postby Alice Henneman » Tue May 02, 2006 7:57 am

What code and where would I insert it in a page to suppress some of the parts of the information in the main body from printing.

I am trying to avoid the extra step of developing separate print-friendly pages for some sections of the Website I'm working on. Thank you.

Alice Henneman
Posts: 5
Joined: Sat Mar 18, 2006 12:16 pm

Postby saltybeagle » Tue May 02, 2006 1:34 pm

I would add something like this into the editable portion of the <head> of the page (right after <!-- InstanceBeginEditable name="head" -->), or storing it in a external css file and adding a link to it.

Code: Select all
<style type="text/css">
@media print {
   #noprint, .noprint {display:none;}

Using the correct css selectors for the items you want to hide of course.

Those would hide <div id="noprint"></div> and <div class="noprint"></div> elements.
Brett Bieber
Posts: 376
Joined: Fri Jan 16, 2004 3:10 pm
Location: 321 Admin

How do you code for print-friendly version of a page?

Postby MarkHiatt » Thu Jun 22, 2006 11:11 am

This brings up an interesting feature of (X)HTML and CSS: You can combine classes.

Using Brett's example, with a class of .noprint appearing only within the @media tags with a display: none value, you can add a class="noprint" to any element you don't want to display on a printed page.

You can't click on page navigation on a piece of paper, so many people elect to turn printing for navigation off. Somewhere on your page, you probably are declaring a division with an ID of "nav" or "menu" or whatever. Simply adding "class=noprint" at that place on your page will turn off printing that area. But what if you aren't using an ID, but are instead using a class? You can combine classes!

Code: Select all
<div class="footerstuff noprint">

This works and even validates! The W3C spec says the class attribute assigns one or more class names to an element. The effect is cumulative. If you had a class, .classOne, that changes your font color to Red, and another class, .classTwo, that makes it oblique,

Code: Select all
<p class="classOne classTwo">This text would be Red and Oblique</p>

Try it. It's pretty handy.
Posts: 36
Joined: Mon Jul 26, 2004 3:09 pm
Location: '501' Building - Room 123.1

Return to Help & Assistance

Who is online

Users browsing this forum: No registered users and 1 guest