One of the classic problems with websites, is that they
don’t print very well. That means that page elements (text, images, etc.) don’t
line up, unwanted images and navigation links get printed – you basically have
very little control, in terms of how your web pages look when they are printed.
What is the solution!!
The ‘old-school’ way, was to create separate ‘printable’
pages – this is a big waste of time! Instead, with the power of CSS, you will
only need to make a few simple additions to your web pages and they will be
printer friendly.
Basic Concepts
People will print your pages typically to be able to read
the content, not to see pictures. You need to hide all images from the printer
and this is done in the print style sheet. I will explain what the print style
sheet is in a moment.
Navigational elements are not needed in the printed document
as well, so all navigational elements should be removed from the printed page.
Let’s say you designed your pages with a black background
with white text. You don’t want peoples printers printing all that black, they
won’t be too happy with the price of ink these days! To solve this problem, in
our print style sheet we will set the page color to ‘white’ and the text color
to ‘black’.
The Print Style Sheet
I’ve mentioned the ‘print style sheet’ a few times with no
explanation; let’s take care of that now. CSS today allows you to link to more
than one style sheet in your web page.
The simple reason you would want to do this, is so that you
could have the HTML page ‘change’ its appearance automatically when someone visits
your page with a particular type of device. These types of devices can include
typical desktop computers, iPhones, Android phones, iPads and printers … among
other devices!
It works like this; when you link a style sheet to your HTML
page, there is an attribute that you can specify in the CSS link tag that tells
the device reading your page if it should use the style sheet specified in the
link.
So the wise men and women that came up with the CSS
specification, came up with a few ideas for device types that could be
specified in the CSS link. For the sake of this short article we are concerned
with only two of them:
screen
print
Here’s a sample pair of CSS links that point to different
style sheets, one for the printer to use and the other for a normal PC monitor
to use:
|
<link href="CSS/webdesignersHanbook_Print.css"
rel="stylesheet" type="text/css" media="print">
<link href="CSS/webdesignersHanbook_1.css"
rel="stylesheet" type="text/css" media="screen">
|
You can see that these CSS links are actually taken from the
Handbook on Killersites.com. What you’re looking for in the link is this text:
|
media="print"
|
… and:
|
media="screen"
|
The first (‘media=”print”‘) points to the style sheet that
has been set up for printing while the other (media=”screen”) is set up for
normal PC monitors. Nowadays most browsers know that if someone tries to print
the page the style marked with: ‘media=”print”‘ should be used.
So now we know how to tell the browser which style sheet to
use when printing the HTML page, so what is different in the print style sheet
that makes this work?
There are all kinds of things you can do, but the easiest is
just to wrap HTML and images (you don’t want printed) with div tags and give
all those div tags an ID of a style that is set to:
|
display: none
|
What?!
Ok, the best way to understand this, is to see it work.
Create a simple HTML page and create a new style sheet and call it: print.css.
In that style sheet you insert this code:
|
.noPrint {
display: none;
}
|
Now in your HTML pages, just wrap DIVs around elements you
don’t want printed:
|
<div class='noPrint'>
<p>Text that
I don't want printed.</p>
</div>
|
… Don’t forget to include your CSS links in the of
your HTML page! So basically, any elements inside the DIVs that have the class
‘noPrint’ applied to them, won’t print.
Let’s keep moving …
Another thing you should do is make all you text black and
your pages white:
|
body {
font-family: Georgia,
"Times New Roman", Times, serif;
font-size: 14px;
color:
#000000;
background-color: #FFFFFF;
}
|
Create a Print Button
To close off this tutorial, here is a simple way to create
‘print’ button on your page using just a tiny wee bit of JavaScript:
|
<a href="#" onClick=" window.print();
return false">Print this page!</a>
|
Closing Comments
- See more at: http://www.csstutorial.net/2013/10/making-web-pages-printable-using-css/#sthash.t4ketMJS.dpuf
All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.
No comments:
Post a Comment