Entries tagged ‘sIFR 3’

There are currently two tools available which generate sIFR 3 movies for you, meaning you don’t have to use the Flash IDE to export them yourself. First there’s sIFR Generator, run by Richard Odekerken, which lets you upload a TTF file which is then turned into a sIFR movie. sIFR Generator currently generates movies compatible with r419, so it’s not useful if you want to use the latest sIFR 3 release. Which, of course, you should.

Update, November 25th: sIFR Generator now supports r436.

Also of importance are the legal issues surrounding the uploading of TTF files to a third-party server. Richard writes:

This is a Software-as-a-Service tool. Using this software requires you to upload font files to our website. By uploading the fonts you grant us permission to use the font, on your behalf, to create a sIFR SWF file that contains the font, and make it available to you.

All intellectual property rights and copyrights that apply to the original font, also apply to the generated font file. This file is made available only to the party who uploaded the font file.

We do keep fonts uploaded to sIFRGenerator.com for debug and statistical purposes.

Also available is sIFR Font Maker by CoffeeCup Software. This is a free, open source tool that runs under Windows. It too generates r419-compatible movies, but unlike sIFR Generator there is no notice of this fact. This, along with the lack of direct links to sIFR 3 pages is something CoffeeCup should fix. That said, it does run locally, so that’s a plus over sIFR Generator in terms of uploading TTF files.

I’ve seen a few reports of links not working properly in movies created via sIFR Generator. It wouldn’t surprise me if this issue is present in sIFR Font Maker as well, since they’re quite likely to use the same underlying software. But, if you need to create a font file, and don’t have access to the Flash IDE, and are okay with using r419, these tools are for you.

A quick update with regards to the beta. A number of issues have been found concerning page zoom and Firefox. These issues should all be fixed now. Other changes include:

• Several bugfixes regarding forceSingleLine.
• The XHTML demo was not built properly by the build script.
• Added support for .sIFR-root { cursor: pointer; }.
• Print preview in Firefox/Windows no longer throws errors.
• The fixFocus caused infinite recursion, but no more!
• sIFR should no longer cause the page to “jump” when the window is resized, although the sIFR elements may flicker a bit.
• Text replaced through replaceText is now remembered after moving back to the page through browser history in Firefox.

You can get r372 from the nightlies.

Useful links:

• Check out the sIFR 3 demo.
• Download the latest sIFR version.
• Subscribe to a feed for the nigthlies.
• Join the sIFR 3 Announce mailing list.
• Join the sIFR 3 Development mailing list.
• Join the forum.
• Edit the Documentation Wiki.

As years end nears, neighbourhood kids are playing with fireworks around the house. A nice homage to the second beta of sIFR 3 I’d like to imagine. Feature wise sIFR 3 is now complete, and I think it’s gotten pretty awesome. If you’re trying to decide between sIFR 2 and sIFR 3, sIFR 3 is definitely the better choice.

What is sIFR?

sIFR 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. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.

What’s new?

Here are the major changes since the last beta:

• The Flash movie and the JavaScript must be of the same version.
• Added ratios, which make the loading of the Flash movies less jumpy.
• sIFR does not work when opened straight from the local filesystem. You must load sIFR from a web server.
• sIFR movies no longer steal user input focus.
• When the Flash movie is opened directly, it shows its revision in a bold, italic and normal font.

• The Flash movie insertion code is equivalent to SWFObject 2.

• sIFR now supports window resizing.

• Page zoom in Firefox 3 and IE7 is supported!
• A workaround has been added for transparent or opaque Flash movies in Firefox/Windows, whose ancestor is floated.
• A workaround has been added for the loss of Flash variables in Internet Explorer if the innerHTML of an ancestor of a Flash movie is changed.
• Hover effects tend to get stuck in Flash, added a workaround.
• Added a custom context menu for links when the hover effect is used.

• In Internet Explorer, the sIFR Flash movies are hidden when the page unloads. This works around rendering glitches where the old and new movies are briefly shown at the same time.

• You can specify the font size in pixels, directly from sIFR.replace().

• You can specify different font sizes within the Flash movie, and they will be relative to the main font size if you specify them with a percentage unit.
• Added support for bitmap fonts, by rounding the font size to the nearest power-of-eight value.
• You can now force the text to be displayed on one line.
• You can disable the pointer cursor (the ‘hand’) inside sIFR.

