Menu icon Foundation
Print with foundation-rails

I'm trying to get print working for a site using Rails 3 and the foundation-rails gem (5.3.1.0). Most of the posts I've found regarding printing are related to escaping from the "small" layout for print. But the problem I'm seeing is that there is no CSS for print media at all.

When I look at the page source, the stylesheets seem to be coming from this line added to the HEAD by foundation-rails:

<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" type="text/css">
            

         

and that works great for the screen, but I get nothing for print (testing with Chrome and Safari). By nothing, I mean the browser looks like there is no CSS at all - menus are bullet lists, things that should be initially hidden are visible, etc.

The media specification seems to be the crux of it. I've searched for some kind of configuration to no avail, so I'm wondering how everyone else is doing it. Should I just manually add another stylesheet link directly to the application template with media="print"? That works and gives me the "small" layout, but it seems rather "brute force". It seems like there should be an easy way to get media="print, screen" on the original stylesheet link, if that is indeed the way to go.

This all seems rather hacky, so I'm wondering how everyone else is handling print CSS with foundation-rails . . .

foundation-railsruby on railsprint

I'm trying to get print working for a site using Rails 3 and the foundation-rails gem (5.3.1.0). Most of the posts I've found regarding printing are related to escaping from the "small" layout for print. But the problem I'm seeing is that there is no CSS for print media at all.

When I look at the page source, the stylesheets seem to be coming from this line added to the HEAD by foundation-rails:

<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" type="text/css">
            

         

and that works great for the screen, but I get nothing for print (testing with Chrome and Safari). By nothing, I mean the browser looks like there is no CSS at all - menus are bullet lists, things that should be initially hidden are visible, etc.

The media specification seems to be the crux of it. I've searched for some kind of configuration to no avail, so I'm wondering how everyone else is doing it. Should I just manually add another stylesheet link directly to the application template with media="print"? That works and gives me the "small" layout, but it seems rather "brute force". It seems like there should be an easy way to get media="print, screen" on the original stylesheet link, if that is indeed the way to go.

This all seems rather hacky, so I'm wondering how everyone else is handling print CSS with foundation-rails . . .

Matt Santeler almost 5 years ago

Spent a few hours on this today. You are on the right track, but even when I changed
```Ruby
<%= stylesheet_link_tag "application" %>

to

<%= stylesheet_link_tag "application", media: 'all' %>
```

It wasn't loading any foundation styles... I found that changing:

// $screen: "only screen";

to 

 $screen: "screen, print";

Brought most (but maybe not all?) of my foundation styles into the print screen

Steven Rogers almost 5 years ago

That seems to nearly work for me, but I have one media-based style at the end of my foundation_and_overrides.css like:

@media #{$small-only} { some_style_stuff }

and it seems dead-set on interpreting print as small media, so that style gets applied to all screens, not just small ones. I tried substituting 'screen, print' directly into the media query ranges, and I don't get foundation styles in print (or the problem with my $small-only style on big screens) unless this one is 'screen, print':

$small-only: "#{$screen}  and (max-width: #{upper-bound($small-range)})";

Haven't been able to figure out a work-around yet.