Print It Your Way

by Derek Featherstone

44 Reader Comments

Back to the Article
  1. 1.  Select the area of interest.
    2.  Go to File > Print
    3.  Under “Print Range” choose “selection.”
    4.  Click “Print.”
    Copy & paste the code below to embed this comment.
  2. 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
    Copy & paste the code below to embed this comment.
  3. 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.
    Copy & paste the code below to embed this comment.
  4. 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.
    Copy & paste the code below to embed this comment.
  5. 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.
    Copy & paste the code below to embed this comment.
  6. 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.
    Copy & paste the code below to embed this comment.
  7. Make that rule: #www-alistapart-com #sidebar dl,
    #www-alistapart-com #sidebar ul {
    font-family: “Verdana”;
    }
    Copy & paste the code below to embed this comment.
  8. 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.
    Copy & paste the code below to embed this comment.
  9. 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!!
    Copy & paste the code below to embed this comment.
  10. 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? :)
    Copy & paste the code below to embed this comment.
  11. 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.
    Copy & paste the code below to embed this comment.
  12. >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”)
    Copy & paste the code below to embed this comment.
  13. 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;
    }
    Copy & paste the code below to embed this comment.
  14. 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!
    Copy & paste the code below to embed this comment.
  15. web tools pro
    http://www.iconico.com/webtool/index.asp
    will do the same for ie6 as firefox is able to with dev tools
    Copy & paste the code below to embed this comment.
  16. 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?
    Copy & paste the code below to embed this comment.
  17. 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>
    Copy & paste the code below to embed this comment.
  18. maybe i missed a reference to it in the article, but…surely you also meant to include the editCSS extension to your requirements list?
    Copy & paste the code below to embed this comment.
  19. 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!
    Copy & paste the code below to embed this comment.
  20. 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!  :-)_
    Copy & paste the code below to embed this comment.
  21. 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… ;)
    Copy & paste the code below to embed this comment.
  22. 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.
    Copy & paste the code below to embed this comment.
  23. Excellent article, I’m glad to see that people are extending the use of Mozilla’s products, that’s what they are made for.
    Copy & paste the code below to embed this comment.
  24. 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
    Copy & paste the code below to embed this comment.
  25. 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 ...
    Copy & paste the code below to embed this comment.
  26. 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.
    Copy & paste the code below to embed this comment.
  27. 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.
    Copy & paste the code below to embed this comment.
  28. 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?
    Copy & paste the code below to embed this comment.
  29. 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/]
    Copy & paste the code below to embed this comment.
  30. to deal with the less time we’ll have ;)
    Copy & paste the code below to embed this comment.
  31. I get the same crash, with 0.7.  Guess I should upgrade.
    Copy & paste the code below to embed this comment.
  32. 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?
    Copy & paste the code below to embed this comment.
  33. 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!
    Copy & paste the code below to embed this comment.
  34. 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 !
    Copy & paste the code below to embed this comment.
  35. Who spent 15 minutes to make a perfect print? It’s much easer to copy paste the content in word and print it.
    Copy & paste the code below to embed this comment.
  36. Who spent 15 minutes to make a perfect print? It’s much easer to copy paste the content in word and print it.
    Copy & paste the code below to embed this comment.
  37. Who spent 15 minutes to make a perfect print? It’s much easer to copy paste the content in word and print it.
    Copy & paste the code below to embed this comment.
  38. Who spent 15 minutes to make a perfect print? It’s much easer to copy paste the content in word and print it.
    Copy & paste the code below to embed this comment.
  39. Who spent 20 minutes sending 4 messages which are exactly the same ?!?!?
    Copy & paste the code below to embed this comment.
  40. 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
    Copy & paste the code below to embed this comment.
  41. 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!
    Copy & paste the code below to embed this comment.
  42. The idea is GR8, but it will be a pain to create a custom style sheets for each site I print from…........
    Copy & paste the code below to embed this comment.
  43. “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:
    <!—[if IE]>You want this page to print well? Get latest Opera or Firefox.<![endif]—>
    Copy & paste the code below to embed this comment.
  44. congratulations for the article.
    Copy & paste the code below to embed this comment.