November 21, 2004

• So I guess luddite web surfers like me will have to finally get flash plug-ins if everyone starts using this?
• Neat, but kinda leaves Linux/Unix/BSD users in the dust as the flash plugin isn't the greatest. Also, at least in Linux, highlighting the text in these flash thingamajigers takes forever.
• Has Flash fixed its accessibility problems? Last I can recall, the visually impaired and blind still have a difficult time with Flash.
• Actually, loto and Metal Monkey, the reason this is interesting at all is that it degrades somewhat elegantly. I was just on the sample page in Firefox with no flash installed and it silently replaced the flash text with (ugly) html text. I believe this implies that it's fairly accessible, too, though I can't really speak with authority on that. Myself, I'm suspicious of Flash, and I don't think it should be used for anything but multimedia where there really is no substitute.
• Sample page here.
• Embedded fonts are something to continue to shoot for, but I must agree with the balking at a Flash solution. Just seems to much like a kludge to me. Something like MS's WEFT, but cross platform, would be the solution. Just a in the head of the webpage to a font file, ala javascript and css files is the ultimate answer. Problem is then you have a ton of sites under the gun from the foundries for unlicensed, often overpriced fonts, and we are back to Arial, Verdana, Times and Georgia all over the place again.
• Well, it works (Linux 2.4, Firefox 1.0, Flash Player 7), but the headlines took quite a while to load. I also have the slowness that loto mentioned. They did do a good job of getting around my FlashBlock extension, which I'm kind of ambivalent about. The results look okay, though. If this used something other than Flash, I'd be a bit more enthusiastic.
• Yeah, I know... I'm probably one of the most anti-FLASH people on the planet, but using it to embed and dynamically create headlines from straight HTML headline text is AWESOME. The page looks on screen like a PDF, with all of the typography choices showing. The only way to do this before would have been to make 6 separate gifs for the various headlines. This would have required 6 separate ALT tags for text reader compatability and search engine indexing. Now, ZERO graphics to produce and you need ZERO ALT tags, because the text is still there in the source, marked up with the appropriate H tag. People without Flash or JavaScript on will see the page rendered in the normal text. This is quite easy to implement! 1) Download the files and open the sifr.fla file in Flash 2) Open the Library item and change the font to anything on your system. 3) Export it as a flash movie, named appropriately (garamond.swf, for example) I created 18 of them in a matter of minutes. 4) Put the sifr.js, index.html, and whatever flash font movie files (that you just created) you will use on the web server (all in the same folder, unless you want to change paths) 5) Edit the code at the bottom of the index.html files using the font movie names that you wish to use. Best part is that it doesn't affect text readers or search engines (they just read the html headline text) and if you have javascript turned off, or no Flash - you don't miss out on any CONTENT, you just don't see the pretty typographical page. And it's pretty darn lightweight. Each of my font.swf files was between 7500 - 13000 bytes. The sifr.js file is only 12K.
• allusion, can you tell me if it loads faster with your FlashBlock OFF? anybody the 12K sifr.js file will be cached by the browser after the first loading. How about the font.swf files? Do they cache or do they have to reload everytime? (I know next to nothing about Flash).
• Calimehtar: Yeah, I just noticed that with lynx, not bad. My other complaint is that it does not resize automatically, but you have to refresh the page to do so. I'm with pivo, too. It definately is too much of a hack. They are cool and functional, but not the best way to do things.
• I'm using Firefox 1.0 with Flahblock on XP, and the sample page loaded instantly for me. But selection speed, and cursor change, all slow as ass. Flash really was the only choice for this. You need a vector format, and svg just doesn't cut it right now for a host of reasons. But it's still annoying.
• This is cool. It also sucks in that people STILL have to be some sort of code monkey to make it happen. What the hell is so wrong with the web that 10 years after it's introduction, we still need kludges like this? i just want to make good looking things without having to jump through code hoops.
• Hey, if you don't want to use it... OK by me! However, this completely addresses the old problem (Pivo) because you aren't sending them the font. You are sending them a Flash movie that uses the font that you bought and paid for on your own system. Surely the type foundries don't expect a royalty for every document you produce with the fonts you purchased from them, do they??? As to the resizing objection, this is also minor (IMHO) because we aren't using the technique for the main text - just headlines). Resize the body text all you want and the page still looks good. Lousy hacks are the ones that you have to make special allowances for every browser-compatibility issue out there. By that definition, this is a FINE hack (as in workaround). Select all of the text on your pages and then paste it into a text editor. If you use images for your special typography you've just lost them. Now try it with sIFR. It works. Only minor quibble I have is that using a headline as an href works, but you don't get the visual confirmation of the destination URL in the Status Bar. That's the most significant issue I've seen thus far, and I can live with it.
• Alex Reynolds that is the other beauty of sIFR! Disability readers will read the text between the headline tags. Only browsers with javascript turned on and the flash plug-in will swap out the plain text for the dynamic flash movie. That is one of the beauties of the system. It degrades gracefully and doesn't affect text readers, non-graphical browsers (Lynx), or search engine bots.
• I looked through the code, but couldn't find any way to pass to the Flash applet values for tracking/kerning or leading... did I miss something?
• I think I should also point out that calimehtar's example (above) is done with sIFR version 1.1.3. The two examples I link to in the original post are Version 2.0 RC1. (Just so we are comparing apples to apples).
• mecurious: Can't remember how to do that. It doesn't show up in the extensions for some reason, and I have vague recollections installing it by hand back in a buggier version of Firefox. Right now I've got a little too much influenza to want to be mucking about in Firefox as root. However, when I went back, the sample page loaded instantly, so I suppose it was just my slow old modem. Loading time was comparable to loading image files for headings. Hmmm. Okay, the FlashBlock did block the examples on your two example pages, but not calimehtar's. There also seems to be a loss of hinting, so some of the letters are pretty blurry.
• Why sIFR Matters sIFR Implementation (I recommend reading through all of the comments on those blogs for a full discussion). One thing we haven't mentioned is the huge bandwidth savings over using images for the equiv. purpose. chrominance: I've seen the kerning questions come up a couple of times but not answered in any discussion that I have seen yet. It will be interesting also to see if there can be any enhancements to sIFR when the new version of Flash is released. Some people are getting excited about what it will offer
• ok, i read through Why sIFR Matters and sIFR Implementation and i've changed my mind. sIFR is great in the short term, but awful in the long term as it's designed now. we shouldn't have to use hacks like this to get that one special font we use. the ugly truth is that the web wasn't designed for great typography. the web could learn a lot from print, ala postscript.
• This is interesting. However, I always hoped that Truedoc Dynamic Fonts would take off. Since, that seems dead in the water, this is a nice, non-proprietary solution.
• Mecurious -- thanks for the link. The more I read about this, the more I am interested in evaluating it further. Cheers...
• Don't I need a $400 copy of Flash? Not really an attractive solution.
• Also, you know that with IE at least, you can, um, "embed" typfaces (a subset) in the markup that will automatically dl and install, if you go to all the trouble to do it right. You have to use an MS tool to make the downloadable file, I think, and of course you have to have the rights to distribute the typeface.
• Nooooo! I'm crying here guys: please leave the Flash out when possible! Maybe Flash is great and stable in Windows/IE, but it has caused me nothing but problems and heartache in OSX/Linux. If my browser crashes, it is almost always on a flash page -- in fact, it happened while I was reading the article. My offense? I right clicked on one of the eternally damned objects. Could it be the browser? Yessss[*], but I'm more inclined to blame Macromedia for writing a crappy plugin. Not to mention that they seem to have no interest in writing an optimized version for any platform other than Windows. I'm on a 1.25 GHz PowerBook, and Flash still always seems sluggish and clunky. The major problem is that graphics artists are relying on a proprietary, closed source, third party solution to satisfy their control problem. Sure, it may work perfect in Windows, but if Macromedia decides to let Linux or Mac support lag, then once again my browser experience is destined to suck simply because they couldn't work with the W3C or Mozilla team. Not that I'm saying either organization is lacking in responsibility. They don't seem to consult graphics artists or actual users when designing their specs. Otherwise we would have a nice, standardized, cross-platform solution to this problem. Designers are just going to have to realize that the web is not print media at the moment, and that they can't control every last aspect of the user's experience. Eventually, their concerns can be brought to the forefront, but at the moment using some extremely hackish code is not a good solution. It makes people lazy and complacent, and they start to settle for crap instead of pushing a more elegant solution. I mean, honestly, is it that important that your webpage be rendered in the single approved font at the single approved size? Isn't the content the goal? Do we really need to ecourage the Macromedia-ization of the web any more than it already is? [* say this in a Londo Molari voice if possible]
• If you combine this with S5, the CSS Slide Show System you can make some really cool stuff and still have it be at least legible on older browsers. Interesting...
• rolypolyman: You need a copy of Flash to make the Flash font movie from fonts on your own system. I don't know why you couldn't just download them from somebody else though. Try to right-click and download this: http://144.216.3.222/sifr/sifr_futura.swf. If that works, expect to see lots of people making them available. Also, to those of you who don't want to pay $400 for a copy of Flash, I recommend signing up at your local Community College or other higher ed institution. Costs next to nothing to enroll at most places. That gives you Academic status. Now you can pay $99 for Flash or $250 for the whole Macromedia Suite (Dreamweaver, Fireworks, Flash, Coldfusion Developer). Your library card to the institution is worth more than what you paid for admission (even if you never take a single class). Teachers and High School students qualify for the academic pricing, too. kmellis: I'm an anti-microsoft/IE kinda guy. There is no way in h-e-double-toothpicks I'm gonna do a WIN-IE-only solution. sbutler: I'm a Mac OS X (and Linux SERVER) guy, so I'm not entirely unsympathetic to your rant. I have not used Flash AT ALL in any of my own projects. But this is not a Flash movie with animation and ActionScript and all that. This is a stinking 12K font file exported as a .swf (does clicking on the link to that font file earlier in this message crash your browser? If not, sIFR (alone) is not worthy of your fears.
• does clicking on the link to that font file earlier in this message crash your browser? If not, sIFR (alone) is not worthy of your fears. To be fair, I was right clicking on the animation of how it worked, and not an actual sIFR. When I loaded up just the bare bones version, I couldn't get it to crash. I also did some usability tests with the three browsers I have available: Safari, Firefox, and Camino (my prefered). In Safari and Firefox I could highlight and copy text from within the sIRF, but I couldn't get Camino to copy for the life of me. And if you hit OpenApple+A on the example page in Firefox and Camino you can copy all the text, but Safari skips the Flash objects in this case (could the Gecko versions be reading the hidden content?). And Flash seems to use its own highlighting system. I can actually highlight over and copy one of these things without seeing its text highlighted. I'm worried that it won't just stay a simple font embeded inside a swf. Before too long someone is going to add a marque, and sinisoidal waves, and blinking, and color changing, and turn it into one of those dreaded banner applets that were epidemic when Java entered the scene. Don't get me wrong, it is a cool hack. But I'd much rather see an elegant solution to the problem -- one that lets my native type system do what it does best.
• There is no way in h-e-double-toothpicks I'm gonna do a WIN-IE-only solution. Well, sure, I agree. But the Win/IE segment of the market is the very largest, the largest actually, and so you can (partly, imperfectly) satisfy this need for that group. I'm not ideological or have a horse in the OS wars, I'm just pragmatic. But surely you can assume better typographic support on Macs anyway and as long as you're not overly ambitious, you could get the overwhelming majority with a combination of methods. I, too, have a really bad feeling about Flash. I'm saying the obvious here, but HTML was never supposed to be a layout markup language. Obviously, from the very beginning, that's what web developers and users have wanted, and so we have XML and XSL and stuff so that we're increasingly getting better context markup support and better layout support, too. I don't keep up with this stuff any more, but I'd be real surprised if there isn't on the drawing board at W3C and the like for a much better generalized solution to this problem. Eagerly embracing a propietary, company specific kludge is just more of the same crap that we've had to deal with from MS and doesn't seem at all the right way to go, IMO.
• My little address bar claims that I am at MonkeyFilter, but the stuff on my screen would seem to indicate that I am really at NerdFilter.
• Nerd fight! Nerd fight!
• The major problem is that graphics artists are relying on a proprietary, closed source, third party solution to satisfy their control problem. Not entirely true; the swf format specs are open and available (for $0, if not free,) and API code is also available. See http://www.openswf.org/ for technical detail and also an O'Reilly overview.
• Dang. Those are two good articles. Thanks zealot. There are standards and there are things that become standards. From the O'Reilly article: Over the years, the Macromedia Flash (SWF) File Format, as it is officially called by Macromedia, has become the de facto standard for vector graphics on the Web. It has its weaknesses, but it will be very difficult for other file formats to overturn it. and Flash is often confused [with] SWF. This is a mistake because they're not the same thing. In the broadest sense, Flash is a complete solution: the authoring environment, the content delivery format, and the plug-in that plays the content back. SWF is only a small part of that solution; it's the file format in which content created with the Flash authoring tool is distributed. It is important to note that sIFR simply uses the .swf file format to export a font file from your system that can then be used to recreate that font using the Flash plug-in on the user's system. I hear what you're saying about this going beyond what the web has been (so far) designed to do, but making a tool do something not intended by the original maker is (sort of) what separates us from the animals.(apologies to any monkeys who are insulted by that last statement) sbutler: I hear you on the text selection issue. It's mentioned in the "Limitations" section of the first link. However, compared to your previous option of making a GRAPHIC of the font you wanted to use (which few complain about) this is an improvement. You can't select the text in a graphic AT ALL. You may also be correct in your fears of people doing more annoying things with the Flash, but I don't think so. Part of the reason that this works is that it is so lightweight. If you start loading up each .swf file that page is gonna take a looooong time to load and that is ONE issue to which web page designers are still pretty sensitive. As to the NerdFilter charge: Guilty. Partly why I posted on a weekend though. MoFi seems to go into hibernation over the weekend so I thought I'd throw this out there. NerdFilter might be a better place for this story to go if they had anybody commenting on any of their stories. Unfortunately, I'm not a nerd's nerd. I know just enough programming to be dangerous. I never write anything from scratch. I modify existing stuff for the most part because I don't have time to "reinvent the wheel". Something has to be pretty easy to grok for me to fully grasp it. That's also one of the reasons I like sIFR. Do I understand the whole sIFR.js file? No. But I see what it is doing. I get that I'm using normal h tags for my headings and it is getting switched out by the CSS/javascript combo. I am pretty good at seeing the possibilities and implications of things. I'm still convinced that this is a major step in giving us a practical way to do something we haven't been able to do before. There aren't many things that turn me positively evangelical and this is one of them. Trés cool.
• Thanks mecurious for the good info.
• Ha. While you're detecting for Flash 6 to show your fonts, try logging Flash and non-Flash users to see how much of your time you are wasting. Don't believe the official stats. Log your own. It will open your eyes.
• mecurious, this has been a decent thread, and I'm glad to see it. Believe it or not, some of us are nerds here too. :)
• Well, if anything, sIFR will hopefully inspire someone to write a real solution to this problem, without the thirdparty software and fugly kludge. That is the wonder of the internet, people see something and immediately think that they can do better. Some of them actually can, too.
• However, compared to your previous option of making a GRAPHIC of the font you wanted to use (which few complain about) this is an improvement. You can't select the text in a graphic AT ALL. I don't like the graphic option either; I'd rather it just be text. I can accept it a little that corps/univ/etc want to use their custom, age old font to enhancing their branding. But why not just in the page header, where you can create possibly one graphic for the whole damn thing, or maybe a graphic per division? Does the branding really have to extend to every topic heading inside the page itself? And that seems to be where this sIFR stuff is headed. I don't particularly care to load a page like MoFi with 30 embeded SWF's because someone decided the "posted by" line needed to be in Monotype Corsiva.

