hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Web Design and Content Tutorials : Printer-Friendly Sites with CSS
Reply

Forum Jump

Printer-Friendly Sites with CSS

Reply Post New Thread In Web Design and Content Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 01-17-2004, 05:55 PM
Dan L Dan L is offline
Web Developer
 
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.


Sponsored Links
  #2  
Old 01-21-2004, 09:30 PM
Akash Akash is offline
Web Hosting Master
 
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
Quote:
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  
Old 01-22-2004, 06:14 AM
Rich2k Rich2k is offline
Web Hosting Master
 
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.

Sponsored Links
  #4  
Old 01-22-2004, 01:49 PM
Dan L Dan L is offline
Web Developer
 
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  
Old 05-01-2004, 10:38 AM
webwhiz webwhiz is offline
Newbie
 
Join Date: Mar 2004
Posts: 25
Quick question...which browsers will work for this? I know that some older browser is not compatible with CSS

  #6  
Old 05-13-2004, 02:07 PM
HG-Owen HG-Owen is offline
Web Hosting Guru
 
Join Date: May 2003
Posts: 251
Yes, but if your using a CSS design does that matter much?

After all, the colours wont get applied anyway

  #7  
Old 08-27-2004, 03:19 AM
True subBlue True subBlue is offline
Newbie
 
Join Date: Aug 2004
Posts: 9
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%;
   }

Reply

Related posts from TheWhir.com
Title Type Date Posted
Microsoft Gains Most Sites in April: Netcraft Web Server Survey Web Hosting News 2014-05-01 08:33:47
nginx Regains Web Server Market Share in December Netcraft Survey Web Hosting News 2014-05-01 08:22:19
Microsoft Sees Largest Gains in Netcraft November Web Server Survey Web Hosting News 2013-11-04 16:01:02
Apache Loses 9.9 Million Sites in Netcraft April 2013 Web Server Survey Web Hosting News 2013-04-03 14:42:33
Open Source Content Management System Joomla Releases Mobile-Friendly Joomla 3.0 with Bootstrap Web Hosting News 2012-09-27 15:40:27


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?