• Multiple fonts are supported.

• You can replace the text inside the sIFR Flash movie.

• You can change some of the CSS that was applied to the Flash movie.
• You can get mouse events from the Flash movie.

• You can tell sIFR to check if the CSS has been applied to the document. This will speed up initialization in Safari and Opera.

• Opera and Konqueror support has been disabled, because these browsers do not support communication between JavaScript and Flash code.

And there have been many, many more minor improvements. Really, this version rocks!

How Do I Get It?

You can check out a demo of sIFR 3, or simply the most recent version of sIFR 3 from the nightlies. (Note: there are newer versions available than beta 2.) If you want, you can subscribe to a feed for the nigthly releases. Major releases are also announced through the sIFR 3 Announce mailing list.

How Can I Help Out?

First of all, it’s very important to test sIFR in as many scenarios as possible. The easiest way to help out is just to install sIFR on your web site and report any bugs you may find. You can also join the forum or the sIFR 3 Development mailing list. These are also the places to report bugs. Documentation on the wiki could use a lot of improvement. And, of course, a donation is much appreciated.

Support?

Documentation (although, to be honest, it’s not fantastic) can be found on the wiki. The best place to go for support is the forum or the sIFR 3 Development. Please do not post support questions in response to this blog post.

Concluding

I’d like to extend many, many thanks to everybody who filed bug reports, helped testing, responded on the mailing list, improved documentation, spread the word and made a donation. With the year 2008 on the horizon, let’s make it the year of sIFR 3!

• Check out the sIFR 3 demo.
• Download the latest sIFR version.
• Subscribe to a feed for the nigthlies.
• Join the sIFR 3 Announce mailing list.
• Join the sIFR 3 Development mailing list.
• Join the forum.
• Edit the wiki.

(P.S. If you’re curious about sIFR, I’d be more than happy to come give a presentation at your organization!)

Life’s busy as usual, but it’s been too long since I last wrote about sIFR. Using the wonders of modern technology I’ve been writing and posting this from a train speeding towards Rotterdam, where I’ll be dropping by at the Xopus booth at ECM Plaza. Afterwards I’ll be going to a place-supposedly-unknown on a company holiday with Q42 and Xopus. (How cool is that, eh?! We’re hiring, too) So anyway, that’s just to tell you that I won’t be responding to questions in the next few days.

I’ve been working on sIFR on and off, so it’s moving slowly. That’s not to say nothing is happening, though! Since the last post there have been 40 new revisions. As usual they can be found through the nightlies. I’ve also created a RSS feed for the nightlies. This is the best way to stay up to date on development.

Which Version to Use?

An oft-asked question is which revision should be used. Since sIFR is under constant development, it’s always a good idea to use the most recent nightly. Using the feed you can keep an eye on bug fixes. sIFR is beta software. Even though I would totally recommend it over version 2, it is your responsibility to stay somewhat up to date and not miss out on important bug fixes. As usual, installing a new version means replacing the JavaScript file and re-exporting the Flash movie. It’s also a good idea to look at the changes between the revision you’re currently using and the new revision, you may have to change some other things.

Roadmap

So what’s the plan going forward? I intend to stabilize the current code base and release a second beta. After the beta is out I’ll be improving the speed of the code and writing documentation – this will likely result in some refactoring. Then one or two release candidates and we’re good to go for 3.0. I’m not giving dates because I honestly have no idea when this’ll be happening. You can view a list of known issues.

Documentation

The documentation is running behind on the code, for which I apologize. Right now I’d prefer to write code rather than text, so it’ll stay this way for a while. Of course you’re welcome to chip in on the wiki.

sIFR on Tour

Last Friday I gave two presentations about sIFR. One at Onstuimig in Amersfoort (they’re hiring too!) and one at Info.nl. In the presentations I talked about the history of sIFR and explained how version 3 works. You can read Tom Greuter’s report of my talk at Info.nl at their weblog. I had a great time giving these talks and meeting web people here in Holland, so I’d like to do this more often. Let me know if you’re interested!

Links

Some useful links regarding sIFR 3:

• Nightlies (Download)
• Nightlies feed
• Wiki
• Forum
• Mailing lists

Newer versions are available. Find out more.

Yesterday, a security vulnerability was found in sIFR 2 and 3. Malicious websites can trick visitors into running JavaScript code on domains hosting sIFR movies. No exploits are known. If you are using sIFR 3, you are advised to update to revision 278 (or any later revision).

