Dynamic Text replacement

Is meant to replace short passages of plain browser text with text rendered in your typeface

of choice, regardless of whether or not your users have that font installed on their systems.

Dynamic Text Replacement?

Dynamic Text replacement

Is meant to replace short passages of plain browser text with text rendered in your typeface

of choice, regardless of whether or not your users have that font installed on their systems.

Dynamic Text Replacement?

Dynamic Text replacement

Overzicht

• sIFR 2.0• Cufón• P+C DTR (php)• FLIR (php)• SIIR (php)• DTR (php)• Typeface.js (beperkter dan cufón)• Swifr

Dynamic Text replacement

sIFR

• Voordelen:– Alle mogelijke fonts– Flash filters– Text selecteerbaar – Line height– Browser coverage

• Nadelen:– Flash player + javascript– Werkt alleen op een

webserver

http://www.mikeindustries.com/blog/sifr/http://wiki.novemberborn.net/sifr3/http://www.tecnorama.org/document.php?id_doc=70 (dreamweaver plugin)

Dynamic Text replacement

sIFR – how to start

• Get sIFR• Create the flash• Replace text

Dynamic Text replacement

sIFR - basic

<link rel="stylesheet" href="sifr.css" type="text/css"> <script src="sifr.js" type="text/javascript"></script>

<script type="text/javascript"> var cochin = { src: 'cochin.swf' }; sIFR.activate(cochin); sIFR.replace(cochin, { selector: 'h1' });

</script>

Dynamic Text replacement

sIFR<link rel="stylesheet" href="sifr.css" type="text/css"> <script src="sifr.js" type="text/javascript"></script>

<script type="text/javascript"> var cochin = { src: 'cochin.swf' }; sIFR.activate(cochin); sIFR.replace(cochin, { selector: 'h1',

forceSingleLine: false, selectable: false, wmode: 'transparent', css: { '.sIFR-root': { 'color': ‘#FF0000’, 'font-size': '30px' }}});

</script>

Dynamic Text replacement

Cufón

• Voordelen:– handige generator– easy to implement– hover effects mogelijk– line height– duidelijke documentatie

• Nadelen:– geen flash filters– Font file kan >1MB

worden

http://wiki.github.com/sorccu/cufon/usagehttp://cufon.shoqolate.com/generate/http://wiki.github.com/sorccu/cufon/api

Dynamic Text replacement

Cufón – how to start

• Get cufón! • Generate a font• Replace text• Making Internet Explorer behave – <script type="text/javascript"> Cufon.now(); </script>

Dynamic Text replacement

Cufón - basic

<script src="cufon-yui.js" type="text/javascript"></script> <script src="Fortuna_Dot_400.font.js" type="text/javascript"></script>

<script type="text/javascript">Cufon.replace('h1');

</script>

//onderaan de pagina – om flikkering te voorkomen in ie.<script type="text/javascript"> Cufon.now(); </script>

Dynamic Text replacement

Cufón – multiple fonts

<script src="cufon-yui.js" type="text/javascript"></script> <script src="Fortuna_Dot_400.font.js" type="text/javascript"></script><script src="Paralucent-Light_300.font.js" type="text/javascript"></script>

<script type="text/javascript">Cufon.replace('h1', { fontFamily: 'Fortuna

Dot' });Cufon.replace('h2', { fontFamily: 'Paralucent-

Light'});</script>

Dynamic Text replacement

Cufón – effects

<script src="cufon-yui.js" type="text/javascript"></script> <script src="Fortuna_Dot_400.font.js" type="text/javascript"></script>

<script type="text/javascript"> Cufon.replace('h1', {fontFamily: 'Fortuna Dot',

color: '-linear-gradient(red, #C00, #23d559, rgb(0, 0, 0))'});

</script>

Dynamic Text replacement

Demo

Dynamic Text replacement

De Toekomst

• http://blog.typekit.com/• http://typekit.com/• http://twitter.com/Type

Kit• http://forabeautifulweb.

com/blog/about/why_typekit_will_change_everything/