sifr opposites attract

8/8/2019 sIFR Opposites Attract

1/39

sIFR Opposites Attract

ICKD 4February 29 th , 2008, Delft

Mark Wubben http://novemberborn.net/License: http://creativecommons.org/licenses/by-sa/3.0/nl/deed.en

sIFR is a prime example of how Flash and HTML can work together. Ill show you how you canimplement sIFR and how it uses some of the technologies Bob Corporaal just talked about.

But rst, a quick question. Whos familiar with sIFR? Or, perhaps, whos not familiar with sIFR?

Bobs slides: http://reefscape.net/presentations/ickd08/
http://creativecommons.org/licenses/by-sa/3.0/nl/deed.enhttp://creativecommons.org/licenses/by-sa/3.0/nl/deed.enhttp://novemberborn.net/http://novemberborn.net/


2/39

A quick introduction of sIFR. It helps bring rich typography to todays web. In other words, it turnsboring typography

Photo by Ralph Aichinger http://ickr.com/photos/sooperkuh/358241806/


3/39

into beautiful typography!

Photo by Aaron Feaver http://ickr.com/photos/feaverish/733663763/


4/39

So how is this done? sIFR is a combination of HTML, CSS, JavaScript and Flash. It uses progressiveenhancement, so it only kicks in if the browser will support it and if the correct Flash version isinstalled. This means the HTML stays pure, great for search engines and accessibility! sIFR also playspretty well with screen readers.

Its open source, too, licensed under the CC-GNP LGPL.

Photo by Je ! Kubina http://ickr.com/photos/kubina/42275122/


5/39

But of course, use with moderation.

Photo by Mark Wubben http://ickr.com/photos/novemberborn/256746937/


6/39

Back in 2004, Shaun Inman came up with an innovative solution of doing typography on the web.

Photo by Jeremy Keith http://ickr.com/photos/adactio/99391890/


7/39

This was spring 2004, and his solution came to be known as Inman Flash Replacement. The techniqueinserted Flash movies with a pre-dened size into the page, and the text rendered inside the Flashmovie.



8/39

Summer came, and Mike Davidson and Tomas Jogin made IFR scalable. I saw this, was pretty bored anddecided to have a go at rewriting their code. From one thing came another, and so

http://www.mikeindustries.com/blog/archive/2004/08/sifr

Photo by Rex Sorgatz http://ickr.com/photos/moculous/246307803/


9/39

me and Mike released sIFR 2 in the spring of 2005.

http://www.mikeindustries.com/blog/archive/2005/04/sifr-2.0-released

Photo by Rex Sorgatz http://ickr.com/photos/moculous/246307803/


10/39

Fast forward to now, Im working on v3.



11/39

Okay! Well walk through sIFR quickly so you learn how its applied to an existing web page. This willmore clearly show the principles of progressive enhancement, and itll show you how well Flash andHTML can work together.


12/39

First, design the website the way you want it to look without sIFR .


13/39

Then determine which parts of the page you wish to replace by sIFR.


14/39

First, some foundations. We have to add a bit of HTML to load sIFR specic CSS and JavaScript les.

Photo by darleneisevil http://ickr.com/photos/darleneisevil/297948062/


15/39

Careful! The `media` attribute needs to be correct!

Of course youre free to merge sIFR CSS with other CSS les. Same for the JavaScript.


16/39




17/39




18/39

Photo by James Phelps http://ickr.com/photos/mandj98/266266308/


19/39

.sIFR-active h1 , .sIFR-active h2 { font-family : Verdana ; visibility : hidden ; line-height : 1em;}

.sIFR-active h1 { padding : 0;}

This is the CSS which goes into the HTML page.


20/39

.sIFR-active h1 , .sIFR-active h2 {font-family: Verdana;visibility: hidden;line-height: 1em;

}

.sIFR-active h1 {padding: 0;

}

.sIFR-active is a class thats set on the or element when sIFR has activated. You canuse it to style elements di ! erently before theyre replaced by sIFR.


21/39

.sIFR-active h1, .sIFR-active h2 { font-family : Verdana ; visibility : hidden ; line-height : 1em;}

.sIFR-active h1 {padding: 0;

}

There is some magic going on here. Ive picked Verdana as a font family because its available onpretty much any platform. This means the text is rendered in roughly the same manner on eachplatform. This is important because it makes the height of the text the same.

By setting the line-height to 1em, it takes the value of the font size. This is a trick required to calculate

the font size in IE if its not specied in pixels. Lastly, we hide the HTML text before replacement toimprove the loading experience.


22/39

Next up, the actual code we use to replace elements on the page!

Photo by Jared Vincent http://ickr.com/photos/jaredvincent/506985893/


23/39

var palatino = { src : ' palatino.swf ' };

sIFR . activate ( palatino );

Put this in the , after loading sifr.js.

First we create an object which holds a reference to the Flash movie. Then activate sIFR by passing inthe object this lets sIFR load the Flash movie in the background so it ends up in the browser cachebefore sIFR actually starts replacing elements. Not doing this may lead to the Flash movie being

downloaded multiple times in IE and Safari.


24/39

var palatino = { src : ' palatino.swf ' };

sIFR.activate(palatino);





25/39

var palatino = { src: 'palatino.swf' };

sIFR . activate ( palatino );





26/39

sIFR . replace ( palatino , {selector : ' h1 ',

css : ' .sIFR-root { color: #555511; \background-color: #DDDD88; \font-weight: bold; } '

});

A simple replacement statement for the heading.


27/39

sIFR . replace ( palatino , {selector: 'h1',

css: '.sIFR-root { color: #555511; \background-color: #DDDD88; \font-weight: bold; }'

});

We pass in the object we created earlier. sIFR uses the arguments from this object, as well as from thesecond object thats passed in. This means you can put generic arguments on the `palatino` object,and specic arguments on the second object.


28/39



});

Selector contains a CSS selector. Here I simply replace `h1`, but you could become more specic if youneed to.


29/39

sIFR . replace ( palatino , {selector : ' body.programma #container h1 ',


});

An example of a more specic selector.


30/39

sIFR . replace ( palatino , {selector: 'h1',


});

Some CSS for inside the Flash movie. `.sIFR-root` applies to the entire movie. The CSS properties areself-explanatory. Flash supports a subset of CSS, and sIFR has added a few other properties. You cansee the full list at http://wiki.novemberborn.net/sifr3/Styling.


31/39

Bet youre curious now, eh!?

Photo by Ishmael Orendain http://ickr.com/photos/ishmaelo/31685288/


32/39



});

The replacement statement for the headings. Its pretty much the same.


33/39

So, thats sIFR in a nutshell. Looking back at Bobs presentation, what else can we do?

Photo by Gideon http://ickr.com/photos/malias/369960853/


34/39

sIFR 3 supports scaling, or page zoom. This is a feature found in Opera, IE 7 and the upcoming Firefox3. Rather than changing text size, you zoom the entire page. Lets have a look at how sIFR handlesthis, and how it would look at sIFR not dealt with it.

Photo by Jonathan Talbot, World Resources Institute http://ickr.com/photos/wricontest/322587441/


35/39

As you can see, for Flash and HTML to work together you need to take page zoom into account.Luckily, its rather easy! It turns out that the pixels you use in CSS do not necessarily correspond topixels on the screen. In other words, when you use page zoom, the browser changes the ratio betweenCSS pixels and device pixels.

Internally, a Flash movie is rendered in device pixels. The width and height of the movie in the HTMLpage however are measured in CSS pixels. Thus, when you zoom out, the Flash movies width andheight in the HTML page change, but internally it stays the same. Hence, the clipping of the sIFR textwe saw earlier.

The solution? If Flash only knew the size it takes in the HTML page, it could calculate the scaling ratioitself and scale its internal size to the HTML size.

Ph b DA N h //i k / h /d /80300544/


36/39

Luckily Flash and JavaScript do communicate. The Flash movie knows its rendered size at all times,which lets it scale along with the browser. Communication is also used to resize the Flash movie if theres suddenly less space available after scaling or resizing the browser window.

And you can do more fun stu ! , such as changing the text in the Flash movie!

Photo by Jarod Hodge http://ickr.com/photos/pingnews/473097669/


37/39

Questions?

Picture by Adam Hooker,


38/39

And on that bombshell, Id like to conclude this presentation. Thank you indeed.

Picture by Mark Wubben,

J Ph l


39/39

Adam Hookerhttp://flickr.com/photos/azadam/72251349/

Mark Wubbenhttp://flickr.com/photos/novemberborn/387178249/

Ralph Aichinger http://flickr.com/photos/sooperkuh/358241806/

Aaron Feaverhttp://flickr.com/photos/feaverish/733663763/

Jeff Kubinahttp://flickr.com/photos/kubina/42275122/

Mark Wubbenhttp://flickr.com/photos/novemberborn/256746937/

Jeremy Keithhttp://flickr.com/photos/adactio/99391890/

Rex Sorgatz

http://flickr.com/photos/fimoculous/246307803/

Jeremy Keithhttp://flickr.com/photos/adactio/523679899/

darleneisevilhttp://flickr.com/photos/darleneisevil/297948062/

Jarod Hodge

http://flickr.com/photos/pingnews/473097669/

DArcy Normanhttp://flickr.com/photos/dnorman/80300544/

Jonathan Talbothttp://flickr.com/photos/wricontest/322587441/

Gideonhttp://flickr.com/photos/malias/369960853/

Ishmael Orendainhttp://flickr.com/photos/ishmaelo/31685288/

Jared Vincenthttp://flickr.com/photos/jaredvincent/506985893/

James Phelpshttp://flickr.com/photos/mandj98/266266308/

Thank you wonderful Flickr photographers.
http://flickr.com/photos/wricontest/322587441/http://flickr.com/photos/wricontest/322587441/http://flickr.com/photos/dnorman/80300544/http://flickr.com/photos/dnorman/80300544/http://flickr.com/photos/pingnews/473097669/http://flickr.com/photos/pingnews/473097669/http://flickr.com/photos/darleneisevil/297948062/http://flickr.com/photos/darleneisevil/297948062/http://flickr.com/photos/adactio/523679899/http://flickr.com/photos/adactio/523679899/http://flickr.com/photos/fimoculous/246307803/http://flickr.com/photos/fimoculous/246307803/http://flickr.com/photos/adactio/99391890/http://flickr.com/photos/adactio/99391890/http://flickr.com/photos/novemberborn/256746937/http://flickr.com/photos/novemberborn/256746937/http://flickr.com/photos/jenniferwilliams/106394787/http://flickr.com/photos/jenniferwilliams/106394787/http://flickr.com/photos/jenniferwilliams/106394787/http://flickr.com/photos/jenniferwilliams/106394787/

sifr opposites attract

Documents