Download sIFR 3r278.

You’ll need to update the sifr.js file and re-export the sIFR movies.

Detailed description

sIFR passes the text it has to render to the Flash movie using Flash variables. Normally these variables are specified using a flashvars parameter, however they can also be passed using the query string. Malicious websites can craft an iframe which points to a sIFR movie on the target domain. An HTML link to some JavaScript code can be passed to the movie through the query string. When a visitor of the malicious website clicks on the link, the code is run on the domain the movie resides. Vulnerable browsers are Firefox, Safari, Opera and Netscape. This specific attack does not work in Internet Explorer. An alternative attack is to load the movie directly or in a popup window, this does work in Internet Explorer.

Revision 278 prevents this attack by not rendering any content that is passed through the query string. Credit goes to Arseny Vesnin for finding the vulnerability.

Other changes

Here are the changes since revision 229:

• Improvements to the Callback API.
• Improved ratio calculation and handling.
• No longer replacing elements that have display: none set.
• Added a transparency and opaqueness option.
• Increased frame-rate of sIFR movies.
• Elements with the .sIFR-ignore class will now be visible.
• Changed semantics of sIFR.prefetch(). When invoked after sIFR.activate() it’ll pre-fetch the given Flash movies in all browsers.
• Fix for the sticky hover problem.
• Fixed problem in Internet Explorer when used in combination with (for instance) SWFObject.
• Anti-aliasing can be specified in JavaScript.
• Text-wrapping can now be prevented by setting the preventWrap property for sIFR.replace().
• sIFR will no longer activate when loaded directly from the filesystem. Load it through a webserver instead.
• Debug mode is automatically enabled if the sifr-debug.js file is loaded (before sifr.js).

As this release has been rushed due to the security issue, I have not been able to update the documentation.

Download sIFR 3r278.

Here’s a quick overview of what’s changed between revision 209 and 229:

• Automatic ratio approximation.

  The font size does not correspond directly to the height of the Flash movie. The relation between the font size, the number of lines and the height of the Flash movie is called the ratio. By defining ratios you’ll stop the Flash movies from abruptly resizing, or at least you’ll be able to lessen the impact. You can now use sIFR.debug.ratios() instead of sIFR.replace() to find an approximation of the ratios. For more information see Ratios.

• Fixed leading for single-line text.

  If you had specified leading, and the text would occupy only one line, the Flash movie would still have the leading applied. This is now fixed. (Thanks, Marty Stake!)

• Fixed stuck hover effect (except for Opera).

  The hover effect for links inside the Flash movie would get stuck if you moved the mouse away too quickly. I’ve implemented a workaround, which works in Firefox, Safari and Internet Explorer. No luck in Opera so far.

• Fixes the movie in Internet Explorer after it’s HTML has been reset.

  If you change the innerHTML of an element which contains sIFR movies, the text inside the movies would get lost. This is due to a bug in Internet Explorer. With the Flash-to-JavaScript callbacks I’ve been able to implement a workaround. As this problem exists in sIFR 2.0.2, this is yet another reason to switch to sIFR 3!

• Improved callbacks, callback access.

  Flash-to-JavaScript callbacks have been improved. You can now get a reference to a callback object, which for example will let you change the text inside the movie.

• Domain control is now the same in Flash as in JS.

  You can now use the same value for sIFR.domains in the document and in Options.as.

• Hide movies until rendered

  There’s now a sIFR.delayCss option which will hide the Flash movies until they have finished rendering. It is only supported in Firefox and Safari, and it’s a bit of a risky setting. In Internet Explorer and Opera the callbacks don’t work if the Flash movie is hidden, in the future this might be the case for Firefox and Safari as well. Use with care.

• As a bonus: as of revision 230 the Flash movies will show their revision

  If you open the Flash movie directly it’ll show it’s revision number. This is an easy way to verify the version of your Flash movies.

And to conclude with some cool news: Ethan Marcotte, designer and CSS wizard, will be making a really flashy sIFR demo. Thank you Ethan!

You can download r230 and subsequent versions from the nightlies.

I’ve been working on adding support for a few hours tonight, when I ran into the problem that eval() in ActionScript cannot compute anything. That’s right, the only thing it is good for is for referencing variables! Like we couldn’t do that in a better way already!

Anyhow, I needed eval() so you can configure filters on the client side. Therefore, my own implementation:

