Fixing sIFR Printing with CSS and MooTools

By  on  

While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix the sIFR printing issue.

Sample XHTML

<h2>Sample Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lectus fermentum augue bibendum tincidunt. In hac habitasse platea dictumst. Nullam ornare nunc ac massa. Nam volutpat tempor tortor. Maecenas sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum a odio ut libero facilisis tincidunt.</p>

<h2>Sample Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lectus fermentum augue bibendum tincidunt. In hac habitasse platea dictumst. Nullam ornare nunc ac massa. Nam volutpat tempor tortor. Maecenas sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum a odio ut libero facilisis tincidunt.</p>

Just some sample XHTML.

The CSS

@media screen {
	.print-only	{ display:none; }
}
@media print {
	.print-only { display:block; }
	.no-print	{ display:none; }
}

Setting a couple of standard print-related CSS styles.

The MooTools JavaScript

$$('h2').each(function(el,i) {
		//new print-only h2
		 new Element('h2',{
			  text: el.get('text')
		 }).addClass('print-only').inject(el,'before');
		 
		//inject swiff into current h2
		el.addClass('no-print');
		var swiff = new Swiff('sifr450x23.swf',{
			 id: 'sifr-' + i,
			 width: 450,
			 height: 23,
			 container: el,
			 params: {
				  wMode: 'transparent'
			 },
			 vars: {
				  titleText:el.get('text')
			 }
		});
  });
});

We first inject a new H2 element that will be used for print. Then we inject the Swiff into the original H2. Of course you can see where I've added the print-only/no-print CSS classes.

The only browser I found that printed the Flash sIFR objects was Internet Explorer. This solution will work across all browsers.

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Spatial Navigation

    Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply...

  • By
    Create Spinning Rays with CSS3 Animations &#038; JavaScript

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...

Discussion

  1. sIFR itself actually does contain a print stylesheet which hides the Flash movie and shows the alternative text.

  2. I am a little confused too Mark. I have not had a problem using sIFR3 and printing, prints out just fine for me. I know many have the resize and load issues but it is all down to proper use of the styles and setting it up correctly covering everything like line heights etc. Not quite sure Davids Problem here, never run into it not printing before.

  3. My issues were on Firefox 3.1 / Windows XP. The sIFR headings don’t show up which is why I created this script.

  4. Marc

    david, i’m new to sIFR too and i am looking for a better text-replacement alternative.. did you include the line:

    <style type="text/css" media="print">
    @import url("sIFR-print.css");
    </style>
    

    in your heading?

  5. @Marc: Nope, just used the CSS code above.

  6. kst

    I didn’t work on FF 3.0.12 for me. Maybe better to use base64 technique for Firefox?

  7. Antonio

    Another great technique as usual. To be honest, your method is far greater than needing all those unnecessary http requests that comes with the original sIFR implementation, CSS & Javascript files.

    Having said that, that’s why I prefer using sIFR Lite (By Dave @ AllCrunchy.com) and tweaked your script slightly. Would love to turn it into a Moo-ish class but still don’t know how to do it.

    Keep up the great work.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!