Printing weblog posts (and everything on the inet)
Note: this entry has moved.
Today, I wanted to print the
latest VGA post, before going to the bathroom. Not because it sucked, but
because I'm an avid bathreader (I don't
think the term exists, but it definitely should!), I must say. Of course,
printing Victor's or anyone else's
posts, really sucks because of the usual links/categories column and calendar,
which are a complete waste of space for print usage.
I already hear you say: "That's what the
media LINK attribute is for!", but who DOES include an alternate
stylesheet for print purposes? What's more, who guarantees that if such a
stylesheet IS provided, it will be what I want?
No, I definitely want to decide what to print and what not. My approach to date was to simply save the whole page to disk, edit the page and remove everything I didn't want to print. This has been specially the case with MSDN magazine articles, where you can't even hide that damn left sidebar. (NO, I don't what to click that 'Print' button and have whatever they think I need to print. At least in Firebird I get a preview of what's going to be print, unlike IE's "let us do this complex thing for you, stupid").
Well, unsurprisingly, the best solution I found is not in IE, but in Firebird. I installed the EditCSS extension, which adds a cool context menu (and shortcut Ctrl+8) which allows you to perform a LIVE edit of the CSS styles that apply to the current document:
![EditCSS in action with VGA post (better resolution)](http://kzu.aspnet2.com/weblog/vgacsssmall.gif)
(for capturing screenshots, complete with menu and cursor and a lot of cool features, I highly recommend SnagIt)
Now I can simply set display:none
on the elements I want to hide,
set width:100%
for the content, set body { font-size: 8pt }
to make everything smaller, and (well, you get the idea)... So, replacing all
styles with the following:
#leftcontent { display: none }
#centercontent { width: 100% }
#rightcontent { display: none }
#commentform { display: none }
.footer { display: none }
I get a great print-ready view of Victor's post! No useless columns, no comments form, no footer! Isn't that cool?!?!
What's more, it's a FAR better way to test how your CSS looks like than using the VS.NET Style dialog.