Introducing sIFR: The Healthy Alternative to Browser Text
UPDATE: Version 2.0 is now available. See article here.
It’s been well over ten years now since the debut of the graphical web browser and we still don’t have an easy way to deliver rich typography using HTML/CSS. With CSS we can size, style, color, kern, show, and hide our text but we can’t deliver something classical typesetters have delivered since at least the 15th century: custom typography. Until now. In concert with Shaun Inman and Tomas Jogin, I am releasing into the public domain a scalable, multiline, Flash 6 compatible version of IFR to help you reduce the amount of browser text in your life and free the world from the scourge of Arial.
An updated example of sIFR (now at version 2.0) is available here.
But first, a little history
Custom typography for the masses made its debut on computers in 1984 with the release of the Apple Macintosh. The original Mac came pre-installed with such jewels as Chicago, Geneva, New York, and London. As more foundries released digital Postscript versions of their masterpieces over the next several years, the pool of available typefaces grew to thousands. Want to design a wedding invitation? Use Sloop. Want to emulate an artist’s handwriting? Use Cezanne. Want to throw together a cheesy HR flyer? Use Comic Sans. The possibilities are endless, and in some cases, scary.
Then along came the web.
Originally used to spread technical documents across networks, the early web had no need for anything but the barest of typographic essentials. There was no imagery, no sound, no animation, no color, and none of the niceties we are used to seeing on the 21st century web. With the introduction of the Mosaic graphical web browser in 1993, this began to change. Text could now be rendered using any font installed on a user’s system.
A technology before its time?
This newfound support for custom typefaces was nice, but it ended up being of limited use for the following two reasons:
- Postscript typefaces were not represented on screen by their beautiful font outlines but rather by jaggy (“aliased”) bitmaps specially designed for low resolution displays. What this meant was that unless typeface designers created special bitmaps for each possible size on screen, the font ended up looking like crap. Even today, the best web typefaces (viz. Verdana, Tahoma, Helvetica) have been specially adapted for low-resolution displays and that’s why they look so clean on screen.
- There is only a tiny subset of fonts commonly installed on Macs, PCs, and (some) Linux machines. These include the usual suspects: Verdana, Times, Georgia, Helvetica, Courier, and the ugly kid in the corner that no one likes — Arial. Since most people have nothing but these core fonts installed on their systems, it is futile for a designer to specify another font to use on their web site when the user is unable to display it.
Eleven years later, the situation is finally changing. Mac OS X uses Quartz technology to display true Postscript anti-aliased fonts on-screen and the effect is stunning. Windows uses a slightly inferior technology called ClearType to accomplish a slightly inferior version of the same thing. With this newfound ability to display true versions of typefaces in web browsers, you’d think typography on the web would be exploding. Well it’s not. Why? Because no one has solved the second problem yet: how to deliver custom typefaces to people who don’t have them installed.
Premature proprietary panaceas
Several years ago, three possible solutions to this problem were floated out to the web development community. Netscape introduced a feature called “Dynamic Fonts” which downloaded a temporary character set for whatever font the designer had specified. This solution only worked in Netscape browsers of course. Then Bitstream, a renown type foundry, released a plug-in called the “Bitstream Font Player” which purported to do the same thing via a more compatible plug-in model. Eventually, Internet Explorer broke this functionality and Microsoft introduced their own solution for dynamic fonts: the very creatively named Web Embedding Fonts Tool, or WEFT. WEFT fonts took the form of downloadable EOT files which actually worked pretty well in PC Internet Explorer but were totally unsupported in any other browser or OS.
The problem with all of these solutions was that they were not compatible across OSes and browsers, but perhaps more importantly, they were too far ahead of their time. Who wants to view a custom font if it can’t be rendered as its designer intended, with anti-aliased Postscript goodness?
So here we are in 2004 and no one has come up with an easy solution to the problem of custom typography on the web.
Flash to the rescue
With today’s release of sIFR, or Scalable Inman Flash Replacement, we finally have a standards-compliant way to deliver rich typographical text in a flexible manner to over 90% of web users. What is this all about, you ask? Here’s a brief overview of how we got here:
In 2001, I redesigned ESPN.com employing a custom-built Flash 4 component to display our headlines in bold anti-aliased Akzidenz Grotesk (the official ESPN on-air typeface). Using inline javascript, we were able to display rich headlines to people who had Flash 4 installed and plain text to those who didn’t. Additionally, the Flash component automatically scaled down all headlines to fit on one line no matter how much text was entered. The rich headlines drew praise from our users and the negative effect on the code was minimal.
Two years later, Shaun Inman invented a much better technique of embedding Flash headlines by not embedding them at all. Instead, Shaun wrote his pages out as standard XHTML and then used javascript and the Document Object Model to replace all designated text with Flash-rendered text a split second after the page had loaded. Known as IFR, or Inman Flash Replacement, this method was rightly praised by the web community for enabling rich typography without affecting any underlying XHTML code. The method had many revolutionary features and only a few shortcomings, the most glaring of which was the lack of support for multiple lines of text.
Several months after Shaun released IFR into the wild, Tom Werner and Rob Cameron built on Shaun’s code and released their own version called WAC-FR, or Werner and Cameron Flash Replacement. Tom and Rob proved that there was a lot more work to be done in the world of Flash Replacement by introducing a great set of features including support for multiple lines, CSS, and scalability based on a user’s text-zoom setting. The main drawbacks of WAC-FR were that it required Flash 7, it relied on a character count to estimate how many characters might fit on a line, and it sometimes used multiple Flash movies for single blocks of text. As of the summer of 2004, Flash 7 penetration is at about 60% so WAC-FR probably can’t be considered a solution for the masses yet, but that percentage improves every day.
As part of a major yet-to-be announced redesign project (think ESPN big… details soon), I had to come up with a way to display multiple line Flash headlines while keeping compatibility with Flash 6. Furthermore, the headlines had to adapt automatically to areas of different heights and widths.
sIFR is born
sIFR approaches text replacement in a totally different way than previous methods:
- Traditional IFR says “Here’s the exact vertical and horizontal space we’re going to provide for this Flash headline. Make sure you don’t use too many words or they won’t show up.”
- WAC-FR says “Here’s the text we need to display in Flash, here’s the type size to display it at. We’ll keep stacking Flash movies on top of each other until all the text is displayed.”
- sIFR turns the model on its face and says “Here’s the exact space the headline fills up if rendered as browser text. Let’s draw a Flash movie that exact size and lay the type out as snugly as possible within it.”
The following explains the sIFR process:
- A page is requested and loaded.
- Javascript detects if Flash 6 or greater is installed.
- If no Flash is detected, the page is drawn as normal.
- If Flash is detected, the HTML element of the page is immediately given the class “hasFlash”. This effectively hides all text areas to be replaced but keeps their bounds intact. The text is hidden because of a style in the stylesheet which only applies to elements that are children of the html.hasFlash element.
- The javascript traverses through the DOM and finds all elements to be replaced. Once found, the script measures the offsetWidth and offsetHeight of the element and replaces it with a Flash movie of the same dimensions.
- The Flash movie, knowing its textual content, creates a dynamic text field and renders the text at a very large size (96pt).
- The Flash movie reduces the point size of the text until it all fits within the overall size of the movie.
This, of course, all happens too quickly for the user to even notice what’s going on, but below is a super slow motion example of the process (Flash required to see demo):
In addition to the improvements I’ve made to the original IFR on the Flash side of things, I worked with the incomparable Tomas Jogin to improve the replacement script itself. Tomas wrote in an entry several weeks ago that he wanted IFR to be able to replace not only structural elements like H1s and H2s, but all HTML elements, including DIVs. Tomas rewrote a portion of Shaun’s original IFR script to accomplish just that. So now we have in sIFR a solution which can dynamically replace any element of any height or width with a Flash movie that will correctly display one or multiple lines of text.
As another added bonus, I’ve built in the ability to automatically keep the Flash text linkable if the normal HTML version was linkable. You can even configure it so underlines show up when you hover over the text.
But will it scale?
With sIFR comes the introduction of a new feature I call “lazy scaling”. Since sIFR lets the original browser text determine the height and width of the area to be replaced, that area scales with the user’s text zoom setting. While WAC-FR does a great job of scaling on-the-fly when a user resizes text, sIFR only scales on page load. This is not much of a sacrifice in my opinion because firstly, I expect users to use sIFR mainly for text that is already large enough to see clearly, and secondly, because if a user is vision-impaired, they are probably surfing the web with text zoom consistently on. I don’t expect a lot of people are toggling between text zoom settings dynamically for every page they visit.
Limitations
The only significant restriction I am aware of so far is that you shouldn’t use Flash text which is markedly narrower than your browser text. Using text that is wider is no problem since Flash will just shrink it to fit, but for best results, try to match the metrics of your Flash font as closely as possible to the metrics of your browser font. Don’t be afraid to use negative kerning on your browser text if you have to. What I did was render a couple of lines of the custom font in Photoshop, take a screenshot, pull it into Dreamweaver, and overlay browser text on top of it. This way, you can tweak the kerning, leading, size, and weight of your browser text until you get a close match. You don’t have to get it perfect… just get it so that the browser text takes up either the same space or slightly less space than the custom font text. This is a one-time process and it only takes a few minutes.
If you must use markedly narrower Flash text, you can hack the script so that as soon as Flash is detected, your browser text is given extreme negative kerning values before the headline boxes are measured.
How to use it
Grafting sIFR into your site is simple:
- Open up “sIFR.fla”, double-click the font item in the library, and choose any font installed on your system. Export the movie out as “sIFR.swf” or whatever name you’d like.
- Set the CSS properties of your browser text as mentioned in the paragraph above.
- Set which items you’d like to replace at the bottom of the “sIFR.js” file.
- Include the “sIFR.js” file in the head element of your pages.
That’s it! You’ve just freed yourself from the typographical constraints of browser text.
What’s next for web typography?
While sIFR is a liberating solution, it clearly falls into the category of “things which shouldn’t have to be done”. Not coincidentally, this is the same category a lot of things on the web fall into. Using floats to create column layouts, using javascript to clear absolutely positioned elements, using empty alt tags, using image replacement methods, etc, etc, etc. There are simply a lot of things we do as web developers because of the glacial pace at which standards manifest themselves. Do we like standards? Yes, we do. But will we sacrifice our own ability to create better work on the web because of them? No, we won’t. Well, some people will.
I won’t.
In working through sIFR, I began to think of ways browser manufacturers could quickly implement anti-aliased custom typography. The only possible answer I could think of was licensing Flash’s rendering engine. We’ve already proven that Flash can render text as we like on all platforms, and we’ve already seen that every new version of Flash penetrates over 85% of computers within 14 months, so why can’t there be some sort of standard declaration in browsers which invokes a Flash font outline file and renders designated text in that typeface? Ideally, it would be a CSS declaration like so:
h1 {font-family-enhanced: "futura.swf"}
Update: It has been brought to my attention that the @font-face declaration is already part of the CSS2 spec (I thought it was just a Microsoft addition), so perhaps something like this instead:
@font-face {font-family: "Futura"; src: url("futura.swf") format("opentype", "flash");}
Since it’s a new property, it wouldn’t break any existing sites and would degrade gracefully as well. I know this sort of solution might be sacrilegious to the W3C, but what about the more progressive, quicker moving, less idealistic WHATWG? Here’s a group that is interested in improving browsers NOW, damn the purists. I really love what the WHATWG is doing in the HTML space these days, but I wonder if typography is even on their plate. Hey Macromedia, how about organizing a kegger with those guys or something?
In conclusion
Please feel free to use sIFR in your own projects or wherever the situation calls for it. I am under no illusions that this solution is perfect yet, so if you notice quirks or have improvements to suggest, please post them here. I will be happy to roll any improvements into new builds as soon as they are judged as such.
sIFR is offered free of charge, but also free of customer service. I usually try to answer all questions readers submit, but my time is limited.
Right-click here to download the latest sIFR (1.1.4) or check out an example online.
sIFR is now at version 2.0. Please see the most recent sIFR article for details, files, and examples.
Alright, have at it!
Brilliant!! That’s all I have to say.
Great enhancements, Mike. sIFR seems solid enough for me to actually use in a project, while past Flash Replacements merely had me curious.
And I can’t wait to see your “ESPN big” project.
Nice Work Guys!
One thing I noticed with my 2am tinkering is that when linking anywhere in the text, the entire replacement becomes a link. So no multiple linking or single work linking or am I missing something? Or was this the intended effect?
Great Stuff and I too am wondering about “ESPN big”….
I echo Ryan’s comments. My curiousity has now been graduated into motivation. I tip my hat.
So, the text isn’t selectable once rendered?
The real answer isn’t a technological one. It’s a business or licensing one. The problem has more to do with convincing makers of type to allow web developers to spread type around at no cost, or at a cost that makes sense and is practical. Obviously, no one has figured this out yet.
But I think the last thing we need is a Flash specific CSS property. We should be able to to add a call that says to get the font from the server, not the client, and render it. That breaks the current licensing model for type, so browsers makers won’t do it.
Outside of that, I’m enjoying using sIFR, but wish there were an easier way to do the code and mark-up.
Also, you ever figure out that problem with the Design Eye article? It’s the only article on DxF that the sIFR disappears. I’m beginning to suspect it’s a memory issues with Safari.
Sean and Brad:
I haven’t even tested putting multiple anchors in there. Not sure what would happen in that case. Seems like it would work though. As for the text not being selectable, it’s kind of a tradeoff between having anchoring abilities or selectability. If you open the Flash file and comment the onRollOver and onRelease stuff out, and then add “selectable” as a property for the textfield, you can have selectable text. There may be a way to have both… not sure yet.
Andrei:
Interesting insights regarding licensing. I knew there was something there but thought it had been successfully sidestepped with the WEFT tool and Dynamic Fonts. You’re right in that this may be a licensing problem more than a technology problem, but wouldn’t it then make sense for Macromedia to work with foundries to create some sort of protected format which is licensable by web publishers? I’d pay a few bucks as an individual blogger or probably a lot more as a major content provider to have this functionality. Additionally, simple licensing really isn’t the only problem: it’s rendering. WEFT fonts just look like crap. They look alright with ClearType turned on, but Flash renders them much crisper.
As for the Design Eye article, try subbing in this sIFR code (the code you’re using right now is regular IFR) and see if you still notice the problem. It’s certainly a puzzling one. (IFR on one particular page of Design By Fire draws itself, but then disappears permanently when you scroll it off screen in Safari… weird!).
I agree entirely. As stated early in the article, several companies attempted this and none got it quite right. We need a group working toward the betterment of web design as well as web standards – I hope that’s what the WHATWG will turn out to be in the long run.
Echoing Mike, I sure hope that the WHATWG has typography on that plate (or at least cooking on the back burner). sIFR and other technologies make it possible, but if we want to get away from the ‘Scourge of Arial’ we’ll need ease of use.
Excellent work, Mike! I hope to roll this out in some form on my own site soon.
By the way, the CSS solution is just a thought. I’m for whatever gets this done quickly and harmlessly. Whether it be a CSS property, an HTML extension, or a flag to designate server-delivery like Andrei suggests, I’m for it.
Very nice work Mike. I’m amazed just how flexible this is.
I agree with Andrei – font licensing may the biggest stumbling block, but there should be some sort of CSS property to deal with this. It’s presentation and thats the logical place for this to go.
Top work!
Call me a cynic but even if we get everything we want, then we’ll still have a percent of users disabling this function, or overwritting with their own fonts… or IE will require hacks or different syntax.. I’m so jaded these days!
You’re right – people will turn off the functionality and we’ll have to struggle through old browsers not supporting the newest technology. However, your first point isn’t a problem, it’s giving users a level of control they deserve. The latter point is, of course, a small problem.
But so what? Progress is progress. If we can at least come to a conclusion as to how this should be implemented and get the forerunners in browser technology in the game, we’ll be on our way. All new web technologies have started off this way in the last half decade and if we hope to continue on, standardization (to a degree) and implementation by technology leaders like Mozilla is absolutely key. Everything else will eventually fall in to place.
Nice work Mike! I’m yet to try it out, but judging by your example and your description, it really seems to be a great flash-replacement technique, overcoming several weaknesses with previous ones. Keep it up!
Just a few quick questions/ideas:
Good work. It does my heart good to see standards-compliant people giving Flash the chance it deserves…
Great work on this, Mike! Just a few observations:
In the slow-speed example, I’m only seeing one line of the original headline appear via sIFR. That’s intended… right? :)
(Editor’s Note: Oops, forgot to include font outlines on the demo… fixed now… thanks!)
On the example page:
In Firefox (0.9.3, win2k), the sIFR renders fine in the browser, but not at all in print preview, and quite broken in an actual print – for a scan of a print, see http://broome.us/sifr/print-firefox.jpg
In IE (6.0.2800.1106, win2k), print preview doesn’t show the sIFR text as fitting on the page. An actual print appears the same as the preview – see http://broome.us/sifr/print-ie.jpg
I’m only being a stickler about the print versions because I’m about to re-vamp a site using tons of images-as-headlines that I’d like to replace with IFR (or now, sIFR), and print-friendliness is an important factor.
Is this as simple as specifying different handling of “html.hasFlash” in the print-media stylesheet (and getting plain text), or is there a fix for the flash that’ll keep the nice headline when printing?
Thanks for so much already.
(Editor’s Note: Printability is now working in version 1.1… thanks for the heads up)
Mike-
I already told you that I loved you for this, for I’d just like to reitterate it publicly. :)
I’ve not yet had a change to give it a shot, but I can’t wait to play with it. Great work, guys.
The leaps and bounds IFR has taken in the last couple months is just astounding. You (and this applies to everyone who has done anything with the technology) keep updating the idea to take it to the next level. You’re improving the web, and the future looks bright. With the recent popularity of standards and accessibility, we can retain the typography branding we desire while still catering those people with vision disabilities – whether blind or merely farsighted. Nice job, though a on-the-fly scalable version would be pretty cool.
Regarding on-the-fly scalability: Currently, on-the-fly scalability is not possible because the text that is being measured is already gone the second sIFR is run. Also, keep in mind, my example shows a completely unbounded liquid layout. Although sIFR can be used for multiple widths dynamically, it’s of course best to use it in a bounded area so window resizing has no effect on its placement.
Regarding printability: Ok, we have our first problem to solve here. I think I already have an answer though. I’ll try and get it to today. Should only be a minor change to the JS file.
Excellent article. Tops. Where as all my writing on IFR has been tiny, humorless type on grey newsprint you’ve created an advocacy piece with anecdotes and history as colorful as any issue of Wired magazine. Much praise.
Here’s a snippet to guide you on your quest to printability:
swfHTML += ‘<‘+e.nodeName.toLowerCase()+((e.id)?’ id=”‘+e.id+'”‘:”)+((e.className)?’ class=”‘+e.className+'”‘:”)+’>’+txt+'<‘+’/’+e.nodeName.toLowerCase()+’>’;
Add this after the code that writes the object tag. This will reinsert the element you just replaced inside the containing div. And from there you can hide and show that element and the object tag based on the media type using your favorite screenreader-friendly CSS technique.
See there I go again. Humorless. ;)
Wow. Awesome. I’ve been planning on using this soon, just haven’t had time to get my mind around it. Thanks for woking this out and the great writeup.
Totally awesome, I plan on using it. Great work on meshing the usefullness of flash and HTML.
One question, Is there a way to make the background color on the flash transparent?
I am finding some interesting behavior here. This seems to work fine until you replace multipe instances of an element that have differing lengths. It seems that instead of finding the width and height of each instance, it uses the initial w & h on all instances, forcing some overscaling.
Example
Brad,
Thanks for the heads-up. I’m glad I’m not in the shrinkwrapped software industry. It’s so easy to apply fixes over the web.
The behavior you mentioned should be fixed now in version 1.1.1. (Any bets on how many revisions we’ll see today? I guessing a few). All I did was remove “i–” in the “while” loop and slightly modify the way the heights and widths get declared.
Thanks Mike, works great!
This looks really fascinating, but there’s one sticking point that I’m not getting: this system is obviously for pages with mainly static content, correct?
In other words, you would still need to manually create distinct flash movies for each headline you want displayed using this method. Using this system in a CMS-driven environment would entail building another system to automatically render Flash text, correct?
Neil,
No… this system works for static content, but is specifically made for content generated through a CMS. You just spit out the browser text normally through your CMS and one Flash file does everything for you automatically. The only time you’d even need a different Flash file is if you wanted to use a different font.
It’s that easy.
Since you added support for linked content, have you considered sending the URL to the status bar onRollOver (is this feasible)?
Hm… there seems to be a problem when the anchor tag has a title attribute — adding a title to the link prevents the Flash from showing up. So does adding an id.
Bloody brilliant, you’re now officially a ‘Diamond Geezer’!
Mike,
I just want to add another mark in the “I love you for this” column. This is just outstanding. Great job.
Cheers,
Kevin
I’ve been mostly out of the loop on the whole IFR thread, possibly because 1. I’m not a Flash person and 2. I’m not a JavaScript person. You all seem to be covering lots of ground and solving lots of issues with Flash-replacement. But two issues are popping up in my head about sIFR:
1. I can’t select any of the text replaced by sIFR: At least not in Safari. Haven’t tried this in multiple browsers yet. But I’m constantly selecting text within a browser, copying and pasting — especially headlines. Seems like this technique kills that method for me?
(Editor’s Note: This is now taken care of as of version 1.1.2)
2. Inaccessibile?: As far as I know [1], any text hidden with either display:none; or visibility:hidden; (which the sIFR example above uses) is NOT read aloud in some screen readers. Meaning this technique, while very cool (thank you for documenting it Mike), still suffers from the plague of the original image-based FIR?
[1] Facts and Opinion About Fahrner Image Replacement
Doug,
In response to your two questions:
1. Currently, if you make text clickable in Flash, it ceases to be selectable. So you can have one or the other. If you’re using this method for headlines at the top of a story (or anything which doesn’t include a hyperlink), you can simply comment out the “clickability” part of the code in Flash and your text is fully selectable. Personally, I’ll be using this method mostly for non-clickable stuff, so my text will be selectable (try selecting my own headlines on this site… they work).
2. Accessibility: The document is not even touched unless the correct version of Flash is detected. I’d assume (perhaps wrongly) that computers equipped with screenreaders would intentionally not have Flash installed, so this should be a non-issue.
Actually, the sample doesn’t illustrate this but there is an option in Flash to make the dynamic text selectable. You can see that in action on my site.
The second issue is easily addressed by positioning the hidden elements absolutely somewhere far off the left of the screen instead of changing their display or visibility. The text will even remain copyable (even though it can’t be seen) which I think is the most-likely reason someone would be selecting text on the web.
I need to learn not to walk away from the computer mid-post! What Mike said. :)
Bravo!
One suggestion about your proposed rule: do like the Mozillans do. Name it in such a way that it is obvious that it is an extension (rather than standard). Something like:
-flash-font-family: “futura.swf”;
But yes, great technique, thanks for sharing! :)
This is a really great idea! I think D. Bowman had a good critique in point #1–the first thing I tried was selecting it to. If it could be selected like web text, this would be even more amazing!
Mike and Shaun — thanks for the direct responses. Helps clarify (solve) the issue for me, and hopefully answers the same questions for others.
Excellent. I’d love to try this some time.
One suggestion: for replaced text that is selectable (not clickable), how about including one additional property to turn the cursor into a text-selection tool on hover:
html.hasFlash .replace:hover { cursor: text; }should do the trick I think… Otherwise, I just get the default cursor (black pointer on the Mac) and it doesn’t look selectable like normal text. Not sure if it needs the :hover pseudo-class or not, but I’m guessing so. I assume this would work in all non-IE browsers.
What a great technic! Eventhough (like Doug) I’m not much of a Flash and JS guy, I actually might use this technic in a project…
I would then make use the negative text-ident technic though to hide the text (as “the wolf” suggested). I’d also look into detecting flash serverside as someone suggested, the little flash you get from the js checking for flash can be quite annoying. (pardon the pun)
I do wonder though, if you could use this on a whole page…
Also, (I haven’t looked at the new code yet) would it be possible to have multiple fonts? Could you embed them in a single flash file? And then, by assigning a certain class, get the proper font?
Because, seriously, if we’re going to have this anti-aliased custom font goodness on our sites, why limit ourselves to one font?
Alright, version 1.1.2 is now live and it makes text selectable by default. I am automatically getting the text-selection tool for selectable text in Safari… ah.
The only thing that’s changed in 1.1.2 is the Flash file itself. I’ve also saved the .fla down to Flash MX for those who don’t have MX 2004 yet.
Any word as to developments toward solving the wacky Google caching issue? (via)
andrew,
Should already be solved. Original IFR did not use HTML-enabled textboxes so when Google changes this:
<h2>Improve the Weather with PHP</h2>
to this:
<h2><B style=”color:black;background-color:#ffff66″>Improve the Weather with PHP</B></h2>
… all hell breaks loose. It’s troubling to me that Google is changing anything at all on the page, but I guess they are just trying to highlight certain terms. I haven’t switched my main headlines on this site over to sIFR yet, so when I do (this week), this issue should be moot.
So this is going to allow valid XHTML because the code the JS writes happens after being parsed by DOM? Looking at the code being written by JS its including the embed tags which will not validate as proper XHTML. Does anyone see any problems? Or could we orcorporate a solution like this to the JS document.write:
http://www.ambience.sk/flash-valid.htm
Hmm, if you’re going to have updates all the time (which is a really good idea), then it might be really handy to have a separate page, or even link to this article from the sidebar.
How else can we keep up to date on the evolution of IRT (Image Replacement Technics)
Ok… now that a ton of hard work has been put into sIFR, it’s time for eiither Mike or Shaun to step up to the plate and write a step-by-step, explicit, concise manual or blog entry for how to implement sIFR into a website, including strategies for the best way to organize code snippets, and where to begin with the whole thing.
Once that is done, I’m sure we’ll see a ton more sIFR in practice. For me to implement it on Design by Fire took quite a bit of guess-work based on the haphazard detail of the entires by all parties involved on how to make this baby cook.
My humble two cents.
Now it has been a while since i fiddled around with flash, but a while back i produced a dynamic calendar with html text that contained hyperlinks to other pages… and it was all selectable.
Were you generate the link in the .fla dependant on the if statement, how about stripping out the url of the href and using the TextFormat.url property along with the other TextFormat attributes?
That may create a text field with a link that is also selectable…
For some reason 1.1.2 doesn’t seem to work for me, although 1.1.1 works perfectly first time.
Mozilla
Flash MX Professional 2004 (Educational)
Export Settings: ActionScript 1 & Flash 6
Excellent work by the way.
I should have added to my previous post that I just get a default serif font appearing in the flash movie instead of my replacement font (Myriad).
Apologies for not being clearer the first time, and please feel free to edit this into the original post if you see fit.
I too experience the default serif font with 1.1.2 and correct font rendering (Myriad even!) with 1.1.1.
I wonder if maybe a typo slipped in there somewhere.
Looks to me like the culprit is
in 1.1.2 but was set to true in 1.1.1
(Editor’s Note: Yesindeedy, that is the culprit and it is now fixed. Thanks Cameron.)
Where are the SVG developers? :D I’d love to see something like this using SVG or another open-source solution rather than Flash.
This is not to detract from the work done here at all, merely an observation… and perhaps a reason to learn SVG. >:]
I had to manually define the size of my movie in order for the text to be the correct size. Anybody else with this issue?
Also, is there a way to center the text? Picky picky huh? ;-) Way to go Shaun, Tom, and Mike!
After reading over the comments more, and your write-up (specifically your comment about doing better work now) I have some more comments:
Basically, I like the confidence about doing better solutions now, even if they aren’t “purist” solutions, but how much better is it? This is not a slam, merely a question. Yes, you’ve achieved artistic freedom with your typeface, but at what cost? Classic textual behavior such as wrapping to fit a defined box is lost except at the initial load. Selectability and the ability to copy text are present, which is good, but the ability to span from a sIFR heading to a body of hyper-text is impossible. The text also does not resize in response to browser commands.
While I like to see this type of thinking and problem solving, it reminds me of a very good point made in the most excellent article, A Dao of Web Design. Basically, is it worth pining for the typographic control of a graphic designer when you are a web designer? Yes, to be a web designer is to be a graphic designer in a sense, but we all know that the web designer did not make the graphic designer obsolete. Web design is a new medium that should not remain too strongly tied to any predecessors.
I do not assume that you disagree with this. Again, I sincerely applaud the problem-solving mindset that spawns solutions like this. I just wonder sometimes if, at least in the early stages, a more purist-minded approach to developing a medium, institution, whatever… is ultimately more beneficiary and prodcuctive.
Essentially, one would acknowledge that in their role as a web developer, the visual layout, as you’d prefer everyone to see it, is far from the top of the list of priorities, and that to pursue that in favor of abandoning other tried and true features of the web might be a tad… irresponsible?
I tried my hardest to word all that in the least confrontational, most conversational way I could.
Cheers again, I still plan to load ‘er up and check it out. :)
Seth,
Don’t worry about offending me. This isn’t a communist society, and the great thing about that is you can design sites as you please and others can design sites as they please. Some may find sIFR and other like-minded techniques more trouble than they are worth, and to those people, stick with browser text. I’ve tried to make this solution as easy as possible to implement (takes only a few minutes in some cases) with as few drawbacks as possible.
The lack of spanning selectability between Flash and browser text blocks is of little consequence to me. To be perfectly honest, I’m not sure I want people selecting entire articles of mine (or of my company’s) and pasting them anywhere to repurpose them anyway. I can see the need to select a headline (to include it as link text somewhere) or to select an individual paragraph (to cite it somewhere), but the lack of ability to select everything on the page at once is of no consequence in my opinion.
The second limitation you mentioned is the lack of on-the-fly text zooming. Again, this is of little consequence in my mind because of the reasons mentioned in the article.
I guess the difference in how I think is that I simply don’t accept web design as a more limiting field than traditional graphic design. I think it’s more flexible in many ways. I am a bleeding-heart utilitarian when it comes to body copy because I believe the only purpose of body copy is to be read as easily as possible, but when it comes to display type, I simply don’t accept the four-walled-world that is browser text.
The value you create with display type depends entirely on how good of a designer you are. You can make things worse, you can keep them the same, or you can make things better. What Rolling Stone reader would prefer they do all their headlines in 48 point Times? Not many. Why? Because the typography of the magazine is part of its personality. There is no reason to think this sentiment can’t carry through online. It carries through very nicely on the new Coudal site and they are just using browser text. Problem is, they are still limited to Times and Gill and it only looks great on Macs (5% of the world computers).
I think this solution, just like any method used in web design and development, is completely optional. I certainly think it provides more present-day value than some of the wacko puritanical stuff out there. I’ll keep my mouth shut about that stuff to avoid a holy war for now.
You make some very fine points Seth. I have to disagree with the quote above though.
When people take the time to create a new technique provokes thought and reaction.
This sort of innovation is fantastic for the web community .It highlights some real shortcomings and provides useful insights and ingenuity that can spark productive tangents.
Sure we shouldnt have to use css-hacks to make IE play nice – but on the whole we do. And in the process we are productive and provide solutions for those who wish to use them until something better comes along (which may or may not happen… I cringe regarding the SVG comment above…No offence,but SVG?)
Somehow i don’t think cavemen thought they would wait until matches were invented to put off using sticks & stones to create fire ( A dramatisation of course but you get the drift)
$0.02
Can you disagree with “I wonder…”?
I agree with most of what you “countered” with, likely because, as I implied, you can’t really disagree with what is essentially a question worded as a statement. :)
I mentioned SVG merely because it pops to mind as the “standards equivalent” of Flash. Don’t even start on their dissimilarities, I am aware of quite a few. I think merely of an open standard that provides the means to render vector graphics which could include special typefaces grabbed, say, from a server, I dunno. Again, I don’t know SVG, nor am I a Flash-head.
Just like to play devil’s advocate more than anything, I think. >:)
In case of any confusion, my previous comment was directed to Marc.
Mike,
Oh, you almost had me! Until this! :D
This is where I wonder if you’re lapsing into the perhaps overzealous insistence on the control of a graphic designer in a medium such as the web. The part I’ve emphasized speaks especially to that as you cite print examples to justify a practice on the web. I understand that you follow-up with your assertion that it carries over well. But… again, I would like to see more debate on whether or not it’s worth it! Why?
Because of the strongly emphasized portion near the end: I have been doing a lot of experimenting on my site with CSS as the primary design tool. Many would immediately argue that it is far too limited a tool for any “serious” or “complex” design. But how can those limitations be defined in any other context than the worlds, like the print one, that the web spawned from? When considered in context of the web and its history alone, are not these technologies all but constantly at their zenith, since they are currently developing? Therefore they cannot be limitations. The limitations, as we all well know, are user agents. I try not to see the lack of fonts as a limitation, but rather a creative guideline. I worry that I sound like one who doesn’t approve of “going outside the lines”, because that is definitely not true.
I guess, as I mentioned, the idea of taking a serious look at what it means to be a web designer, and questioning whether or not the current definitions are too strongly tied to other mediums really fascinates me. I feel like there isn’t as much debate on this interesting topic as I’d like to see. It’s quite likely there is, and rather that I’m just not aware…
I don’t disagree with your reminder that its optional. How could anyone? Goes without saying, no? And wouldn’t you be best to avoid instigating a war by avoiding titles like “wacko”? I kid… ;)
Off topic:
Looking at my comment… might I suggest adding a CSS rule to distinguish <em>phasized text within’ blockquotes? The italicized italics don’t really stand out. :)
Seth, i didn’t start on anything… =]
I didn’t realize that wondering about something was any different from thinking about something. I never did speak good england.
To me “wondering” about SVG compared to Flash would be like “wondering” about not to cater for IE just because it isn’t as standards compliant as Firefox…
It’s not a reflection on your or your comment – but to svg and its adoption.
But I do agree with your original point.
And hopefully in the future this result will be easier to achieve. Lets just hope this technique and these conversations are a catalyst to that.
Oh, I Can and I will disagree with peoples wonderings. It’s my prerogative a Web designer (Tongue firmly in cheek)
Expect a sIFR-led renaissance in typography based redesigns…
Seth, New Blockquote Olympic Record Holder:
Does this site look like it suffers from the “overzealous insistence on the control of a graphic designer”? Have you used the Readability tools in the sidebar? The user is the king of the castle here. Want to render the whole site out in 18 pixel Crackhouse? Just type it in. Is it overkill… surely. But it’s also the opposite of what you’re referring to.
I’m really not trying to compare the web to print here. Print was just the most recent example. Typography plays a key role in print, TV, Film, stone tablets, and just about every other visual form of media that ever was. There is no reason for the most sophisticated media of all time to be the most lacking in this regard. All we’re trying to do is push things along here. The train is moving too slow. Everyone will get there eventually, but everyone moves at their own pace.
Haha Adam..
Marc (Mike and the rest for that matter),
I hope I am clear on this much: I support this type of problem solving, and I agree that these types of solutions are often great catalysts to other things.
Off topic again:
My statement about how you can’t disagree with a question isn’t a matter of opinion, though. Questions cannot be disagreed with. Statements can. Think about it. Imagine any question. Then try to disagree with it. What are you disagreeing with? Ya dig? :D
Mike!
I didn’t say that you are and overzealous control freak as a general rule, nor did I even state that I thought so in this instance. Just using your method here as, I dunno, a sort of icon or metaphor for a broader topic. At least, I’m trying to… ;p
Mike,
Sorry, but I can’t resist pointing out your comparing the web’s evolution to print again… “the most advanced medium” is also the youngest and least evolved. Not fair to the web to want it to be more like print. Think of the issues it will have to resolve in therapy someday.
Fair enough Seth. I just don’t think the state of typography on the web right now is anywhere near proportional to the progress made elsewhere throughout the medium. Books are essentially the same as they were hundreds of years ago. Newspapers a bit less so. Film and TV have changed quite a bit, but the internet has already changed more in its first ten years than all of those mediums combined.
I think your question is basically whether or not there should be natural limitations on type on the online world, given its essence as a medium. To that, I say no.
Mike,
I couldn’t agree with you more about typography, especially when put into that perspective.
I don’t think your summary of my ideas here is best summed up with the question you chose, though. It ignores the fact that I don’t view my choices for type, as user agents currently allow, to be limitations, natural or otherwise. At least, I try not to. :)
Mike (or anyone)-
I finally got around to setting this up on jeffcroft.com (whic already had the original IFR) and while it generally works beautifully, I have a couple of questions:
1. Is it possible to make the background the flash movie transparent (forgive me, I’m not a big flash guy)?
2. There seems to be a slight shit of my text to the right by a couple of pixels. Each line starts two or three pixels right of where the container element starts. Can this be corrected somehow?
3. It says in the .js file that the width and height aren’t required elements, but I’m having trouble getting it all to work right without them. I’d like to specify a height (effectively setting a pixel size for my text), but not a width, so that the movie would extend to the boundary of the container and then wrap to the next line. Am I doing something wrong?
4. Is there a legal/piracy issue here? For example, if I make a file called conduitITC.swf (which obviously is set up for Conduit ITC), couldn’t someone that doesn’t own that typeface take my SWF and use it to implement that face on their site? Forgive me for giving people ideas — it’s just something I wondered about.
Thanks again to all of you who have contributed on this. I truly believe that this sort of thing is the future of typography on the web, and I said so when Shaun released the first version. The improvements made here take it to the next level (and then some). You all are amazing.
Oh oh…one more…
5. Is there a flash variable I can send to transform the text to all uppercase or all lowercase?
Jeff,
1. Yes. You can set the background of the Flash movie to be transparent if you’d like by adding “wmode=transparent” to the embed tag in the JS file and <param name=”wmode” value=”transparent” /> to the object tag. I’ll probably automate this with the next minor release. I don’t recommend using transparency, however, because browsers can really screw up the anti-aliasing of the text with this setting on.
2. You can always offset a font in the Flash code if you’d like. Just add something like this to the code block:
holder.txtF._x = 5;
holder.txtF._y = 5;
By the way, the shift may be the result of some padding in an element you’re replacing. Try setting your padding down to zero and it may go away.
3. Yeah, you don’t really want to set the size of the font just by setting the height of the element. Just style your browser text to the size you want it using CSS, and the Flash text will naturally be about the same size. Essentially, the Flash movie is drawing its letters in a similar mold as the browser text letters.
4. No idea about that one. I haven’t read anything about it so I’ll just assume it’s fine unless someone says otherwise.
Something that hasn’t been touched on but may prove useful to this and other flash files in regards to flash’s notorious “Pixel Shift”.
On the original technique (ifr) it was noted that using a background or animation in the flash file could be achieved , but warning about the shimmer , or pixel shift that flash is famous for.
The fix mentioned works partially (that is to offset from the edges enough, or to make sure the clip that moves is slightly larger than 100%) but the best fix, for reasons that I am not smart enough to work out – is to make sure the part that shimmers/shifts is inside a movie clip and it’s alpha is never set to either 100, or 0.
A lot of fades on MovieClips from 100 alpha to 0, or vice-versa had this problem. Simply starting the clip at 99% alpha and fading to 1% alpha eliminates this problem altogether.
Even if you are not fading a clip and it shifts this technique seems to work.
Is it possible to include the font file without having to open the .fla? This would be useful for bundling the technique with a CMS. The admin section of a CMS could show a checkbox, if sFIR should be used, and an input field for the path to some font file.
Mike-
Most of my problems went bye-bye once I read the instructions. :)
Seems that I was using display: none, rather than visibility: hidden in my CSS (this was a leftover from the original Inman technique). once I fixed that, everything just started working beautifully. Oh man, it’s nice, too.
Still have the couple-pixel shift — will play with that tomorrow.
I tried to use it with special characters (Äćšđž) in my native language (Croatian) with UTF-8 encoding but instead of letters I get digits. Is there any way around this problem? Has anyone tested it yet for special characters in other languages, other than english?
I would really love to use this technique. Thank you for any help.
Igor – I’m no expert but I guess it depends which font you use. If the font supports those characters, you can choose which to export from within the flash movie
Sweet one Mike! I’ve been lookink at IFR for a current client’s site and it looks like I just found its next evolutionary step instead.
Bravo!
I am digging through this right now, and so far, it seems very elegant in its simplicity and very powerful in its flexibility.
I like this. Well done!
Point of note, it doens’t seem to work in Opera at all.
(tested using 7.53 on Windows)
Great thing, Mike!One word about your comment boxes – with one of the nightly builds of Firefox (20040809, WinXP) it’s – more or less – possible to scroll the content of them with the scroll wheel of the mouse, what looks strange.
Since Andrew commented on evolution…
What about evolving the terms FIR and IFR to be proper descriptions of what they do? You’re not replacing images or Flash, but rather replacing text with images or Flash.
They are text replacement techniques, are they not?
Let’s all pretend my last comment never happened…
How many times do y’all find yourself making statements such as that only to realize literally minutes later something like:
“Well, I suppose it depends on if you read it as what’s being replaced, or what’s doing the replacing…”
D’oh. :) Carry on…
add an onresize event to the body to reflow the flash headlines…
code stripped
Mike:
Thought I’d finally chime in. This is awesome, you guys have done a great job.
I think I am going to be replacing the code I was working with before (IFR with modifications that Danny was helping me with) and use this instead. We are in the process of rolling all our headlines and section headers over to Flash here…
As far as the transparency issue goes. I found that I was having problems with it, so I made a second flash file with the bgimg the same as my Section Headers. It works greats.
anyways…Congrats.
Absolutely brilliant man! I integrated it into our site as soon as I read your article. I love that there is genius out there like yourself willing to push the envelope in order to create the better web experience. You’ve made my night, seriously excellent!
This is the single greatest thing I’ve read in some time. I’m going to integrate it into my site when I launch my redesign over a http://www.spyderfcs.com
Great stuff my friend…
Brad has literally stolen the words out of my mouth! (Well, maybe he typed a lot faster than me would be more accurate here…).
I’m still going to say it, because you all deserve it:
The best thing I’ve seen lately!
Officially on my future websyte’s “must use this” list :).
Congratulations and keep up the great work!
The font size fit algorithm seems a bit rough. Wouldn’t it be faster to iterate from 96 down in steps of say 10, and when it becomes too small iterate up again by 5 then down with 3 then up by 1?
BG, adding an onresize handler isn’t as simple as it sounds–it is possible but an entirely different function would have to be used. And then it wouldn’t catch user-resized text. But you could always use the iframe detection method I use in my clearing absolutes script. Just need to make time to roll it all together…
Dan, I used the correct font. I even tested it locally with special characters Äšćđž (and with german characters üä) by outcommenting the three lines of code in ActionScript (ones thet set the width, height and sample text) and it worked. It even worked when I forgot to comment back the said three lines and published it to swf file (off course the text wasn’t pulled from html then)
I guess JavaScript can’t pass the text from html to swf correctly. Any idea how to fix it?
The more you’re all thrilled about this great trick the more I get frustrated I can’t use it properly. :o]
Igor: I think your conundrum deserves some investigating. I’d certainly like to make this as internationally flexible as possible. I know there are various hooks in Flash which have to do with character encoding. Perhaps the answer is somewhere in this Macromedia technote. Perhaps the command “System.useCodepage=true” would do it?
Please post anything good you discover about this here.
Anders: You can adjust the decrementing font size number if you’d like but it all happens in a split second. I tried going down by two and three and I didn’t really notice much of a difference. Decrementing by one ensures the snuggest text fit, especially at small sizes. In either case, it’s fully customizable.
I’ve never posted here before and I wanted to mention that it’s a nice site.
Has anyone thought of how much bandwidth this eats up? I took a look at Shaun Inman’s site under the activity window in Safari and the swf file is called for every headline on that page. He has 4 headlines currently amounting to 133k total.
I’m not a big Flash guy so I am very impressed with what you’ve done here. It’s always exciting to see what people can come up with and I envy the creativity and knowledge to make this happen.
But, maybe we should think of the advantages and disadvantages of using sIFR instead of replacing text with GIFs or PNGs. I’m aware that we are unable to select the text if the latter technique is used, but I don’t really see the use in selecting a headline.
Just my 2 cents.
Mark,
Sometimes the Safari Activity window can be a bit misleading. The SWF should get pulled from the browser cache after the first time it is loaded. Now, if you’re using different .swfs for different headline styles, that’s a different story. I am an advocate of using only one or two styles per page… keep it simple.
Also, as a point of advice, you can also trim down your font character set using any standard font editing tool. This will save even more bandwidth.
The only problem I have with this is Flash itself. This now depends on whether the user has the Flash lugin over a certain version number. Using PHP, this all could be replaced quite easily with a dynamic image, and not depend on a plugin. That seems the best way IMO.
Mark-
The point of IFR is to *not* have to make a new image for every headline. it’s intended for CMS-driven systems that have new headlines all the time. I’m sure Mike would never get anything done at ESPN if he had to make a new graphic for every header they have on the site. This way, he gets most of the elegance of an image (begin about to use a on-web font, etc.), but doesn’t have to create them manually.
Also, your point about bandwidth: once a flash file is downloaded once, it shouldn’t have to be downloaded again, right? So, a 10k swf used 50 times is still only a 10k download — not a 500k download.
#87. Igor Jelen writes:
#88. Mike D. writes:
Тo fix this and for right rendering in browser ever just change line 191 in JS file:
before
after
Mswitzer-
A php-based replacement is a fine idea, but thre are some advantages to the Flash-based system:
1. You only download the flash movie once (mine is about 17k). This is a huge bandwidth savings, compared to possibly hundreds of dynamic images created by PHP.
2. PHP is limited to the fonts installed on the server. In a typical siuation, the designer has no control over this. It’s more practical to expect the designer to choose from fonts installed on his/her Mac or PC, rather than on a server somewhere that he/she probably doesn’t have access to and is often *nix, complete with five really lousy fonts.
You’re right, this does depend on the Flash plugin, but it degrades gracefully for those who don’t have it. And let’s be realistic — almost everyone has it.
I’ve got no problem with your PHP method, I just think this Flash-based method is more practical for the typical designer, who doesn’t have much control over the server he/she is using.
In response to Kevin Cannon, it works fine for me in Opera 7.54, which should not be any different from .53. Make sure that Java/Javascript is enabled by hitting F12
Nice. Haven’t seen it mentioned in the comments yet, but it seems that in using this technique, the usual Flash layering issues apply. That is, in certain browsers you can’t have the Flash elements draw underneath other elements on the page. This would be an issue, for example, if you had a cascading navigation menu that dropped down into the body of your page and overlapped your headline area where you’re using sIFR. In some browsers, the dropdown menu– whether it’s pure CSS or a form element– won’t render on top of the .SWF file no matter what you do within your CSS (using z-index layering or whatever else). This is a known issue with the way these browsers are permitted to handle embedded plugin applications and how they draw to the screen.
I read once somewhere you can try setting the Flash movie’s window mode to “transparent windowless” and use absolute positioning for the .SWF, but I’ve never tried this. Also, I’m not sure that the absolute positioning wouldn’t cause problems of its own depending on how the page is designed and coded.
Anyone with any further insight on this as it applies to both sIFR and in general?
Regarding Jeff Croft’s point #2 above, when creating images with text in PHP one is required to pass along the path to the font file you wish to use. That font file can be anywhere in the directory structure you’d like. I suspect the “typical designer” has enough control over the server they are using to upload files, html or otherwise. Thus it’s just a matter of uploading whatever font you’d like to use to wherever you’d like, and then telling your PHP script the correct path.
At least in this case, inflexible server configuration is a bit of a straw man.
In IE the – param name=”wmode” value=”transparent” – allows some javascript menu’s to flyout over the top of the flash. in operan and mozilla it seems that it does not.
More information on making flash with a trasparent background, and Flash content displaying on top of all DHTML layers
It’s not terribly helpful, but its a start.
It’s a common misconception that “transparent” is the required window mode to force Flash content to fall below other html elements. In truth. “opaque” works just as well if not better because it doesn’t incur the processing overhead and anti-aliasing rendering issues caused by “transparent.”
I’ve tested it in IE 5+ Mac/PC, and the latest versions of Mozilla Mac/PC and Safari. Safari (as of 1.2) and Firefox Mac (0.9.x) still have issues regardless of the window mode. Works fine in all the other browsers I tested though.
Jeff,
Good points re: PHP vs. Flash headlines I hadn’t thought of. Thanks.
Mswitzer-
A php-based replacement is a fine idea, but thre are some advantages to the Flash-based system:
How many headlines are there typically per page? Usually 1, and the bandwidth is negligible.
True enough, I’m fortunate enough to admin my own server and host my own clients. Not everyone can. But then my PHP script is reusable and hosted in a server library, and I don’t have to modify it at all to use it on any site on my server, whereas every project you use your flash module for you need to redo, or at least modify slightly.
Is there any legitimate trustworthy stats on how many people have flash? Especially flash 6 or above? Degrading gracefully is good (NOTE: I actually prefer Inman’s non-flash headline)
And from your argument, I have to agree that for the general designer Flash is probably the easiest method for them to use.
Using Flash to render your font of choice seems for me is missing the point. Flash is a proprietary technology that is not and never will be standards compliant. I have in the past acheived a similar result using Ming
which is fine – it outputs as Flash 1 and with user agent detection and noscript we hopefully have all bases covered, but that doesn’t change the fact that it is not a long term solution.
Why does defining a margin or padding value for the unreplaced (no Flash) tag affect the font-size of the same tag when Flash-replaced? For example …
produces a Flash-replaced h1 tag with zero padding and a size of 98px. What gives? I’m primarily concerned with this beacuse I’d rather have my pages look similar regardless of whether or not the user has Flash installed. Am I missing something here?
Also, there are occassions when Firefox doesn’t really enjoy this technique and bugs out on me. Right now I’ve defined my font-size as 45px but I get something that looks like 8px instead! Again, am I just an idiot?
Mike,
great job on expanding Shaun’s technique. I made two small modifications to your ActionScript to suit my personal preferences. The first one was to fix an infrequent problem with narrow windows when the scrollMax value would jump from 1 to 2 after moving the text field to 0,0 – causing the bottom of the text to be cut off. I simply moved the _x and _y assigment inside the while loop, so the comparison would catch the change. Second, I didn’t like the way the word wrap would split a word when the orig_width was less than the word’s width. The code below, inserted immediately following the if-then initialization of textsize, seems to prevent mid-word wrapping.
this.createEmptyMovieClip(“tempClip”, 3);
tempClip.createTextField(“txtG”, 1, 0, 0, orig_width, orig_height);
tempClip.txtG._alpha = 0;
tempClip.txtG.html = true;
tempClip.txtG.multiline = true;
tempClip.txtG.wordWrap = false;
tempClip.txtG.embedFonts = true;
tempClip.txtG.autoSize = “left”;
tempClip.txtG.selectable = true;
var fmtG = new TextFormat();
fmtG.color = textcolor;
fmtG.font = “bigheadline”;
fmtG.size = Number(textsize);
fmtG.leading = 4;
var wordArray = txt.split(” “);
for (var z in wordArray){
tempClip.txtG.htmlText = wordArray[z] + ” “;
tempClip.txtG.setTextFormat(fmtG);
while (tempClip.txtG.textWidth >= orig_width ) {
textsize = textsize – 1;
fmtG.size = textsize;
tempClip.txtG.setTextFormat(fmtG);
tempClip.txtG._x=0;
tempClip.txtG._y=0;
}
}
delete wordArray;
delete fmtG;
this.tempClip.removeMovieClip();
sean,
The point of sIFR is not to make it a long-term solution. It is an instant solution which pops right in (and lifts right out, if necessary). It is of no consequence that Flash is “proprietary” because the core of your document doesn’t change. In the homebrewed method you speak of, you seem to be actually changing the document itself. sIFR can be technically implemented across an entire site in a few minutes time… and pulled out in a few seconds.
Mike,
Ming isn’t homebrew, it is a clever PHP scripting language, an almost SVG wannabe. It is an include with the output text as a variable (ie dynamic from any source) so the one file is sitewide and any changes (such as changing the font, size, color etc.) update every instance.
But that is irrelavent; the same argument could be made for using CSS hacks. I like your method though, I just think it is a diversion, not a solution.
Greg,
the javascript uses offsetwidth & offsetheight to calculate the heading width & height. This value includes padding and borders. Unfortunately, in IE, there is no good way around this – that I know of. For Mozilla and possibly others, you could try using getComputedStyle and getPropertyValue(“width”). Too tired tonight, but I’ll play with it tomorrow to see what I can come up with.
In the mean time, as a workaround, you could wrap the h2 in a span with display: block, and put the padding on the span.
sean,
Ming… yes, looks like good stuff. It definitely doesn’t seem easy for the layperson to set up, but that doesn’t mean it’s not good. Would you have it do all the scaling and wrapping calculations for you? This is what sIFR really excels at… with no setup time.
How about accessibility? Is the text accessible to search engines, text browsers and screen readers (on top of “regular” browsers)?
As flash comes by default installed on most machines, and as IE bugges you non-stop if Flash is NOT installed, I don’t see how your assumption would be true for most blind users.
At least the blind users I know, all have Flash installed (they use IE6 on winXP with Jaws by and large), and they won’t know how to un-install Flash and not have IE ask to install it every time they reach a webpage which contains Flash.
I too am having a shift, not being much of a Flash person, and not seeing a quick answer after reading through this thread, I’m not sure what can be done about this.
Also, I’m curious how easy it would be to have two of these on a page – you know, for like H2 and H3. Guess I’ll tinker with that.
Either way, this is something alot of people have been waiting for, good work.
Xslf: “How about accessibility? Is the text accessible to search engines, text browsers and screen readers (on top of “regular” browsers)?”
Yes, it is. Only user agents which execute JavaScripts will get the alternate “flash-powered” version, everybody else gets the regular vanilla HTML.
I’m not sure how screen readers work with web browsers; if they read the source HTML code they will have no problem, but if they just read the screen they might (depending on wether or not flash is installed, and wether or not javascript is enabled). If they use Lynx or some other browser which does not execute JavaScript they will have no problem.
A given user agent will _only_ see the flash replacement if they have JavaScript _and_ Flash enabled, otherwise they will see the regular accessible HTML code.
lpqboy-
I stand corrected.
Mike-
I want to think you again. I just used this one a client site and it worked beautifully, letting me render text in Mrs. Eaves and the great Sofia Script from Letterhead Fonts (the same typefaces I used in their logotype).
I’m still trying to figure out the one or two pixel shift to the right. It definitely seems that there is some kind of built-in padding within the Flash document. I recall that Inman had actually set the text box’s upper left corner just outside the viewable Flash movie area. Maybe something like this needs to be done here, as well. The shift is obvious if you set a background color on your Flash movie. The text doesn’t touch the left-hand side — it starts a pixel or two to the right. Not a huge deal, but to my picky eye everything looks slightly misaligned.
Another small problem I’m having is with the selectors. Is it possible to have different replacements for the same element with a different class? When I do this:
TJ_replaceElement (‘div#mainColumn>h2.replace’,’/swf/conduitMedium.swf’, ”,”,’#666666′,”,”);
TJ_replaceElement (‘div#mainColumn>h2′,’/swf/conduitMedium.swf’, ”,”,’#333333′,”,”);
I get both replacements on every h2, wether or not it has the “replace” class. I would have expected to get the second replacement on classless h2’s, and the first on h2s with class=”replace”. Again, not a big deal…just threw me for a loop.
Finally, I’m still wondering if there’s a way to have Flash automatically transform my text to all-uppercase. If anyone knows how, I’d be forever grateful! :)
Thanks again to everyone who has contributed to this — I really believe it’s the best thing since, well, Inman Flash Replacement. :)
For those of you interested, I created an example that uses two fonts and a hefty chunk of body copy:
http://utwired.engr.utexas.edu/cone/flash/sifr_03.htm
I believe the slow load time is based on the amount of text being rendered. More text = more load time. Just something to keep in mind.
Great work. Like others, this new approach made me finally jump on the bandwagon. I really could use it for a current project where the client needs the headline text non-GIF’ed for maintenance and for search engine ranking. However, the design screams for the same elegant script font from their logo. sIFR to the rescue!!!
Oops…
Problem: It looks great in Mozilla. However, it fails to work on my pages in IE. 6.0. It seems IE has a problem in the JavaScript in function TJ_replaceElement with the While(count) loop. It errors out on the following line:
e = elems[i];
The error message says: The object doesn’t support this property or method.
Then I get my 6 pods of content with no headlines.
Take a look at the following
LINK to see for yourself. I’ve stripped the page down added everything into the html for easy reference.
Has anyone came across a similar error? Any Ideas? Unfort. I don’t even pretend to know JavaScript. (sorry just the designer).
-David
By changing this line:
to:
I was able to fix my alignment issue. Not a big deal, really, but I personally think this could be the default. :)
Ok, ran into an issue putting this in place on our site.
1) the font is shrinking to smaller than the HTML font was. seems there is some sort of padding on the flash file. Difference is about 2pt sizes.
2) how could I add a drop shadow to this? I want jsut the headline to have a drop shadow.
Thanks guys.
—
Todd
Just create another layer underneath the text layer that gets the same variable as the normal headline. The shadow-effect is something you can probably figure out yourself, I hope.
Jeff to make that text uppercase in Flash just change line 53 to:
Todd, try playing with the line-height in the CSS for the element that is being replaced. Increasing the line-height will increase that elements offsetHeight and might give the Flash text more room to breath.
In response to Opera issues: i did a little bit of testing, and it seems that Opera 7.x works fine with it, BUT only if you set your preferences such that the User Agent string it’s sending is correct. Go to Quick Preferences and select “Identify as Opera” — it WILL NOT WORK if it’s set to a different “Identify” setting!
Justin Cone: Is the slow loading on your example due to the inefficient scale finding algorithm? It feels to me to be the logical case. See my comment #85 for a faster algo.
Anders and Justin,
Even with the “decrement by one” loop that is currently being used, the scaling time is negligible. To shrink from 96 points down to 24 points takes almost exactly 1/10th of one second. Not a material amount of time.
Justin is correct in that the longer the page, the longer the replacement will take to occur. The entire page must load before the magic happens.
Now, I didn’t test this, but this simple change should speed up the font size fit (replace the while loop with these three loops):
while (Number(holder.txtF.maxscroll) != 1 || holder.txtF.textHeight > orig_height) {
textsize = textsize – 10;
fmt.size = textsize;
holder.txtF.setTextFormat(fmt);
}
while (Number(holder.txtF.maxscroll) != 1 || holder.txtF.textHeight orig_height) {
textsize = textsize – 1;
fmt.size = textsize;
holder.txtF.setTextFormat(fmt);
}
Seth,
Interesting points you’ve made on the philosophy of web design, especially in observing that it is simultaneously the “most advanced” and the “least mature” expressive medium. However, this is precisely why it rightly evokes comparison to print design. In its youth, it is rife with possibility, and designers have an obligation to explore them as deeply as they are motivated.
You say it is “unfair” to the web to be compared to print, as if the mere act of comparison might limit the possibilities of web design’s growth. I find such a mindset troubling and ultimately counterproductive. If we were designers of technology, we’d have web design do all that print design could do, and more. The evolution of the web is not, as you have suggested, analogous to the evolution of a child (“evolution” used loosely). To suggest that the web be capable of emulating print does not hinder its growth, or introduce deep-seated psychological problems–it makes it better. Web design does not engage in sibling rivalry; nor does it pout when it cannot have its way. You get the point. There is no criticism of art design when it is expanded to expression in oil, or found art, or airbrush. The quality of a medium is directly proportional to its flexibility.
Further, the web should be capable of doing what print does. After all, they serve similar purposes, and the web has proven capable of supplanting many of print’s goals, such as the conveyance of information, reach, and availability. That the web also offers other features, such as interactivity, or fluidity, does not imply those are more important, or more deserving of design time. That print introduces inherent “limitations” such as full layout and typographic control does not mean the web will inherit them, even in its attempt at emulation. And who’s to say they’re limitations? When web sites are designed both with full control and without, side by side, the users will decide which one they wish to use. Art and design illustrate democracy and evolution at their best. The losers, the bad designs, fail to receive attention, and are weeded out naturally. Who are you to guide the evolution of design? Aren’t you failing to adhere to your own advice? The sage, in your cite, said:
Greatness and individuality are achieved by imitation first, and inspiration second (or perhaps exploration first, imitation second, and inspiration third), and web design is no exception. However much of a misnomer it may be to say “let’s push the boundaries of web design and offer 50 times more typographical control to the designer” since, perhaps, the boundaries were somewhat artificial in the first place, it cannot be a bad thing in any sense. Not even in a “simpler is better” sense. There is no room for such a philosophy where artists are finding ways to express themselves creatively.
Now, off-topic.
You can disagree with a question just fine. If the question is intended, semantically, as an assertion, then it is perfectly valid (and usually warranted, because a question manipulated with rhetorical tricks can be an insidious sneak) to challenge its very utterance. Simply wording a sentence with “I wonder” and putting a question mark at its end does not absolve it of suspicion. When you said
you did assert that a “purist-minded approach” was perhaps better. And I can, and will, disagree with it, because the Dao is a great way to achieve peace of mind and live one’s life, but it’s not so hot on innovation.
Wow, I am SO happy to discover that this technique has been perfected by you gents. Thanks so much!
Echoing Josh’s comment (#50), I’m trying to get the text to center as well. It seemed obvious to insert line 48 into the FLA :
But it doesn’t work. Has anyone tackled this yet ? Thanks again for the excellent tool.
Glenn:
Find the lines where the “fmt.” declarations are.
Insert this line and the text will be centered:
fmt.align = “center”;
Love the technique and the results look fantastic.
Not ever having used Flash before, what application does one use to open and edit the .FLA file?
Thanks!
Jeff Croft: “I get both replacements on every h2, wether or not it has the “replace” class. I would have expected to get the second replacement on classless h2’s, and the first on h2s with class=”replace”. Again, not a big deal…just threw me for a loop.”
That was a bug in my code, thanks for finding it for me. I’ve fixed it, and one other I found, and sent it to Mike. Make sure you upgrade to the next version when it comes out.
David W: “The error message says: The object doesn’t support this property or method.”
I believe you are running an older version, the one with the “i–” statement commented out. Try upgrading to the newest version.
John (#126): You’ll need Flash MX or Flash MX 2004 to edit the.fla file used in sIFR.
Hey guys.
Does anyone knows how I setup the textfield to embed latin punctuation?
I’m trying to figure out ’cause I need to write in portuguese.
Tomas-
Great! Can’t wait for the next version. :)
Keep up the great work, guys!
Sigh. This means that this trick will not be accible for most blind users, as they tend to use a regular browser with a screen reader that reads the rendered page, not the source code (while Flash is installed by default and JavaScript must be enabled for most sites to work).
I am not a Flash person, but I do know that it does have some accessability options- is it possible to take advantage of them so the “real world” blind could still read the site?
Xslf,
The screenreader issue is addressed in the latest (unreleased) build by not setting the browser text to “display: none” and instead positioning it offstage. This should take care of the issue.
That, and many more improvements are close at hand.
A long shot I think, but…
I only have access to Flash 5 (am I the last one on the planet?) – could the fla file be back ported or are there some MX specific techniques at work? (the file opens in v5, but it is empty)
Top notch work Mike!
Won’t work in flash 5.. it requires flash 6 player which you need mx/mx04 to publish to..
This does not work with multiple classes. i.e.:
<h1 class=”title replace”>Hello</h1>
TJ_replaceElement(‘h1.replace’,’sIFR.swf’,”,”,’#000000′,’#FFFFFF’,”);
cheers! nice script you guys got going there.. one small question tho; i cant get this script to work if you feed the page as application/xhtml+xml, which i see as vital in this xhtml world :)
Noah, I’m not exactly sure if I’m understanding you correctly, but if you want to use the script with multiple tags, simply call TJ_replaceElement again, like so:
TJ_replaceElement(‘h1.replace’,’sIFR.swf’,”,”,’#000000′,’#FFFFFF’,”);
TJ_replaceElement(‘h2.replace’,’sIFR.swf’,”,”,’#000000′,’#FFFFFF’,”);
TJ_replaceElement(‘p.replace’,’sIFR.swf’,”,”,’#000000′,’#FFFFFF’,”);
no, i mean if an element is defined with multiple classes, like the example I gave. an HTML element can have more than one class assigned if it has spaces between the names in the class attribute. The problem is that element.className returnes this as a full string — you must treat className as a potential array of class names seperated by ” “s. Right now if I try to replace “h1.replace” when the tag is <h1 class=”title replace”> the current code does this comparison: “replace” == “title replace”. h1.replace as a true CSS selector will match that tag, but the way it is implemented in the sIFR javascript it will not.
Ah, I see. I guess I’ve never used CSS that way, so it hasn’t come up.
At the risk of going off on a CSS tangent, declaring multiple classes for a single html element isn’t really good practice. Using the same logic, you could just as easily nest spans, which is also regarded as “bad” practice.
Why? Because when you combine classes in these ways you set up dependencies that can get hard to keep track of on larger, more complex pages. Changing one value in a style might adversely affect dozens of elements in unforeseen ways.
I don’t know. I guess I’m just being a stickler, which really isn’t my nature. Hell, the first thing I did with this sIFR stuff is figure out how to apply it to every line of text I’ve ever created in HTML. That’s not exactly standards-compliant thinking. :-)
can’t work with portuguese caracters. and doesn’t work with á óò all the accents.
what can i do??? i really like this thing but i cant use it without accents
Wow…. it’s works great…. Truly special… you and Shawn!!!!!!!!
sIFR + Blogspot: Rock n Roll, thanks for the great script!
Bug Found:
I wont work with spanish “acentos”.
For expamle: Esdrújula will render only Esdr and will crop the rest of the text.
Any solution to this? please emailme
how can i get links to work????
i tried
name
doesn’t work.
help needed. post it here please or mail it to me
how can i get links to work????
i tried
‘‘
doesn’t work.
help needed. post it here please or mail it to me
I’ve just managed to integrate this script into a build of the Mambo open source cms system, seen as a live site through this link.
First, the good news : It renders perfectly on IE and Firefox. There remains minimal server hit and it adapts to the text nicely.
The bad news: Opera 7.54 on Windows still seems to degrade it back to text, even with Javascript enabled.
Any suggestions as to why Opera is still acting up?
Great work! but…
i´m having the same problem with special characters, wich are not rendered. Seems like Flash doesn´t export these characters (can see in Output window, that shows only the non-latin characters).
How do i setup Flash to embed these characters when publishing the movie?
Absalom – I had a go at installing it in my mambo site but for reasons not relevant to this thread I had some concerns (they were about Mambo’s front end and what happens to content headlines when they insert the .swf…) Have a look here.
Mike – I think this is brilliant, and am definitely going to be using it down the road…
Mike-
It’s great…so much better than the previous version (which was already the best thing since sliced bread). Very flexible! I’m impressed.
Is there a variable I can send through the flashVars attribute to make the text all uppercase or all lowercase?
Thanks for all you’ve done on this,
Jeff
Crap…please ignore that comment. i meant to post it on the new siFR 2.0b page. Grrr. :)
Re: multiple classes–well, that’s the point, ain’t it? Just because you don’t do it in your own code shouldn’t keep you from enabling it in your code, especially when multiple class definitions are part of the CSS specification. Anyway, I will certainly be modifying my own installations, but I thought you might want to add it to the source. (Geez, that sounded a bit Matrix-y.)
BUG!!!
Houston, we have a problem:
What if my title looks like this:
<h1>El niño</h1>
or…
<h1>El niño</h1>
it doesnt work!!
BUG!!!
Houston, we have a problem:
What if my title looks like this:
El niño
or…
El niño
it doesnt work!!
(sorry for the repost, i thought it was like previewed…)
I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.
Possible way to do the headers for gradebook?
sIFR: The Healthy Alternative to Browser Text
Mike Davidson introduces sIFR – Finally, I may be able to use the method!
Mike Davidson: Introducing sIFR: The Healthy Alternative to Browser Text
sIFR: The Healthy Alternative to Browser Text — Flash generated rich text typography as an alternative to srandard browser text… pretty cool. I wonder how long it’ll be before some one turns this into a WordPress plugin
Flash Text Replacement
https://mikeindustries.com/blog/archive/2004/08/sifr…
Getting Custom Typography With Flash
Mike Davidson has released a scalable, multiline, Flash 6 compatible version of IFR (image font replacement)….
Davidson SWF text
Davidson SWF text: Mike Davidson does dynamic replacement of HTML display text with SWF text… I haven’t absorbed it all yet (it’s multiple screens and I’m in a phone meeting while typing), but note that he mentions “custom fonts” as…
elegant and attractive use of flash for headlines
https://mikeindustries.com/blog/archive/2004/08/sifr…
Saving the World from the scourge of Arial.
Mike Davidson releases sIFR: The Healthy Alternative to Browser Text. First we had IFR, then WAC-FR, now sIFR. And it looks GREAT. For those who don’t know, any of the IFR techniques uses Flash to replace text, in the font…
Why Image Replacement Techniques May Not Be a Good Thing ™
Image replacement tichniques seem to be all the rage these days. The latest technique is getting a lot of press (er, blogging). But there are still cases where it’s a problem.
The Healthy Alternative to Browser Text
Mike Davidson: Introducing sIFR: The Healthy Alternative to Browser Text…
The Healthy Alternative to Browser Text
In what some believe to be as trememndous as the creation of the Web browser itself, sIFR has been released. Designed to take font/text to the next level. On the surface, it look a lot like a typical image of…
Web News
And another round of web news! Woman Chows 38 Lobsters in Eating Contest Jibjab “This Land Is Your Land” parody wins legal battle sIFR – dynamic browser text replacement MovableType 3.1 released The Giants of Anime are coming Tarantino̵…
MT 3.1 and sIFR
Movable Type 3.1 came out today. Why am I so excited? Well, the biggest drawback you’d hear from all those sell-outs is that the pages aren’t dynamic like those alternatives Nucleus and WordPress. With this latest release you get the…
More Davidson SWF text
More Davidson SWF text: Mike Davidson picked up over 120 comments and 50 links on his work with creating a parameterizable SWF for HTML specification of designer text… amazing feedback and interest. He hopes to have a final version very…
The next level of image replacement
Like many standards-happy web folk, I have discovered the joys of image replacement. What is image replacement in web standards-speak? Simply put, the goal of writing to web standards is to separate content from presentation. It is not not not…
Scalable Inman Flash Replacement: brilliant
https://mikeindustries.com/blog/archive/2004/08/sifr…
Image Replacement
Some thoughts on various image replace ment techniques.
http://www.sixdifferentways.com/remainder/007569.php
Introducing sIFR: The Healthy Alternative to Browser Text…
http://www.sixdifferentways.com/remainder/007568.php
Introducing sIFR: The Healthy Alternative to Browser Text…
sIFR
Mike Davidson shows us how to replace text with Flash. Why? So you can use any font you want. And, you can still select and copy the text. And, you can still click links. And, it degrades just fine in…
Layout Dilemmas, Part 2
I tinkered some more with the layout I mentioned in yesterday’s entry. (And, mea culpa, I neglected to link to the new layout in question!) I fixed the centering issue, though it still clings hopelessy to the left in IE/Win. I didn’t get to playing wit…
fonte-maravilha
o sonho de qualquer webdesigner (e já agora de qualquer webprogrammer) usar a fonte que se quer sem ter que se preocupar com o facto de o utilizador a ter instalada no sistema. ainda não testei mas está na minha…
Introducing sIFR: The Healthy Alternative to Browser Text
Mike Davidson: sIFR 2.0b: Come Kick the Tires. Hier is waarom….
Vakker tekst, i Flash
Det finnes utrolig mange .gif rundt om kring hvis eneste formål er å gjengi “pen” tekst, slik at den ser ut som i Photoshop. Hørte jeg “vanskeligheter” med oppdatering? Nå finnes det en Flash-løsning, som gir pene, myke bokstaver. Om…
Hicksdesign Redesign
“Jon Hicks”:http://www.hicksdesign.co.uk/journal/ has “implemented a redesign”:http://www.hicksdesign.co.uk/journal/597/its-not-quite-finished of his blog, powered by “Textpattern”:http://textpattern.com/. I really enjoy his designs and mastery o…
sIFR Thoughts
I’m implementing sIFR on a website I’m working on (very “under construction”). It was interesting to read mezzoblue’s thoughts about…
¹ØÓÚ sifr µÄÌÖÂÛ
sIFR ÊÇÒ»ÏîÖ¼ÔÚÌæ»» Flash µÄ¼¼Êõ£¬ÏÖÔÚÌÖÂÛºÜÈÈÃÅ¡£
sIFR – scaling Inman Flash Replacing
Mit einem JavaScript-Trick kann man HTML-Text durch gleichgro
SIFR
sIFR for Anti-Aliased Browser Text
Metafilter reports (and discusses) Mike Davidson’s sIFR, a public-domain Flash component that lets web designers anti-alias browser text in any font. There are some drawbacks to sIFR: it doesn’t work on clickable text links and normal copy/paste functi…
Write it 100 Times on the Blackboard
The Web Is Not A Design Medium.
The Web Is Not A Design Medium.
The Web Is Not A Design Medium.
The Web I…
sIFR – tipografija masÄ—ms
Ä®raÅ¡as apie Scalable Inman Flash Replacement (sIFR) gal bus labiau naudingas tinklapių dizaineriams ir programuotojams, bet Å¡io to įdomaus atsiras ir bet kuriam skaitanÄiam ir Å¡iek tiek besidominÄiam dizainu. “Scalable Inman Flash Replacem…
A Long Vacation
I keep waiting for my flight back home because Portland has to be temporary, right? This is all some crazy dream and I’m going to wake up any second. This cannot be real.
Stalled but Advancing
So yeah, midterms have removed the need for this project for a while. It’s still available for use, and I have been doing a few things to it. For one, I finally implemented sIFR, which makes my layout even better….
Web typography still sucks.
Let’s say I had a simple objective: let’s say I wanted to choose a screen-friendly sans serif typeface with a true italic for my blog. I think serif fonts inevitably look like crud on screen at all but the largest…
Six Apart Redesigns
Blog tool developers Six Apart launched a new site last night designed by Mule Design. It’s a great example of…
sIFR
I don’t fully (read: at all) understand the underlying technology, but given my interest in good design, I can’t help but feel that sIFR (Scalable Inman Flash Replacement) represents a big step forward for the online experience by offering an
daily ephemera
Continuing my new lazy habit of just listing my daily reading highlights as bullet points, rather than fleshed-out separate entries…
Reemplazo de textos – una comparación
Como diseñadores, la web siempre ha sido bastante limitada en cuanto a opciones tipográficas. Sobre todo para aquellos que vienen del mundo impreso, es difícil conformarse con Verdana, Arial, Helvetica y Times New Roman. Hay muchas técnicas para reempl…
IE7 Could Change Everything
Reemplazando texto con sIFR
Mucha gente ha comentado sobre este tema, pero bien, sabemos que es realmente sIFR? El sIFR ( scalable Inman Flash Replacement) es una técnica que combina Flash, CSS y javascript para reemplazar la tipografía de un bloque de texto por…
Image Replacement
Some thoughts on various image replacement techniques.
sIFR: Scalable Inman Flash Replacement
First there was this: Dynamic Text Replacement using PHP.
Scalable Inman Flash Replacement
Neue
This site had been bugging me for the past couple of months, it had rapidly evolved past it’s original design.
In fact, the sudden appearance of visitors beyond people who I thought would find something interesting had me a bit worried that the
ABC sIFR
ABC sIFR: I just noticed that ABCNews.com is displaying headlines in SWF… Mike Davidson has more info on this whole approach….
Netscape 8 and sIFR
First off, who beat Netscape 8 with the ugly stick? It’s the most horrendously designed application I’ve seen in a…
Vakker tekst, i Flash
Det finnes utrolig mange .gif rundt om kring hvis eneste formål er å gjengi “pen” tekst, slik at den ser ut som i Photoshop. Hørte jeg “vanskeligheter” med oppdatering? Nå finnes det en Flash-løsning, som gir pene, myke bokstaver. Om…
Rich Accessible Typography
sIFR ovvero Scalable Inman Flash Replacement è un nuovo approccio al design di siti Web che sfrutta gli standard più volte citati e sempre presenti nei più attuali siti Internet. Il vantaggio pratico di questa tecnologia è quello di permettere
[…] Mike Davidson – Introducing sIFR: The Healthy Alternative to Browser Text (tags: css) […]
[…] you are interested in sIFR, a good place to start is the blog page Introducing sIFR: The Healthy Alternative to Browser Text. Its main disadvantage as a tool is that it relies on the visitor’s having installed the […]
[…] main distraction has been steady client work. Anyhow – in the meantime, I apologize for my tiresome SiFR […]
[…] with without CSS for those headlines with funny fonts – use sIFR to replace your text with a Flash image of the text. Neat, although you’d need to be a bit of […]
[…] Cualquiera que haya seguido el desarrollo de sIFR en los últimos meses conocerá la mayorÃa de lo que voy a contar, pero dado que este es el anuncio oficial de sIFR 2.0, a continuación se presenta una vista general de la tecnologÃa utilizada. De cualquier forma, eres libre de leer la perspectiva histórica completa en mi post original: Introducing sIFR: The Healthy Alternative to Browser Text. […]
[…] https://mikeindustries.com/blog/archive/2004/08/sifr […]