private static function eval(str) {
  var as;

  if(str.charAt(0) == '{') { // Ah, we need to create an object
    as = {};
    str = str.substring(1, str.length - 1);
    var $ = str.split(',');
    for(var i = 0; i < $.length; i++) {
      var $1 = $[i].split(':');
      as[$1[0]] = sIFR.eval($1[1]);
    }
  } else if(str.charAt(0) == '"') { // String
    as = str.substring(1, str.length - 1);
  } else if(str == 'true' || str == 'false') { // Boolean
    as = str == 'true';
  } else { // Integer
    as = parseInt(str);
  }

  return as;
}

Eat that, ActionScript!

Oh, and filters seem to be working. Check out the demo and download the latest nightly. Fun!

P.S. I’m going to be in Copenhagen from Wednesday until Sunday for Reboot. If you’re there, say hi!

Over the past few days I’ve fixed a number of bugs in the code and added some more Flash 8 related features. Here’s a quick post on how to stay up to date. An updated version of the demo distributed with the Alpha release is available.

You can download the latest nightly. The nightlies are similar to the alpha distribution, but you’ll have to re-export the Flash movie and you need to compare the configurations (both in JavaScript as in ActionScript) for changes.

Finally, a list of to-do items for the beta (excluding documentation and testing):

• Use ExternalInterface when possible, instead of fscommand

• Handle font and window resizing

• Add a way to change the font style after the movies have rendered

• (Test?) support for pixel fonts.

• Background images inside the Flash.

• Flash 8 filters.

• IE focus bug with slow page loading, read more.

Have fun!

It’s high time for a release of the new sIFR version, 3.0. With Inman’s Flash Replacement as the original, sIFR 1.0 making it scalabale and sIFR 2.0 bringing it to the masses, this version will really make things rock. Flash 8 has brought a lot of new, cool stuff. Now you can use these features, starting with way better font anti-aliasing and auto-kerning. You’ll also be able to use filters to do shadow effects (in the nightlies).

For those unfamiliar with sIFR, here’s a short description:

sIFR 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. It accomplishes this by using a combination of javascript, CSS, and Flash.

Furthermore, it degrades gracefully when Flash is not present or the browser not supported.

For sIFR 3, the code has underwent a complete rewrite, making it easier to use and making it work even better. There also is a new way to render the Flash font. No longer are guesses being made as to how big the font should be, the cues are taken from the font size used in the HTML page and the number of lines the text spans. In order to provide better styling you can now use FlashCSS. No matter how many colors or font styles you want to use, now you can.

Additionally, leading is now supported by sIFR. A number of small issues has been fixed, and you can now pre-fetch the movies for Internet Explorer and Safari. This solves a problem where these browsers would request the same sIFR movie again and again until it was cached – instead of waiting for the first request. Huge bandwidth saver here! And for the AdBlock users, using a little bit of CSS the object tab has been hidden. sIFR is not an ad, and you should see the text itself, without obstruction.

Here’s the full feature list:

• A new font sizing algorithm, although it needs some attention with regards to padding and wrapping in the Flash element.

• FlashCSS, both configurable in ActionScript and in JavaScript.

• Support for Flash 8 movies, for real good looking text.

• Font resizing in Opera 7+.

• Support for leading

• Flash movie pre-fetching for Internet Explorer and Safari.

• Easier configuration.

• No more object tab obscuring the text when AdBlock is being used.

By the grand tradition of alpha (and open source) releases, this version lacks serious testing, actual documentation and a number of features. None the less, it is functional, as you can see by the demo.

As you are probably anxious to get started, here’s a run-down of deploying sIFR 3. Please note though that this is an Alpha release: if you run a high profile website and you really don’t need the new features, sIFR 2 is best for you. If you like playing around with new tech, please give this version a try. The more real life use, the more improvements can be made.

That’s it for this release. I’ll write more about the beta release in another post. Please give the new Alpha a try and let me know what works and what doesn’t. You can also subscribe to the mailing list. Now, without further ado, to the download!

sIFR now does multiple colors, configured by CSS, and with better links. And it’s still missing a lot of features, and is probably incredibly buggy, but hey.

http://dev.novemberborn.net/sifr3/svn/test/demo.html

As The Seattle Lion pointed out, we’re taking suggestions for sIFR 3. Head over to the request page and let us know what you’d like to see!