Home

Can't Print Your Rails Webpage? Here's The Solution.

Submitted by lalee on Thu, 05/15/2008 - 12:11

The Story
I'm still working on "Project TokiDoki", and I must say, I'm getting pretty excited about all the stuff that I managed to build into it.  Yay!

It's been slow going for the past few weeks, as I've changed gears from "Rails Power Coder" to "HTML/CSS/Gimp Artist".  Sorry, doing CSS Style Themes simply isn't my thing, and I'd rather have a root canal than spend several days with Gimp doing gradient blends, or cobbling together "Yet Another Rounded Corner Solution".

One thing that creeped up on me over the last day or two, though -- I wanted to print out some of my Rails-Generated pages so I can mark some notes on them for the next redesign iteration.  And then it happened.  "Print Preview" in Firefox just wouldn't render my pages correctly, no matter how much I tried.  Those nice toolbars I floated across the top-right of the screen with some clever CSS rules became an unsightly mess when I tried to print from Firefox.  Even my "rounded corner" boxes weren't rendering -- at all!

I spent an hour Googling for the answer.  Surely there was something I was missing.  Tried Firefox 2, tried Firefox 3, and then finally I fired up my trusty Windows Notebook to try Internet Explorer -- and was surprised to see the same "print preview" behavior.

"WTF, Internet Explorer did the same thing that Firefox did?"  It must be in my Rails HTML code!  So after getting back onto the right path, I started thinking about why the CSS wasn't applying in Printing Mode.  And then a Lightbulb Moment finally hit me.  I did a "View Source" on the page, and sure enough, I saw the problem in my CSS link tags, automatically generated by Rails when you call stylesheet_tag()

media="screen"

The Solution

The fix is pretty straight-forward.  Add this to the end of your stylesheet_tag calls:

, :media=>:all

And lo and behold, those pretty rounded-corner boxes are rendered, the toolbars floated in the upper-right corner show up perfectly, and the printed page now looks almost exactly like the rendered Web Page.  Now why the hell doesn't Rails just ALWAYS issue media="all" and let power programmers separate that into media="screen" and media="print" when they really need such fine-grained flexibility?  *GRRR*