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.

35 Comments:

Anonymous JesterXL 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 Tom H 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 judah 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 merrell shoe 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 custom ring binders 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 brandy 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 chocolate strawberries 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 peets coffee 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 Zoe 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 shane Thacker 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 Tommie Hansen 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 shaal said...

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

12:26 PM  
Anonymous Ahmad 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  
Blogger kevin said...

牙醫,植牙,矯正,紋身,刺青,創業,批發,皮膚科,痘痘,中醫,飛梭雷射,毛孔粗大,醫學美容,seo,關鍵字行銷,關鍵字自然排序,網路行銷,關鍵字自然排序,關鍵字行銷seo,關鍵字廣告,部落格行銷,網路行銷,seo,關鍵字行銷,關鍵字廣告,關鍵字,自然排序,部落格行銷,網路行銷,網路爆紅,牛舌餅婚紗台中婚紗,腳臭,腳臭,腳臭,腳臭,腳臭

6:29 PM  
Blogger miyuki said...

ralph Lauren polo shirts , Lacoste Polo Shirts, Burberry Polo Shirts.wholesale Lacoste polo shirts and polo ralph laurenwith great price. clothingol.com offers lot of 10 lacoste polo shirts and lot of 20 cheap polo shirts. clothingol.com offers classic fit polo shirts. polo clothingnike air max ltd is divided into sports life and NIKE NIKENIKE air shoes sports mark for a big hook (swoosh)NIKE life (NSW) mark is a hook NIKE swoosh (English) +Sometimes life will sell NIKE sports channel,cheap puma mens shoes , enjoy shopping!

2:07 AM  
Blogger miyuki said...

chaussures pumaquelle paire de chaussures pour hommes choisir?!? La réponse est toute simple:chaussures nike une paire de baskets en partie vernies. du 17ème au 5ème rang, qui lui offre une place dans un top 5 largement tn requindominé par les sites de vente de produits high-tech. Le site de réservation d'hôtels Bookings.com gagne pour sa part 47 places et atteint le 8ème rang.

2:07 AM  
Blogger miyuki said...

puma basketBlack is lubricious, can match, but young people don't want to match with brunetpuma femmes, can try even cardigan knitting coat will appear lively cap. Boys and girls, puma CATcan choose to choose self-cultivation

2:07 AM  
Blogger miyuki said...

mens clothing men's sweate, cheap columbia jackets, lacoste sweater, ralph lauren polo shirts,ski clothing. Free Shipping, PayPal Payment. Enjoy your shopping experience on mensclothingstore.Us
nike max shoes, one of the world's three major brands of Puma shoes, will build its factory in Lanshan county next year, Hunan province. Taiwan Diamond Group of Footwear production chooses its base in Lanshan county, which is one of top 500 companies in the world.

2:07 AM  
Blogger miyuki said...

Paypal payment. Free shipping. cheap ugg boots ,UGG Online Store,australian cheap ugg boots ,ugg boots australia,UGG Online Store,black ugg boots,ugg boots on sale,cheap uggs. Very Cheap!Vente en ligne de discount chaussure sport : chaussure puma, chaussure nike, chaussure tn, nike tn,nike requin, puma future cat, nike shox torch, ugg boots et plus.

2:07 AM  
Blogger miyuki said...

ralph Lauren polo shirts , Lacoste Polo Shirts, Burberry Polo Shirts.wholesale Lacoste polo shirts and polo ralph laurenwith great price. clothingol.com offers lot of 10 lacoste polo shirts and lot of 20 cheap polo shirts. clothingol.com offers classic fit polo shirts. polo clothingnike air max ltd is divided into sports life and NIKE NIKENIKE air shoes sports mark for a big hook (swoosh)NIKE life (NSW) mark is a hook NIKE swoosh (English) +Sometimes life will sell NIKE sports channel,cheap puma mens shoes , enjoy shopping!

2:08 AM  
Blogger j 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  
Blogger sky22d said...