• The major problem is that graphics artists are relying on a proprietary, closed source, third party solution to satisfy their control problem.

  Not entirely true; the swf format specs are open and available (for $0, if not free,) and API code is also available. See http://www.openswf.org/ for technical detail and also an O'Reilly overview. That's an improvement. But until someone writes a browser plugin that is at least as stable and functional as Flash, I'm still going to call it a proprietary, third party, closed source solution.
• Just a related note regarding Microsoft's Web Embeded Font Tool from quasimondo.com 1. It only works on IE/PC. 2. Microsoft clearly isn't supporting it anymore. 3. It only looks good on XP with ClearType turned on. I don't know about you but I can't stand ClearType. Unlike OS X's anti-aliasing, I find it actually makes normal body copy look worse. WEFT would be fabulous if it worked better and in other browsers, but it appears dead-in-the-water at this point. Yeah... what he said.
• I don't know about you but I can't stand ClearType. I've never heard anyone complain about cleartype before. I cannot imagine living without it now. Sure the guy is using an LCD monitor (duh) and has it properly calibrated?
• ...does the author realize that cleartype isn't the same as regular antialiasing and MS has its own antialiasing anyway? CT uses LCD color subpixels in a way that can't be done on CRTs.
• mecurious: As to the resizing objection, this is also minor (IMHO) because we aren't using the technique for the main text - just headlines). Resize the body text all you want and the page still looks good. Right. Like any control freak graphic artist is going to be able to resist applying their multiple fonts du jour to entire pages once we give them the tools to do so.
• OK, I'm a font Luddite*, but I'm really impressed with how well this works based on what I've seen so far (FireFox 1.0PR, Win2K). I'd like to try it on other browsers/OSes but I don't have access to any at the moment. sIFR comes pretty close to transparent; cut and paste work almost as expected (but search does not). It degrades nicely (although I don't have FlashBlock installed here so can't test that). I'm having a little trouble with focus not behaving as expected (e.g. tab doesn't tab correctly). It bodes well for sIFR if someone like me who cares so little about typography and cares so little for Flash isn't immediately turned off by it. Very cool *When I'm elected emperor there will be by decree only three fonts: Imperial Serif, Imperial Sans Serif, and Imperial Fixed Width. Anyone who violates this decree will be limited to using, for the remainders of their lives, a fourth font: Imperial Correctional Facility Comic Sans.
• You may be right Mitheral ("once we give them the tools to do so") but sIFR isn't that tool. Yes, I could make all my body text render with sIFR, but my users would lose the ability to control/command-F to find anything within the Flash rendered text. (Ignoring the time-to-render issue). Many graphic artists may be control freaks, but they aren't completely stupid when it comes to the web. And if they are, then they are probably doing full-blown flash interfaces now.
• Just a note that sIFR release candidate 2 is now out (12/05/04).