Print It Your Way: A List Apart
Print It Your Way: A List Apart
@import "/c/ala.css";
@import "/c/ala.css";
Skip navigation.
up frontarticlesabout alalive eventsxml feeds
ISSN: 1534-0295. 21 May 2004 Issue No. 182
Print It Your Way
by Derek Featherstone
Web developers have various methods for creating print
friendly versions of their websites. By using a server side routine or print
stylesheets, the print version may strip out images and navigation that lose
their meaning on the printed page, and perhaps display the page
in a single column using a different font with a different size.
But what happens when there is no printable version, or the printable
version includes ads or other settings that dont suit you, the user?
Thats where user stylesheets come in. Armed with a little CSS
knowledge and some web development tools, you can easily create your
own print versions formatted exactly the way you want them. Once you
get the hang of it, youll be doing it everywhere, and you wont look
back.
Currently, youll need a few specific tools to make these techniques
work, although we may eventually be able to do this
with other user agents:
Get yourself a copy of Mozilla Firefox if you dont have one
already.
Install Chris Pedericks Web Developers Toolbar if you havent already.
How does this work?
These techniques rely on a few things, not the least of which is the
assumption
that any site that has substantial content employs some type
of predictable templating system that uses the same display techniques
for all articles across the site (or site section). Once you find out
where the content is located
in the markup, you can isolate it and format it to look exactly the way
you want.
These techniques are really quite simple in principle:
Expose the grid of the website.
Isolate the element (usually a div or table cell) that contains the
content you are after.
Use CSS to format the page with appropriate font sizes, widths, and
margins.
Use CSS to selectively show and hide the other parts of the page
as you see fit.
Save the CSS for later to create an instant custom printable view.
The most difficult part is figuring out which CSS selectors youll need
to isolate the content that you want and that is only difficult if the site
uses a template structure that is convoluted. In this case, well start with
a nice simple example: Boxes and Arrows.
Take an x-ray of the site
The web developers toolbar allows you to easily take an X-Ray of the site,
exposing its skeleton structure. Outline the sites grid with Outline
Block Level Elements or Outline Table Cells. Once youve done that, youll
want to use View ID and Class Details from the Miscellaneous menu. Now your
web page will look something like this.
Isolating your target
Now that we can see where our target is, we need to isolate it with CSS.
With Boxes and Arrows, we are lucky all the main content appears in the
appropriately titled contentBox. With other sites, you may not be so lucky.
Once you have identified the target, give it a different background colour
or change its border properties so that it is easily recognizable from
everything else on the page. Set the container and all its descendants to be
visible, then move to the top of the editing area and hide everything else:
* {
visibility: hidden;
}
#contentBox * {
visibility: visible;
}
Format to your taste
At this point, you have a good shell. For printing purposes, it is a good
idea to include a width on your main container. (I use 6.5" as a
default, but you can choose something appropriate for your printer and
margins.)
You can now format the text, changing fonts, colors, and sizes as you wish. For
Boxes and Arrows, the simple addition of width and some font restyling was
enough:
#contentBox * {
visibility: visible;
width: 6.25in;
}
p {
font-family: "Bitstream Vera Serif";
font-size: 10pt;
line-height: 14pt;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Bitstream Vera Sans";
}
Weed as necessary
Now you can hide other components on the screen that
you dont want to print. For Boxes and Arrows, we added the following rules
to hide a few other elements to save space.
.figright, #readMore, #metainfo, #recent,
.twocol, .clear, .row, .hr {
display: none;
}
* img {
height: 0;
width: 0;
position: absolute;
}
Setting a height and width of 0 for images and absolutely positioning
them removes them from the document flow. If we had simply hide the
images, large gaps might appear within the page because they still take up
space within the flow of the document. Obviously we dont want to do this on
every B & A article since some images are critical to
understanding the articles themselves.
Save for later
Once you are happy with the way things look, save your user stylesheet. Make
sure that you save your CSS often when you return from Print Preview the
editing area is gone, and youll need to reload to continue with
modifications. Use Load to import your CSS file into the editing area.
Now that you have saved your CSS, you can pull it up anytime you want for that site. Here is our saved stylesheet
for Boxes and Arrows:
* {
visibility: hidden;
}
#contentBox * {
visibility: visible;
width: 6.25in;
}
#contentBox {
margin-bottom: -9in;
}
p {
font-family: "Bitstream Vera Serif";
font-size: 10pt;
line-height: 14pt;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Bitstream Vera Sans";
}
.figright, #readMore, #metainfo, #recent,
.twocol, .clear, .row, .hr {
display: none;
}
* img {
height: 0;
width: 0;
position: absolute;
}
Other tips and tricks
Create some Space: it may be difficult to distinguish between one div or
table and another. Create a rule in the editing area to place margins around
the various containers, dependent on the sites layout technique:
table {
margin: 10px;
}
or
div {
margin: 10px;
}
Targeting elements: If you have trouble identifying
any target on the page,
you may want to use yet another great feature of the Web Developers
Toolbar: the View Style Information from the Information menu. When
you select this option, your cursor turns into a crosshair. Hover over
the elements in your
page and the status bar tells you where in the DOM tree the element is
located. This is especially useful for elements nested deeply within
the
page.
Difficult targets: Table cells without labels are sometimes tough to
isolate. Here is one of the more complicated sets of rules weve had to
create so far. This displays the second table cell in the first row of the
third table on the page by showing the second and third table cells, and
then hiding the third with the next rule. Its complicated, but it works:
html body table+table+table tr td+td {
visibility: visible;
width: 6.5in;
}
html body table+table+table tr td+td+td {
visibility: hidden;
}
Compatibility: The editing CSS feature of Chriss great tool doesnt work in
Mozilla at this point because its sidebar implementation is different than
Firefox. If you prefer to use Mozilla, you could use Firefox to edit and
save the CSS and then use Add User Style Sheet from the Miscellaneous menu
to apply the styles you saved.
Discuss
Was it good for you, too? Discuss this article.
Derek Featherstone is a former high school teacher
turned web developer,
speaker, technical trainer, accessibility consultant, and a long-time
believer in web standards. He lives in Ottawa, Canada and suffers from
web-induced schizophrenia, carrying business cards for both of his
online ventures furtherAhead.com
and WATS.ca
DiscussTalk about this article.BookmarkPermanent URI.
Armed with a little CSS knowledge and some great
web development tools, you can easily create your own print versions
formatted exactly the way you want them.
Search
Include Discussions
Related Topics
AccessibilityBrowsers | X-PlatformCSSDesignTools
Departments
Contact
Contribute
Credits
Permissions
Q & A
Hot Topics
Accessibility 35
Browsers | X-Platform 28
Business 41
Content 43
CSS 51
Culture 41
Design 73
DOM | Scripting 20
Flash 9
HTML | XHTML 41
Process 23
Server-Side 19
Tools 22
Typography 10
Usability 21
XML & Pals 12
ALA lives at Logicworks.Basecamp: Elegant web-based project management for freelancers, designers, and creative services firms.
Copyright © 19982004 A List Apart Magazine, Happy Cog Studios, and the authors. XHTML, CSS, 508.
содержание | 2 | Обзоры, рецензии
Используются технологии
uCoz