sIFR vs. cufón: Text replacement and you

by James Diacono 31. March 2010 10:40

There are two reasons I use dynamic text replacement:

  1. Plain text in a browser window is never as smooth as it is in the design (except in Safari),
  2. The designs I'm given almost always use fancy (non-web based) fonts for headings, intro text etc.

Currently I subscribe to two solutions, both client-side: sIFR and cufón. If you want a quick answer to "what should I use?" then here it is: if you want replacement for long sentences and headings, use sIFR. If you want replacement for a few words on a button or in a menu, use cufón. If you want to know more, read on...

sIFR

How sIFR works

sIFR uses javascript to dynamically embed a Flash object in the place of specified HTML text elements. The Flash object is essentially an empty SWF (compiled Flash file) which includes the characters of the font you want to use. When javascript embeds the SWF in the HTML, it passes the SWF arguments such as text-content, font-size, color, rollover behaviour and many more. Some of these properties javascript takes from the CSS applied to the text, and some are overridden by sifr-config.js, which is a human-readable config file containing additional formatting tweaks.

How to use sIFR

  1. Download the source (only sifr.js, sifr-config.js and sifr.css are actually needed).
  2. Generate a font SWF from a True Type Font file. You can do this manually with Adobe Flash (like this) but it is easier to use this online generation tool.
  3. Link to sifr.css in the head of your HTML page.
  4. Link to both scripts in the head of your HTML page, first sifr.js, then sifr-config.js
  5. Edit sifr-config.js to read in the font SWF you created and use CSS selector syntax to select the HTML text elements you want to replace.
  6. Tweak away in sifr-config.js until the text looks right when sIFR is both enabled and disabled, in case the user is missing Flash (iPhones don't have Flash as of early 2010!).

cufón

How cufón works

cufón is entirely javascript and works in all major browsers (including IE6). You still need to generate a font file, but this is output to a javascript file similar in size to the equivalent sIFR SWF font file. cufón looks at selected blocks of text and replaces each word with a dynamically generated image (using the HTML <canvas> tag), or in IE's case, a VML object (Vector Markup Language). As a consquence of this, increasing the text size of the page either doesn't affect cufón-replaced text or expands the image, blurring it. Except in IE, which scales the text perfectly.

How to use cufón

  1. Download the source (all you need is cufon-yui.js)
  2. Generate a font file from a True Type Font. You are unfortunately dependent on this online generator.
  3. Link to cufon-yui.js in the head of your HTML page. Beneath it, link to any font files you've generated.
  4. You may also want to create another file, cufon-config.js, to hold selector information much the same way as sifr-config.js does.
  5. Populate cufon-config.js with what HTML text elements you want to replace.

Legality

Font foundaries are seemingly run by people who are very freaked out that their fonts are going to leak for free. Hence, the vast majority of fonts can't legally be embedded directly into the CSS (what, you didn't know about that? It's been around a while in some form or another - the @font-face directive allows you to supply the font file for obscure font-families - but it's only legal with open source fonts).

Because sIFR uses Flash, and Adobe has a cordial agreement with the font foundaries in Switzerland (or wherever) which allows anyone to embed pretty much any font in a .swf, sIFR is totally legal. cufón... cufón not so much. Although both supply a compiled/obfuscated font resource in .swf/.js format respectively, and are basically the same from the font foundaries' point of view, they haven't got around to adding "Allows embedding using javascript methods" to their fonts' terms of use agreements. And I wouldn't count on it...

So in short, use cufón. Go on, it's young and fresh and rad! Push the font foundaries to legalise it! But remember: you read that in a blog post...I'm not going to be your lawyer if they come after you.

Comparison

sIFR cufón
Core file-size (not including fonts) 30KB 18KB
Independent of Flash × √
Resizes nicely √ ×
Cursor-selectable text √ ×
Doesn't flicker on load × √
Independent of online font-generator √ ×
Online font-generator supports Open fonts (.otf) × √
Supported in all browsers √ √
Degrades gracefully √ √
Legal √ ×
Tags: , , , ,
Categories: Flash | JavaScript
E-mail | Kick it! | DZone it! | del.icio.us | Permalink | Comments (5) | Post RSSRSS comment feed

Comments

4/27/2010 3:43:05 PM #

BTW: Some texts on your blog is translated to czech language for me, but cufon don't know special letters. There should be "Související příspěvky" but is "Souvisejc pspvky".

Petr Snobelt Czech Republic

4/29/2010 4:51:07 AM #

Hmmmm....

Creating a font file in cufon or sIFR requires selecting the 'glyphs' (characters) you want to display.  I only included the upper and lower-cased English alphabet, digits and minimal punctuation.  To support translation, I'd have to include all the common glyphs of all the languages I wanted to support, and that wouldn't be limited to English and Czech.  The file-size of the font file would skyrocket.  I would then have three options:

1. Figure out how to make cufon default an 'ř' to an 'r'
2. Only apply cufon when the viewer's language is the english alphabet
3. Shove all the glyphs in the font-file.

Not too keen on (3), I'll have to investigate (1) and (2).

JamesDiacono

6/7/2010 4:40:23 PM #

Hi, here you can find codesnipp for (1). Text is in czech, you can try any online translator, but code is small and usefull and should work for other languages too.
www.aspnet.cz/.../...net-z-retezce-diakritiku.aspx

Petr Snobelt Czech Republic

6/8/2010 3:34:53 AM #

Hmmm... Petr's script removes diacritics in C# - but then we're back to square one.  The original symptom was that they were being stripped by Cufon anyway!  What I propose is to use javascript to convert all diacritics to their equivalent plain letters, just before the element is Cufon'd.  E.g. "Související příspěvky" => "Souvisejici prispevky".  I assume this will still be readable by Czechs...

JamesDiacono Australia

6/8/2010 4:28:11 AM #

Okay (90% successful) solution found: I made a little jQuery plugin based on olaviivask.wordpress.com/.../, and used it to replace the diacritics of cufon replaced text.  

The plugin:
jQuery.fn.replaceDiacritics = function() {
    this.each(function() {
        var s = jQuery(this).text();

        var diacritics = [
                /[\300-\306]/g, /[\340-\346]/g, // A, a
                /[\310-\313]/g, /[\350-\353]/g, // E, e
                /[\314-\317]/g, /[\354-\357]/g, // I, i
                /[\322-\330]/g, /[\362-\370]/g, // O, o
                /[\331-\334]/g, /[\371-\374]/g,  // U, u
                /[\321]/g, /[\361]/g, // N, n
                /[\307]/g, /[\347]/g, // C, c
            ];

        var chars = ['A', 'a', 'E', 'e', 'I', 'i', 'O', 'o', 'U', 'u', 'N', 'n', 'C', 'c'];

        for (var i = 0; i < diacritics.length; i++) {
            s = s.replace(diacritics[i], chars[i]);
        }

        jQuery(this).text(s);
    });

    return this;
};

The execution:
jQuery('#content h1,#header #siteDescription,#header #menu>li>a,#header #menu>li>span.additional,.widget h4,#filter').replaceDiacritics();

Look here to see it in context: farmcode.org/.../farmcode.org.page-load.js
farmcode.org/.../cufon-config.js

JamesDiacono Australia