For the polo shirts, many people loveralphlaurenpoloshirtscheappolos but hate it. This brand is favorite, products like his style; the same is hard not to develop the Lacoste polo shirts brand has been cheap lacoste polos the Asian market. There are stores to buy wholesale polo shirts, However, ralph lauren polo shirts is too many fakes. It will be out of shape cheap ralph lauren polos.

9:13 PM  
Blogger sky22d said...

discount ralph lauren polos are one of the highest in demand cheappolos because along with protecting your skin it also enhances your looks. These polo clothingare the in-thing in today's ralph lauren polo shirts fashion world and among the youngstersdiscount polossummer polospolo shirts whosale.

9:16 PM  
Blogger sky22d said...

It was just a ed hardy clothing with a colourful design of three wolves howling at the moon. Now, it’s a viral sensation with its own ed hardy clothes, videos and an exploding following that has swamped a tiny New ed hardy shirts. Longer arms extend the yoke farther up each side of the babolat pure drive. These arms - or Side Drivers wilson k six- create a stiffer construction and distribute maximum power from the base of the yoke to the middle of the head microgel.

9:16 PM  
Anonymous Anonymous said...

Advanced precision comes from the connection of the Side prince-o3-tour to the cheap tennis racquets at three o'clock and nine o'clock, which results in less torque (or twisting) at polo logopolo shirts in voguepolo women clothinged-hardy shirtsed-hardy sunglassesimpact.

9:19 PM  
Anonymous tea said...

This issue ed hardy t-shirts is of paramount importance as forensic experts ed hardy mens claimed to have discovered in the collar of one of ed hardy womens the fragment of an electronic timer which provided the key link ed hardy sunglasses between the bombing and Libya.They will surely love polo ralph laurenlike this. The styles are so fabulous burberry polos catching the light who would not love lacoste polo shirts like these.

9:21 PM  
Blogger sky22d said...

In a womens clothing boutique store, several girls were trying on fashionable new polos men poloswomen polos. In addition to flower dresspolo fashionembroodered polostennis racketsclothing poloclothingedhardyshirtedhardyclothingedhardysummer ed hardy clothingcheap shirtsed hardy brandcheap ed hardypolo shirts cheapcheap tennis racketsdiscount tennis racketsralphlaurenpoloshirtscheappolospolo fashion, flower shirt, flower jacket, even with the scarf pattern is all kinds of flowers.

9:23 PM  
Blogger as said...

I like your blog. Thank you. They are really great . Ermunterung ++ .
Some new style Puma Speed is in fashion this year.
chaussure puma is Puma shoes in french . Many Franzose like seach “chaussure sport” by the internet when they need buy the Puma Shoes Or nike max shoes. The information age is really convenient .




By the way ,the nike max ltd is really good NIKE air shoes ,don’t forget buy the puma mens shoes and nike air max ltd by the internet when you need them . Do you know Nike Air Shoes is a best Air Shoes . another kinds of Nike shoes is better . For example , Nike Air Rift is good and Cheap Nike Shoes .the nike shox shoes is fitting to running.



Spring is coming, Do you think this season is not for Ugg Boots? maybe yes .but this season is best time that can buy the cheap ugg boots. Many sellers are selling discounted. Do not miss . Please view my fc2 blog and hair straighteners blog.
.thank you .


I like orange converse shoes ,I like to buy the cheap converse shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
Many persons more like Puma basket shoes than nike air rift shoes . the Puma Cat shoes is a kind of Cheap Puma Shoes .
If you want to buy the Cheap Nike Air shoes ,you can buy them online. They are same as the Nike Air shoes authorized shop. Very high-caliber Air shoes and puma cat shoes . the cheap puma shoes as same as other.




polo shirts

ralph lauren polo shirts
chaussure puma

chaussure sport



chaussures puma

puma CAT

ed hardy clothing

ed hardy clothes



ed hardy womens

ed hardy sunglasses

ugg boots

cheap ugg boots

12:39 AM  

Post a Comment

Links to this post:

Create a Link

<< Home