| If you print this
page, you might not see a whole lot. Printers will
ignore the background, but print everything else as-is.
Which means you'll get white text on a white background.
Not very helpful. Also, you'll see the buttons on
the left and the images and breadcrumbs at the top,
neither of which people care about when printing the
page. When you print the page, you really want the
content in a legible format. Here's how to do just
that using CSS. (What
is CSS?)
To do this, we only need two things:
- A separate stylesheet with new class and selector
definitions.
- An additional stylesheet link with an additional
attribute (media).
A New Stylesheet
If you understand how to create a stylesheet for the
screen, then you understand how to create a new one
for printing. You'll just want to do things like change
the font to a serif, possibly not print some images,
override some of the classes for the screen, or change
size of text or print out the URI of links on the
page. Here is a sample stylesheet for a printer that
can be used for this page.
Filename: print.css
================================
body {
background: #FFF;
font: 10pt "Times
New Roman" #000;
}
.noprint {
display: none;
}
.page_break {
page-break-before: always;
}
a:link:after{
content: " ("
attr(href) ") ";
font-size: 90%;
}
================================
The body selector will change the background color
from this dark color to white and switch the font
from this white arial to a more print legible serif
font that is black.
The .noprint class can be assigned to any element
on the page that you don't want to print. For example,
this class can be assigned to the images on this page,
to the tags that contain the breadcrumb links at the
top, or the footer at the bottom. When the page comes
out of the printer, any element marked with the .noprint
class will not be included.
The .page_break class allows the page author to force
the printer to break the page where this class is
applied. Sometimes the author will just need "trial
and error" to find the most logical place to
put this class. The style used here is "page-break-before"
meaning the next page will begin with the element
that this class is placed with. There is also a "page-break-after"
style that can be used.
The a:link after selector is used so the URI associated
with the links on the page will also be printed. As
of 6/04, this does not work in Internet Explorer,
but does for Mozilla-type browsers.
A New Link
Normally when a stylesheet is attached to a page,
a link that looks similar to this one is included
between the head tags:
<link rel="stylesheet" href="styles.css"
type="text/css">
However, there is another attribute to that link tag
that you should be aware of. This attribute is "media".
Some values that can be assigned to it include screen,
print, aural and some others. Screen means that the
styles contained in that sheet will be used for a
monitor. When media is set to print, those are the
styles that will be used for a printer, and aural
will be used for screen readers.
So instead of the link above, a page would have two
stylesheet links that could look like:
<link rel="stylesheet" href="printstyles.css"
type="text/css" media="print">
<link rel="stylesheet" href="screenstyles.css"
type="text/css" media="screen">
Try it Out
Go ahead and test this out. You can even try it with
this page. In your browser, click on File > Print
Preview, or just go ahead and print the page and you'll
see that it looks quite differently in print than
on the screen.
|
