Thursday, January 04, 2007

SIFR 3 Beta Announced - Should I Finish Mine?

Mark Wubben of novemberborn.net has recently announced SIFR 3 Beta 1, which he has been diligently working on for quite some time. It's looking very good, and I'm really glad to see that he is still on the case - it's a pretty complicated task, especially for one guy, and if anyone's up to the challenge, he is.

I attempted my own Flash heading replacement solution (TL.FlashHeaders) some months ago, and ran out of steam at the alpha stage when I suddenly got really busy with other work. Now, I'm slowly beginning to get some more free time, but since SIFR 3 is so close to being done, I'm debating whether it's worth finishing TL.FlashHeaders.

There are a couple of areas where TL.FlashHeaders differs from SIFR in concept. For one, TL.FlashHeaders requires almost no JavaScript configuration. Fonts are specified in CSS, rather than in JavaScript. I really wanted deployment to be as easy including the JS library in the head of your document, and specifying the fonts in CSS as you normally would. There are no special style sheets to include. Everything should just take care of itself.

The second main difference is in the way that TL.FlashHeaders handles fonts. It uses a standard Flash shared font library, so it can be reused in other Flash applications. This approach allows support for multiple fonts within the same heading.

Third, I wanted to provide support for inline headings. This may be the most problematic feature to implement cross-platform, due to box model differences, and may be the least useful.

One of the compromises I had to make in order to achieve those goals was dropping support for Opera. I did, however, keep support for IE 5.x and Netscape 7.2.

Here's the current test page. I haven't touched the code in months, and I know it's got some issues at the moment. Try resizing the page to see how things scale. Even the floats at the top of the page should scale as they normally would. To compare, here's the same page without TL.FlashHeaders.

Even if I don't finish it, it was totally worth starting. One thing that was really awesome about developing my own solution in parallel to SIFR 3 was that I was able to contribute to Mark's efforts a little bit, and it always feels good when someone else finds your work helpful. Also, I learned a ton of stuff that has already been useful in other projects.

Early on, there were a few people who expressed interest in the project. So, what do you think? Should I finish what I started, or move on to other things? It's sooo close....

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.

21 Comments:

Anonymous Anonymous said...

To me, the metric is, does SIFR 3 do what SIFR 2 did not: respect font sizes?

Frankly, I didn't care about the CSS, the JavaScript, or the HTML configuration. The only thing I disliked about SIFR v2 was that if I said "be 16 points", it wouldn't be 16 points.

That's bs. There are 2 key features for fonts that SIFR should be able to solve:

1) a custom font (via SWF)
2) size

I fail to see why #2 was such a problem. If yours does #2 better than SIFR 3, then keep on keeping on. If your's is about the same, then help SIFR v3 get #2 working.

1:26 PM  
Blogger tom said...

Thanks for pointing that out, Jesse. I did in fact design my solution to respect font sizes, although I believe SIFR 3 does too.

The reason SIFR 2 does not has to do with the fact that it tries to make the SIFR heading take up the same space as the regular text heading, so your layout doesn't break and the document doesn't have to do a bunch of reflow.

As a result of respecting the specified font size, my demo does a bit of wiggling as the document flows to accomodate the Flash.

1:36 PM  
Anonymous Anonymous said...

This is way better than SIFR, the scaling and reflow/wrapping makes this the first realistic solution I've seen.

I had a look at your code, but couldn't work out how you're getting the flash to resize vertically, how is it done?

I tested your page in several versions of the screen reader, JAWS, and found that the headings aren't being read out. Looking at the generated source, this is because you're not providing and alternative text in the embed tag;
I'd suggest using the standards compliant object tag:

<object data="example.swf" width="150" height="150" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<h1>Alternative Text</h1>
</object>

for IE:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="150" height="150">
<param name="movie" value="example.swf" />
<h1>Alternative Text</h1>
</object>

Unfortunately, for JAWS to be able to access this, you can't use wmode="transparent".

3:09 AM  
Blogger tom said...

