Thursday, May 14, 2009

Printing MSDN Magazine articles from Firefox

I like to read developer articles.  Some of the best dev articles (in my opinion) for the .NET space are published in the MSDN magazine, available online for free.  Sometimes it’s convenient to print them, to read on the train, or to make notes in the margins.  But Microsoft wants to make that difficult for you.

They do this in two ways:

1. Refusal to remove a print redirection tag in the header of the articles.  The print redirection tag exists to suggest to browsers where they should go in order to get a more printer friendly version of the page. For example, say you look at this article.  If you are in IE7 or IE8, when you go to File->Print Preview, you’ll see a version of the page that’s entirely unlike what the original page looked like.  That was achieved via this directive in the header:  <link rel="alternate" media="print" href="/en-us/magazine/dd569757(printer).aspx" />.  The browser sees this, takes you to the “print version”, and prints it.  Note that Firefox seems to ignore this, and stubbornly refuses acknowledge that the creator of the page went to the effort of providing an optimised print page. 

But ignoring that… so far so good – but then the web designers did something weird.  The print version of the page (to which you can get by clicking the “Print View” button on the page) has a printing header link… back to itself.  This has the effect of cancelling any changes you performed on the page, like expanding code regions etc – the page reloads just before printing. 

Now recently, MS seems to have realized this, but their fix was nothing short of bizarre – add a script to automatically expand all the collapsed regions on load.  Why does the print view redirect to the print view at all??  Anyhow, the bizarre fix kind of works, in the past you couldn’t actually expand the collapsed regions, as they’d collapse as soon as you tried to print (because the page reloads).  Now they’re open by default.  But this doesn’t work for Firefox - when you print in Firefox, the regions are collapsed, the script for some reason doesn’t execute, and you’re off trying to expand all the regions by hand.

2.  Somebody forgot their stylesheets.  The generated page is full of class attributes, but the stylesheet definitions for a lot of them are missing:

image image

There is no differentiation between headings and text.  The class attributes are there.

So what to do?  Greasemonkey, that’s what.  Greasemonkey is an add-on for Firefox, that allows you to execute custom scripts after the page loads.  You can do funky things like tweaking the specific HTML elements, adjust styles etc.  There is a handy online reference, that gets you started using it in no time.  So now every time I visit an MSDN print page, the styles are magically fixed.

The resulting script I present here improves on the page in more ways than the above features – I’ve changed the code font to Courier, as that’s a far more common programmer font family, and removed items that “float”, upsetting printing, as well as removing the Copy Code link.

Here is are some snapshots of the results, side by side (“before” on the left, “after” on the right):

Header and “Sidebar” entries (I’ve moved the “Sidebar” element to appear inline, for better printing):


Section headings and code snippets (no need for the grey background in my opinion, or the “Copy Code “link):


The entire script is below, enjoy (feel free to comment on any styles that I might have missed):

The obvious barrier of entry is that you have to know how to actually add a script to Greasemonkey.  An exercise left to the reader.

  1. // ==UserScript== 
  2. // @name           MSDN Magazine 
  3. // @namespace      a 
  4. // @include*/*(printer).aspx 
  5. // ==/UserScript== 
  7. //this function is straight from the DiveIntoGreasemonkey tutorial 
  8. function addGlobalStyle(css) { 
  9.     var head, style; 
  10.     head = document.getElementsByTagName('head')[0]; 
  11.     if (!head) { return; } 
  12.     style = document.createElement('style'); 
  13.     style.type = 'text/css'
  14.     style.innerHTML = css; 
  15.     head.appendChild(style); 
  17. //get rid of the copy code header 
  18. addGlobalStyle(".CodeSnippetTitleBar {display: none !important;}"); 
  20. //code snippets 
  21. addGlobalStyle("pre.libCScode {background:#FFFFFF none repeat scroll 0 0 !important;border-top:1px solid #C8CDDE !important;border-bottom:1px solid #C8CDDE !important;border-left:1px solid #C8CDDE !important;border-right:1px solid #C8CDDE !important;display:block !important;font-family:courier,monospace !important;margin:0 0 10px !important;padding-left:5px !important;padding-right:5px !important;padding-top:5px !important;}"); 
  23. addGlobalStyle(".ArticleTypeTitle {color:#008080 !important;font-family:'Segoe UI',Arial !important ;font-size:14px !important;font-style:normal !important ;font-variant:normal !important ;font-weight:bold !important;margin-top:3px !important;text-transform:none !important;}"); 
  25. //article section title 
  26. addGlobalStyle(".ColumnTypeTitle, .FeatureSmallHead {border-bottom:2px solid #008080 !important;color:#003399 !important;font-family:'Segoe UI',Arial !important;font-size:36px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;line-height:36px !important;margin-bottom:4px !important;padding-bottom:2px !important;text-decoration:none !important;text-transform:uppercase !important;}"); 
  28. addGlobalStyle(".ColumnTypeSubTitle, .FeatureHeadline {color:#000000 !important;font-family:'Segoe UI',Arial !important;font-size:20px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;line-height:20px !important;margin-bottom:8px !important;text-decoration:none !important;}"); 
  30. //author name in header 
  31. addGlobalStyle(".ColumnByLine, .FeatureByLine {color:#000000 !important;font-family:'Segoe UI',Arial;font-size:16px !important;font-style:normal;font-variant:normal;font-weight:normal !important;text-decoration:none !important;}"); 
  33. //sidebar header 
  34. addGlobalStyle(".SidebarHeadline {color:#008080;font-family:'Segoe UI',Arial;font-size:18px;font-weight:bold;line-height:20px;}"); 
  36. //recently they've started using floating divs as well this gets rid of them 
  37. addGlobalStyle("div {float:none !important; height:auto !important; width:auto !important;}"); 
  39. //show all hidden panels 
  40. var allLinks, thisLink; 
  41. allLinks = document.evaluate( 
  42.     "//div[@style]", //any style, as they start off invisible 
  43.     document, 
  44.     null
  46.     null); 
  47. for (var i = 0; i < allLinks.snapshotLength; i++) { 
  48.     thisLink = allLinks.snapshotItem(i); 

No comments: