sIFR Opposites Attract

sIFR – Opposites Attract
ICKD 4 Mark Wubben – http://novemberborn.net/

February 29th, 2008, Delft 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. I’ll show you how you can
implement sIFR and how it uses some of the technologies Bob Corporaal just talked about.
But first, a quick question. Who’s familiar with sIFR? Or, perhaps, who’s not familiar with sIFR?
Bob’s slides: http://reefscape.net/presentations/ickd08/

Boring Typography
A quick introduction of sIFR. It helps bring rich typography to today’s web. In other words, it turns
boring typography…
Photo by Ralph Aichinger – http://flickr.com/photos/sooperkuh/358241806/

Beautiful Typography
… into beautiful typography!
Photo by Aaron Feaver – http://flickr.com/photos/feaverish/733663763/

Progressive Enhancement
So how is this done? sIFR is a combination of HTML, CSS, JavaScript and Flash. It uses progressive
enhancement, so it only kicks in if the browser will support it and if the correct Flash version is
installed. This means the HTML stays pure, great for search engines and accessibility! sIFR also plays
pretty well with screen readers.
It’s open source, too, licensed under the CC-GNP LGPL.
Photo by Je! Kubina – http://flickr.com/photos/kubina/42275122/

“Geniet, maar drink met mate”
But of course, use with moderation.
Photo by Mark Wubben – http://flickr.com/photos/novemberborn/256746937/

2004, Shaun Inman
Back in 2004, Shaun Inman came up with an innovative solution of doing typography on the web.
Photo by Jeremy Keith – http://flickr.com/photos/adactio/99391890/

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

Summer ’04, scalable IFR
Summer came, and Mike Davidson and Tomas Jogin made IFR scalable. I saw this, was pretty bored and
decided 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://flickr.com/photos/fimoculous/246307803/

Spring ’05, sIFR 2
… 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://flickr.com/photos/fimoculous/246307803/

sIFR 3?
Fast forward to now, I’m working on v3.

Quick Tutorial!
Okay! We’ll walk through sIFR quickly so you learn how it’s applied to an existing web page. This will
more clearly show the principles of progressive enhancement, and it’ll show you how well Flash and
HTML can work together.
First, design the website the way you want it to look without sIFR.
Then determine which parts of the page you wish to replace by sIFR.
Foundations
First, some foundations. We have to add a bit of HTML to load sIFR specific CSS and JavaScript files.
Photo by “darleneisevil” – http://flickr.com/photos/darleneisevil/297948062/

<head>
<link rel="stylesheet" href="sIFR-screen.css"
type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css"

type="text/css" media="print">
<script type="text/javascript" src="sifr.js">

</script>
</head>
Careful! The `media` attribute needs to be correct!
Of course you’re free to merge sIFR CSS with other CSS files. Same for the JavaScript.
<head>


</script>
</head>
<head>


</script>
</head>
Cascading Style Sheets
Photo by James Phelps – http://flickr.com/photos/mandj98/266266308/

.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.

visibility: hidden;
line-height: 1em;
}
.sIFR-active h1 {
padding: 0;
}
.sIFR-active is a class that’s set on the <html> or <body> element when sIFR has activated. You can
use it to style elements di!erently before they’re replaced by sIFR.
visibility: hidden;
line-height: 1em;
}
.sIFR-active h1 {
padding: 0;
}
There is some magic going on here. I’ve picked Verdana as a font family because it’s available on
pretty much any platform. This means the text is rendered in roughly the same manner on each
platform. 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 it’s not specified in pixels. Lastly, we hide the HTML text before replacement to
improve the loading experience.
JavaScript
Next up, the actual code we use to replace elements on the page!
Photo by Jared Vincent – http://flickr.com/photos/jaredvincent/506985893/

var palatino = { src: 'palatino.swf' };
sIFR.activate(palatino);
Put this in the <head>, after loading sifr.js.
First we create an object which holds a reference to the Flash movie. Then activate sIFR by passing in
the object – this lets sIFR load the Flash movie in the background so it ends up in the browser cache
before sIFR actually starts replacing elements. Not doing this may lead to the Flash movie being
downloaded multiple times in IE and Safari.
sIFR.replace(palatino, {
selector: 'h1',
css: '.sIFR-root { color: #555511; \
background-color: #DDDD88; \
font-weight: bold; }'
});
A simple replacement statement for the <h1> heading.

selector: 'h1',
});
We pass in the object we created earlier. sIFR uses the arguments from this object, as well as from the
second object that’s passed in. This means you can put generic arguments on the `palatino` object,
and specific arguments on the second object.
selector: 'h1',
});
Selector contains a CSS selector. Here I simply replace `h1`, but you could become more specific if you
need to.
selector: 'body.programma #container h1',
});
An example of a more specific selector.

selector: 'h1',
});
Some CSS for inside the Flash movie. `.sIFR-root` applies to the entire movie. The CSS properties are
self-explanatory. Flash supports a subset of CSS, and sIFR has added a few other properties. You can
see the full list at http://wiki.novemberborn.net/sifr3/Styling.
So, How Did It Turn Out?
Bet you’re curious now, eh!?
Photo by Ishmael Orendain – http://flickr.com/photos/ishmaelo/31685288/

selector: 'h2',
});
The replacement statement for the <h2> headings. It’s pretty much the same.
What Else Can We Do?
So, that’s sIFR in a nutshell. Looking back at Bob’s presentation, what else can we do?
Photo by Gideon – http://flickr.com/photos/malias/369960853/

Scaling
sIFR 3 supports scaling, or page zoom. This is a feature found in Opera, IE 7 and the upcoming Firefox
3. Rather than changing text size, you zoom the entire page. Let’s have a look at how sIFR handles
this, and how it would look at sIFR not dealt with it.
Photo by Jonathan Talbot, World Resources Institute – http://flickr.com/photos/wricontest/

322587441/
Scaling (cont.)
As you can see, for Flash and HTML to work together you need to take page zoom into account.
Luckily, it’s rather easy! It turns out that the pixels you use in CSS do not necessarily correspond to
pixels on the screen. In other words, when you use page zoom, the browser changes the ratio between
CSS pixels and device pixels.
Internally, a Flash movie is rendered in device pixels. The width and height of the movie in the HTML
page however are measured in CSS pixels. Thus, when you zoom out, the Flash movie’s width and
height in the HTML page change, but internally it stays the same. Hence, the clipping of the sIFR text
we saw earlier.
The solution? If Flash only knew the size it takes in the HTML page, it could calculate the scaling ratio
itself and scale it’s internal size to the HTML size.
Photo by D’Arcy Norman – http://flickr.com/photos/dnorman/80300544/

Communication
Luckily Flash and JavaScript do communicate. The Flash movie knows it’s rendered size at all times,
which lets it scale along with the browser. Communication is also used to resize the Flash movie if
there’s 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://flickr.com/photos/pingnews/473097669/

Questions?
Questions?
Picture by Adam Hooker, <http://flickr.com/photos/azadam/72251349/>

Thank You!
11born.net/ickd4
“And on that bombshell”, I’d like to conclude this presentation. Thank you indeed.
Picture by Mark Wubben, <http://flickr.com/photos/novemberborn/387178249/>

Photography James Phelps
http://flickr.com/photos/mandj98/266266308/
Ralph Aichinger –
http://flickr.com/photos/sooperkuh/358241806/
Jared Vincent
http://flickr.com/photos/jaredvincent/506985893/
Aaron Feaver
http://flickr.com/photos/feaverish/733663763/ Ishmael Orendain
http://flickr.com/photos/ishmaelo/31685288/
Jeff Kubina
http://flickr.com/photos/kubina/42275122/ Gideon
http://flickr.com/photos/malias/369960853/
Mark Wubben
http://flickr.com/photos/novemberborn/256746937/ Jonathan Talbot
http://flickr.com/photos/wricontest/322587441/
Jeremy Keith
D’Arcy Norman
http://flickr.com/photos/adactio/99391890/
http://flickr.com/photos/dnorman/80300544/
Rex Sorgatz Jarod Hodge

http://flickr.com/photos/fimoculous/246307803/ http://flickr.com/photos/pingnews/473097669/
Jeremy Keith Adam Hooker

http://flickr.com/photos/adactio/523679899/ http://flickr.com/photos/azadam/72251349/
“darleneisevil” Mark Wubben

http://flickr.com/photos/darleneisevil/297948062/ http://flickr.com/photos/novemberborn/387178249/
Thank you wonderful Flickr photographers.

sIFR Opposites Attract

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

sIFR Opposites Attract

Încărcat de

Drepturi de autor:

Formate disponibile

sIFR – Opposites Attract

ICKD 4 Mark Wubben – http://novemberborn.net/

Bob’s slides: http://reefscape.net/presentations/ickd08/

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

… into beautiful typography!

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

It’s open source, too, licensed under the CC-GNP LGPL.

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

But of course, use with moderation.

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

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

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

Photo by Rex Sorgatz – http://flickr.com/photos/fimoculous/246307803/

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

Photo by Rex Sorgatz – http://flickr.com/photos/fimoculous/246307803/

Fast forward to now, I’m working on v3.

Photo by Jeremy Keith – http://flickr.com/photos/adactio/523679899/

Photo by “darleneisevil” – http://flickr.com/photos/darleneisevil/297948062/

<link rel="stylesheet" href="sIFR-print.css"

<script type="text/javascript" src="sifr.js">

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

<link rel="stylesheet" href="sIFR-print.css"

<script type="text/javascript" src="sifr.js">

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

<link rel="stylesheet" href="sIFR-print.css"

<script type="text/javascript" src="sifr.js">

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

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

This is the CSS which goes into the HTML page.

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

Put this in the <head>, after loading sifr.js.

Put this in the <head>, after loading sifr.js.

Put this in the <head>, after loading sifr.js.

A simple replacement statement for the <h1> heading.

An example of a more specific selector.

Bet you’re curious now, eh!?

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

Photo by Gideon – http://flickr.com/photos/malias/369960853/

Photo by Jonathan Talbot, World Resources Institute – http://flickr.com/photos/wricontest/

Photo by D’Arcy Norman – http://flickr.com/photos/dnorman/80300544/

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

Picture by Adam Hooker, <http://flickr.com/photos/azadam/72251349/>

Picture by Mark Wubben, <http://flickr.com/photos/novemberborn/387178249/>

Rex Sorgatz Jarod Hodge

Jeremy Keith Adam Hooker

“darleneisevil” Mark Wubben

Thank you wonderful Flickr photographers.

S-ar putea să vă placă și