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 don’t suit you, the user? That’s 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, you’ll be doing it everywhere, and you won’t look back.
Currently, you’ll 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 don’t have one
already. - Install Chris Pederick’s Web Developer’s Toolbar if you haven’t already.
How does this work?#section2
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 you’ll 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, we’ll start with
a nice simple example: Boxes and Arrows.
Take an x-ray of the site#section3
The web developer’s toolbar allows you to easily take an X-Ray of the site,
exposing its skeleton structure. Outline the site’s grid with “Outline
Block Level Elements” or “Outline Table Cells.” Once you’ve done that, you’ll
want to use “View ID and Class Details” from the Miscellaneous menu. Now your
web page will look something like this.
Isolating your target#section4
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#section5
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#section6
Now you can hide other components on the screen that
you don’t 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 don’t want to do this on
every B & A article since some images are critical to
understanding the articles themselves.
Save for later#section7
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 you’ll 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#section8
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 site’s 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 Developer’s 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 we’ve 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. It’s 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 Chris’s great tool doesn’t 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.
1. Select the area of interest.
2. Go to File > Print
3. Under “Print Range” choose “selection.”
4. Click “Print.”
I humbly submit to the esteemed authors of this site to please consider that 90% of everybody uses IE6. I hate it, it sucks, IE is the devil incarnate, it is a clear violation of the monopolistic power of Microsoft. It isn’t a browser its an application platform. I wish it ill.
Having said that, we are stuck with it. I recommend a new approach from the good people who produce this site: would you consider a satay section to provide some solace and support for techniques we may deploy without a trip to css-destroy?
Thank you,
B.
P.S. Give Dean Edwards your money. dean.edwards.name
You can do this with the Opera browser, without installing anything else on it (ie. it’ll work with a freshly-installed out-of-the-box Opera). Opera lets you pick your own stylesheets when viewing page (“User mode”); one of them shows the structural elements of a page; printing will print with the stylesheet(s) you have selected.
Adding a new stylesheet to the list is a bit more complicated (you have to add entries to an .ini file, see here: http://nontroppo.org/wiki/OperaUserCSS )… works, though.
You might consider using Jesse Ruderman’s “Ancestors” bookmarklet, available from http://www.squarefree.com/bookmarklets/webdevel.html , which shows you the full ancestor tree of every element on a page when you hover over it. This, combined with his “Edit styles” bookmarklet (also available on that page), gives you a great deal of power and flexibility when testing new styles on a page.
Benjie, I agree IE is an abomination. I posted a thought on my site about why it is so hard for some people to use other browsers.
Thanks for putting this together, Derek. I’d been using the Web Dev Toolbar for months without even noticing all that…
Just to make this all even more cool (imho):
Two more extensions in Firefox and Mozilla make it possible to Edit the CSS in this way and then make the changes a permanent addition to any site.
These are URIid: http://extensionroom.mozdev.org/more-info/uriid and ChromEdit: http://extensionroom.mozdev.org/more-info/chromedit.
ChromEdit just provides a quick way to get into the userContent.css–css rules in this file will override those of webpages. (you may need to use !important in some cases, I think)
URIid lets you make rules specific to web sites using a unique id it assigns to every site.
Just to give a quick example: say you want to change the typeface on ALA’s sidebar list of lists. (They are so tiny!)
You’d use the methods Derek described to find the class / id names and figure out the right CSS to use. Then you’d put those rules in the userContent, prefacing the selector of each one with #www-alistapart-com .
End result to put in userContent.css:
#www-alistapart-com #sidebar dl, ul {
font-family: “Verdana”;
}
Then restart your browser to let those changes take effect.
Instant customized webpage! You can go pretty far with well written sites (think CSS Zen Garden). You can also find several simple rules on the URIid page above for changing the background color of Google.
Make that rule:
#www-alistapart-com #sidebar dl,
#www-alistapart-com #sidebar ul {
font-family: “Verdana”;
}
As mentioned before, shwing site’s structure and user CSSs work out-of-the-box in Opera, which makes this article have a subtle reinventing the wheel scent to it.
Dave Shea made the same mistake, which is why he’s not my favorite person. He claims that his dropdowns on Mezzoblue (or “Mess of Blue”) will work in Mozilla, Opera, and Safari. They don’t work in Opera.
He assumes that if it works in Mozilla it’ll work in Opera.
I don’t see the point of this article.
Props to Opera!!
Am I wrong, or won’t the clever adjacent selector rules shown at the article’s end fail in the ever popular IE 6? I thought IE had problems with adjacent selectors, which would make selecting the first cell of the second row in the third table pretty hard. Is there an alternative way around this short of ritual suicide? 🙂
The majority of the comments above don’t give praise where [I think] praise is due. Just the shear fact that the super handy “Developer Toolbar” was pointed out to us makes it worth it’s weight in gold. A simple two-second add-on to Firefox (or Mozilla) and you’ve got your web development IDE! I haven’t tried yet, but I see no point in coding CSS in one text editor only to switch back and forth (thank dog for Ctrl+Tab) to see the results.
I have have to admit the CPU (my old PIII anyway) is a bit dogged out in CSS Edit mode, but it sure beats the traditional method of creating a style sheet and jumping back and forth to view the page.
That’s without even touching on the purpose of this article, helping create perfect print versions of our sites.
Upon first look, I thought there would be an option on the dev toolbar to switch to a “Print View” which would scrunch the page down to 8 1/2″ by 11″ sizing, then you can edit the @media=”print” version of the CSS rather than the screen version. It’s a minor complaint considering the greatness of the toolbar, I give it a 9/10.
>> Having said that, we are stuck with it.
>> I recommend a new approach from the good
>> people who produce this site
Nobody is stuck testing/developing in IE, only stuck having to hack your CSS to look good in IE… pretty big difference. There is no reason (nor logic) why a web developer would choose to ignore standards compliant web browsers in favor of web development in a buggy, IE browser. It sounds like self-inflicted punishment to me.
>Am I wrong, or won’t the clever adjacent
>selector rules shown at the article’s end
>fail in the ever popular IE 6?
Justin basically says this, but:
The article is written to help people take control over the web pages they /use/ — and the browser used is Mozilla, so there’s no need to write code compatible with IE 6.
(By the way, is it just me or is there no longer a #contentBox at Boxes and Arrows? I think it can be replaced with the rather strange selector “table>table + table table”)
No, no, sorry, I goofed again. This gets that main content area visible while hiding the rest (except the copyright):
* {
visibility: hidden;
}
table + table * {
visibility: visible;
}
td[bgcolor=”#DCDCDC”] {
display: none;
}
Jonah wrote: “(By the way, is it just me or is there no longer a #contentBox at Boxes and Arrows?”
Actually – #contentBox is still there. Its found on the individual article pages which is where the “create your own print style sheet” customization would be most useful… Nice work on the attribute selector to hide some of the “other” content on that main page!
web tools pro
http://www.iconico.com/webtool/index.asp
will do the same for ie6 as firefox is able to with dev tools
i usually like server generated documents because they cator to things like displaying link URLs in the pages they generate for.
Most of us have had to have experienced printing out an article filled with links to external resources, sometimes vital to understanding the article, and then later realizing that we have no idea what those links’ urls are once we are reading it over. sitepoint’s printable page for example printed a number next to given links in the article, and then later on at the bottom of said article gave the url to the corresponding numbers… for instance if i were linking to ALA in the article it would say ala[1] and then at the bottom:
[1] http://alistapart.com
can CSS do something like that? What about other pitfalls?
mike, I don’t think CSS can collect all the URLs and then display them as a list at the end of the document. However, it can display the URL right after (or before) the link text:
HTML:
ala
CSS:
a:after {
content: ” <" attr(href) ">“;
}
RESULT:
ala <http://alistapart.com>
maybe i missed a reference to it in the article, but…surely you also meant to include the editCSS extension to your requirements list?
Patrick: “maybe i missed a reference to it in the article, but…surely you also meant to include the editCSS extension to your requirements list?”
Actually — editCSS is built in to Chris’ Web Developer Toolbar as of version 0.7 from March 12, 2004, so that’s why I didn’t list it as a separate requirement…
So… as Patrick mentions, if you haven’t got the most up to date version of Chris’ toolbar, you might want to update it, or get the Edit CSS extension separately… Thanks Patrick!
The whole premise of this article is flawed.
In my mind, “printing it my way” shouldn’t include:
– Downloading and installing a new browser and toolbar
– Learning more about CSS
– Learning a bunch more about the code of a site I just want to print from
– Creating new code for each new site (or page type) that I want to print
Why in the world would someone want to go to all this trouble just to print a web page “better”?
I’ve already got basic printing capabilities with my browser. I can also turn images off, and if sites are coded properly, I can change font sizes. I also have some other options depending on what I’m trying to capture in print: things like screen captures and copy & paste often come in handy if I’m just trying to print part of a page. While many of these options aren’t ‘simple’ for the masses, they are much, much simpler than the approach outlined in the article.
User-specified, site specific, print stylesheets aren’t realistic. The article is an exercise in what is theoretically and maybe technically possible, but it is not pragmatic. Even the most technically advanced web developers wouldn’t want to use this approach on a regular basis. They just want to click the print icon (or hit ctrl-p) and have done with it. They’re busy people.
Now, if you can tell me how my site could provide our users more flexibility in printing without putting such a heavy burden on every user, THAT would be valuable! :-)_
Lyle: re: “While many of these options aren’t ‘simple’ for the masses, they are much, much simpler than the approach outlined in the article.”
I get the sense from your comment (and other people’s comments) that this may not have been clear enough in the article: this was never intended to be a method for “the masses”/end-users printing, it is aimed directly at web developers. These web developers most likely have Firefox installed and already have a working knowledge of CSS – enough to make this technique work. After all, we are users too, and why shouldn’t we use the tools we have to make our end-user experience better?
re: “Why in the world would someone want to go to all this trouble just to print a web page “better”?”
The first time I tried to do this, it was because an article I wanted to print was 7 pages long, mostly filled with items that were irrelevant to the article – images, ads, site navigation, and other related items. There wasn’t a print friendly version, so I ended up taking it into my own hands and used the tools I had at my disposal. When I was done, I had an article that printed in two pages and only contained what I wanted on it. That’s why I started doing it elsewhere as well…
re: “Even the most technically advanced web developers wouldn’t want to use this approach on a regular basis”
Agreed. The first time I used this technique, it took me about 20 minutes to get the article I wanted to print into a form with which I was happy. Any that I have done recently have taken less than 5 minutes, and I save them for later so that I don’t have to use the approach on a regular basis.
Now, if I had claimed that this was a way to bring better print versions to the all end users, well then, yes, I would have been kidding… 😉
I just add a class called “noprint” to elements that I don’t want to have printed. Create a stylesheet where media=”print”, create font sizes, colors, weight, etc for the text and add:
.noprint {display: none;}
and since class=”noprint” has no entry in the media=”screen” stylesheet, it has no effect onscreen.
Excellent article, I’m glad to see that people are extending the use of Mozilla’s products, that’s what they are made for.
For what it’s worth I use IE6 and have no problem applying my own stylesheet.
Actually, I cheat, I use a free ‘shell’ for IE called MyIE2 that extends (and fixes) it tremendously. Tabbed browsing, filtering, mouse gestures, load Gecko engine, etc. It also offers it’s own plugin architecture and among “Show Blocks”, “Toggle Tables”, and “Rulers” is “My Style”; a one-button stylesheet substitution.
I make most use of “My Style” to ‘correct’ otherwise difficult to read sites. Tiny-white-text-on-a-black-background? No more! Too many fancy effects applied to the content, so it’s more akin to a ransom note then a coherent series of paragraphs? Fixed! And yes, after restyling, ’bout everything is suitable for printing.
http://myie2.com/
http://www.kogeneracija.co.yu/myie2/plugins.html
I like the idea of this, but am not sure I can quite spend the time creating custom style sheets for each site I print from, especially given how often sites change structure. I do quite like the idea, in principle, of a custom print style sheet though – something I have not yet added to my version of Opera …
This is the way I use Firefox posibility’s very often. To everyone: try it and you’ll never choose another way. While I say this, maybe this isn’t the best option. Try it, compare it, en use it if it’s in your opinion the best method.
MyIE2 rocks doesn’t it? I used it for a whole year, but had to uninstall it after a virus snafu.
Of course, if you like MyIE2 you’ll LOVE Opera 7.23. I’m in love with this browser.
Did I miss this? Is it me or are the dev tools not compatible with Firefox under os X? Firefox ‘unexpectidly quits’ when I try to install the dev tools?
Firefox 0.8 on Mac OS X crashes for any extension installation – this is one case where a nightly might be better. See The Burning Edge [http://www.squarefree.com/burningedge/]
to deal with the less time we’ll have 😉
I get the same crash, with 0.7. Guess I should upgrade.
1. Select the text you want to print
2. Open up Composer (Mozilla’s WYSIWYG HTML editor)
3. Paste
4. Selectively (and visually) remove any imbedded ads, adjust font sizes, etc. to your liking
5. Print
Heck, this even works with IE to en extent, although when you copy HTML-formatted text in IE, it doesn’t retain the HTML codes in the BG like Mozilla/Firefox do.
This method also allows easy combination of articles that are spread out onto multiple web pages to be combined and printed.
No hassles included. 😉
Dante, as the resident (vocal) Opera user (:p), could you let us know how this kind of method (copy from browser, paste into WYSIWYG editor, print) works when copying from Opera?
Great article, especially the link to Chris Pederick’s Web Developer Tool.
As someone who is still learning the ins and outs of CSS, I would frequently grab a site and its CSS, and disect it by adding different colored borders to the various block level elements in order to disect the site (as I’m sure all you gurus once did before you were gurus). Now I can do that with just a button click! Coolness!
yeah, war about your browsers …….
dudes ………. try a girl … you’ldn’t care about your darling browsa !
ppffff ………. pretty nerdzzzzzz 8|
kill your self, it should be better for this world !
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
Who spent 20 minutes sending 4 messages which are exactly the same ?!?!?
Why are you using the visibility property?
Wouldn’t it be far more effective to use display: none;
Then at least you won’t have inexplicable and unnecessary whitespace on your printing
Mmmbeer hit the nail on the head with “display:none” rather than “visibility: hidden” (at least for me). Worked like a charm – thanks! No more annoying whitespace!
The print stylesheet I’m designing will hopefully keep people from having to cut/paste or jump through assorted hoops just to get an article’s text. These media-specific CSSs made a lot of sense, especially after reading Molly Holzschlag’s and Eric Raymond’s books – their approach seems to be “make it simple to code *and* use. Appealing and pragmatic.
Great article!
The idea is GR8, but it will be a pain to create a custom style sheets for each site I print from………..
“I humbly submit to the esteemed authors of this site to please consider that 90% of everybody uses IE6. I hate it, it sucks”
So do not hack your website to be full-featured in IE. If you stop making “all sites work in IE” it will cease to be the ultimate argument.
Instead of tons hacks I suggest adding only one:
congratulations for the article.