Tom H, thanks for the kind remarks, and the testing. With regard to JAWS support, I was thinking it would make the most sense just to turn off TL.FlashHeaders for JAWS clients. People who are using a screen reader would not benefit from enhanced graphics, right? (Or is there a JAWS use-case I'm just not seeing?)

I should point out that SIFR 3 will support the same kind of text re-flow that TL.FlashHeaders has, and is presently a much more battle-tested solution. You should definitely check out the beta.

As to how the vertical resizing is done - When the width of the swf changes, its Stage.resize event is fired in ActionScript. The swf changes the width of its TextField object to match the stage width, which causes the text to reflow. The swf then sends the new TextField.textHeight out to JavaScript, and JavaScript sets the height of the swf to match the TextField.textHeight. Make sense? I should probably post the ActionScript source...

8:06 AM  
Blogger tom said...

Sorry, that's Stage.onResize, not Stage.resize. But you knew what I meant. ;)

8:09 AM  
Anonymous Anonymous said...

i was working on my own sifr version myself when it first came out. i had a lot of features and fixes to the way they did things which they didnt want to implement such as the things jesse said. i stopped working on it because i had too much else to do.

anyway, long story short, i think its worth pursuing. keeping the quality level high and the options open is key.

my solution was to put a flash tag or flash attribute in the html and then if flash replacement was desired find and replace all the "FlashReplacement" elements or HTML elements with "flashAttributes" and replace them with inline flash.

<FlashReplacement color="red" size="12" target="h1">

i like the way i did it but i'm not sure how it will validate (not that i give a s$!t). anyway, i can help if you need it or put up a svn repository.

10:50 PM  
Blogger tom said...

Thanks Judah, I may take you up on that offer. Watch my blog for updates on the project - I hope to post some source code soon.

10:42 AM  
Anonymous Anonymous said...

The Internet has brought the world of shopping to the fingertips of just about everyone. Long gone are the days of driving from shop to shop, wasting precious time and petrol just to find that one particular item you've been searching for in the size you need. In this case, we're referring to shoes.

8:56 PM  
Anonymous Anonymous said...

Currently, most of us are using mobile phones. True to our nature, we have used the different features of these sophisticated gadgets to put a smile on our faces and that of others. We are sending text messages that are really humorous and listening to ring tones that would tickle our funny bones, every time the phone rings.

At present, a multitude of ring tones are easily available and can be downloaded in different models of mobile phone handsets. Mobile phone users can choose from monophonic ring tones, polyphonic ring tones, true tones, real tones, SMS ring tones, buddy name tones, caller id tunes, etc., according to their specific requirements. With the technological advances achieved in this sector, a high degree of customization of ring tones has also become possible. Users of mobile phones can give vent to their creativity and design some witty and humorous ring tones in many of the latest models of handsets. For instance, users are free to use their own voices or any other sound to create a number of personalized ring tones! Depending on their intelligence, wit and comic timing, they would be able to create some hilarious ring tones that are guaranteed to put a smile on the lips of anyone who happens to hear them.

3:10 AM  
Anonymous Anonymous said...

The recipe I am going to share with you today is about 350 years old! A great favourite from the Cape where the first brandy

from Cape grapes were distilled in 1672! We have come a very long way since then when it comes to the quality of our brandy,

but still, Cape Brandy Pudding remains an old time favourite :) Growing up in South Africa is great fun with all the recipes

your mother makes and teaches you during your younger years!

6:36 AM  
Anonymous Anonymous said...

Here's how to make delicious chocolate covered strawberries. First of all ensure that the strawberries you are intending to use are dry, then allow them to be room temperature warm prior to making them. After the strawberries have been covered in chocolate, put them in your refrigerator to cool, but do not store them in the fridge. Consume within 1-2 days.

11:00 AM  
Anonymous Anonymous said...

Fair Trade Coffee is an organization that protects the laborers who work hard to bring you great coffee. Fair Trade Coffee is produced a bit differently from regular beans, but still ensures that the beans are of the highest caliber.

In the United States people drink a lot of coffee, from cappuccino to espresso. Most people couldn't face a day without their morning cup, but most people have no clue how coffee is made. Fair Trade Coffee helps bring information on this process to the many coffee drinkers in the U.S.

7:16 PM  
Anonymous Anonymous said...

The number one thing that annoys me about sIFR, even 3 beta, is that the text doesn't reflow when the window is resized, making it risky and tricky to use in liquid layouts or beside floated images. You say that sIFR 3 will fix this, and I hope the final release of it really does. If not, definitely keep on working on your alternative!

I like the idea of not having to put some of the CSS in the JavaScript. You're right -- configuring sIFR is confusing and complicated. Your approach sounds nicer.

The end result must be accessible, though. If screen readers and/or text browsers, etc, can't read the text, there's no way I can ever use this. No, JAWS doesn't need to have your nice headings active, but there's no way to turn off the script for them -- is there?

10:36 AM  
Anonymous Anonymous said...

Tom please release this soon! sifr 3 is so painful. Not so much in the capabilities but more so in having to use various files to format the headings. It gets confusing at times and I'm *loving* how you've implemented it being handled directly in the css. Please email me if needed, I would love to use it on a high profile site. Thanks!

info (at) shanethacker.com

2:04 PM  
Anonymous Anonymous said...

any chance you are planning on perhaps using jquery framework?

7:15 AM  
Anonymous Anonymous said...

I Haven't tried to implement sifr, but I like keeping things simple. If you're approach is easier to implement than I hope you'll release it soon. Good luck!

3:11 PM  
Anonymous Anonymous said...

PLEASE CONTINUE DEVELOPMENT OF YOUR CONFIGURATION. SIFR 3 is clumsy and doesn't respect CSS and creating compatible swf fonts in a pain.

Look at TrueFontFamily.com and if you can get yours to work the same way...wooowwwwweeeeeee.

7:45 AM  
Anonymous Anonymous said...

Yes, you should. Sifr3 isn't really a good way to deploy fonts imo. It's to much configurating etc.

All config should, as you say, go in the CSS-file where it belong and your alternative is the only decent one it seems.

6:18 AM  
Anonymous Anonymous said...

this solution looks great,
and seems ilke a better alternative to sIFR,
please continue developing this...

12:26 PM  
Anonymous Anonymous said...

Please continue with your development.

If it can fulful these elements:

1) Respect fonts, sizes
2) Work with CSS
3) Expand with page shift, wrap around
and the best possibly thing:
4) Easy to implemenet!

It is always good to have an alternative. And why not sell it? I know I would pay for it.

10:14 PM  
Anonymous Anonymous said...

ralph lauren poloburberry polo shirtthe north face jacketcolumbia jacketspyder jacketed hardy clothing ed hardy clothesed hardy shirts ed hardy t-shirts ed hardy sunglasses ed hardy mensed hardy womens Wholesale HandbagsCheap HandbagsWomens HandbagsCheap PursesDesigner HandbagsTennis RacquetTennis Racket
cheap tennis racquet
tennis racquet discount
cheap tennis racket
discount Tennis Rackethead junior tennis racketwilson tennis racquet
wilson tennis racket
head tennis racketbabolat tennis racket

2:06 AM  

Post a Comment

<< Home