sIFR 3: A Request for Requests
The excellent new sIFR-licious UW Admissions Site, designed and developed by Mercury Cloud.Now that Flash 7 penetration is well into the 90% range, it’s time to start thinking about version 3 of sIFR. One of the big selling points of sIFR 2 was that it was backwards-compatible with Flash 6, but given the most current Flash adoption numbers, that doesn’t seem necessary anymore.
SO… what The Dutch Wolf and I would like to do is provide a new version of sIFR which offers baseline compatibility with Flash 7 and progressive-enhancement for Flash 8.
We’ve already come up with a few things we’d like to add but are requesting feature requests from designers and developers in order to make sure this new version is as complete as possible. Here’s initial punchlist:
- Ability to display crisper text (especially at small sizes) for people with Flash 8. The Flash 8 Player uses a new anti-aliasing algorithm that now renders Flash text as beautifully as Photoshop does.
- More complete text formatting options using Flash’s CSS support. This includes the ability to color individual spans within a single sIFR file.
- Ability to use (and abuse) Flash 8’s live effects like soft drop shadows behind text.
- On-the-fly resizability of sIFR elements when windows are resized.
- Actionscript 2 syntax.
A major requirement of this release is that it should only take you a minute or two to upgrade any existing sIFR installations, so rest assured that when the new version comes out, it’ll be a snap to install.
Since we’re already talking about sIFR, I wanted to quickly call out some excellent uses of it I’ve seen over the past few months:
- Will Prater and friends over at Mercury Cloud have redesigned the admissions site for my alma-mater, The University of Washington, and it is spectacular. Some of the best use of sIFR I’ve ever seen and just a fabulous site to boot.
- Chevrolet.com now uses sIFR on almost every page on the site thanks to Jim Amos and Campbell-Ewald.
- Khoi Vinh has redesigned The Onion and Paragraph making subtle and disciplined use of sIFR.
- Thanks to Eric Webster and Digitas, the Pontiac.com site uses sIFR for their mastheads. Pontiac.com is a good example of a Flash-heavy site making smart use of the technology.
- I can’t remember who sent me this site (please let me know so I can give you credit) but Propel Fitness Water now makes nice use of sIFR and they even somehow managed to give their sIFR text nice wide kerning. I’d like to know if that required manual editing of font files. Looks very nice.
sIFR also was featured in Print Magazine this month thanks to the excellent Patric King.
So enough of the sIFR lovefest… let’s hear some feature requests!
I might be talking out of my rear end here… but how about the ability to use a background image (tiled) for the fonts instead of a color?
Thinking in photoshop terms, it’s something similar to making the characters a reveal/hide mask for the background?
I would completely understand if this gets too complicated and oversteps the bounds of sIFR; but I am requesting it because I was recently forced to make use of images instead of beautiful sIFR based fonts in a site because the navigation links used a very specific gradient (with more than 2 tones of the same color).
I’m not sure if this is available to SIFR or not, I haven’t really read up too much about it but I would guess that many people would like their headlines “Horizontally” aligned…… How about “Vertically?”.
Just a side-thought I had while pondering aimlessly.
Thanks for the recognition Mike,
Another site we at Mercury Cloud just released that uses sIFR is Howard University’s Rankin Memorial Chapel. In addition to sIFR, we used some pretty tight flash satay to display nice flash headers and nav, but if flash is off for some reason, the CSS version looks just as good below.
I tried to use sIFR to replace a header graphic a while back. I wasn’t able to do it, nor could I find any documentation at the time to help achieve this goal. It’s possible there has been a solution discovered since, but if not, I would like to suggest that be added.
It’s ironic, I suppose, since sIFR is supposed to give that graphic look in a dynamic package.
I have implemented sIFR on a number of occasions and here is what I would like to see:
1. display of transparent background in sIFR that does not show up as a weird green colour in some micro versions of Netscape 7.0 and some Opera browsers.
2. the ability to utilize the print CSS media type and sIFR AND have a transparent background.
3. better text selection abilities.
4. dynamic widths.
5. any chance of making it render faster? The redraw of the page causes a shift unless you use CSS to match the same height of the flash movie. This resulted in VERY LARGE text presentation if flash player is not present as I recall padding and margins of the CSS did not help. (Please contact me if you need a visual explanation.)
6. once the page has rendered and the visitor changed the text-size, ensure that the text inside the flash movie changes accordingly.
7. continue to work with FlashBlock and/or Adblock.
Thanks for this opportunity!
What I noticed with sIFR is that it’s really hard to get the sizes right sometimes in both IE and FF. Any improvements there might help. Although most of those problems come from the tweaking process so maybe it was just the documentation that needed improvements. I know standards are important to follow as far as scalable fonts go but I wouldn’t mind the option to hard code the font sizes.
Gill might be onto something but I can see more problems then it would be worth to allow images to be imported in and masked by the text, especially when the like might end up wrapping. I know that flash had some issues with masks being created and modified dynamically early on and not sure that they fixed it so dynamic text can be used as a mask.
At any rate, it might make sense to add in the ability to import a background image. I can’t think of any time that I would personally use this feature but it would be an alternative to using transparent mode in some cases and is easy enough to pull in images to the swf so it might make a good feature. I have had to lay flash over an existing graphic before and for whatever reason used the image itself as the background of the flash then positioned the movie clip over the image.
Probably best to not get to carried away. Before long you’ll find yourself with an overloaded library of action scipt animations and other things to bloat sIFR. Better to just keep it simple and effective.
I don’t think Flash dynamic text supports it, but it would be nice if there was some way to be able to control kerning of the type.
What about the ability to use vertically aligned text on a website? Although there would be some problems with fallback functionality though. Or is this already possible with sIFR 2.0?
What I’d really appreciate is the possibility to resize the font/size of the element on the fly, when the user changes the font size setting in their respective web browser.
Well, I cam here with four or fives great ideas, and I found they’re all already on the list. If you accomplish what you’ve put on the list so far, I will consider forgiving you for the pathetic trade you offered me in the Fantasy League yesterday. :)
As was mentioned, I’d like background image support, preferably with similar options to CSS (repeat, position, etc).
I’d like to see:
1) More typography controls
A. Kerning/Letter spacing
I know that you can adjust the letter spacing in the flash file, but in an effort to minimize the number of fonts I avoided this. It would be nice if we could adjust kerning from the .js file.
B. Bold, Italic
Although most font faces come with special fonts for bold and italic, it would be nice to specify such attributes from the .js file.
2) More options for padding
For better or worse (still debating) I’ve created pages that scale, everything uses ems. This made sIFR a challenge because padding has to be specified using pixels. As a result I always had to wrap a text object that I wanted to use sIFR on within a div tag, and then apply padding to the div. Is there a way that we could pass along the unit of measurement (e.g. nPaddingUnit=em)?
3) Resize of window resize
You already mentioned it, but resizing the flash when the window resizes would be awesome. It will make sIFR that much more seamless.
I don’t know if it’s now working, or if a workaround was posted, but I’m still getting a CSS-dropdown menu (Suckerfish-esque) appearing behind the sFIR text, no matter the transparency or the z-index. This is difficult, as the navigation is just above the headline. Any help or fixing of this issue would be appreciated.
Rotate
The ability to add shallow angles to the text block(s) being replaced would be useful for mastheads and *punk* paragraph headers… please?
The paragraph headings on the red paper zengarden style illustrates perfectly.
support for flash 8 filters!
Andrew: I’m still getting a CSS-dropdown menu (Suckerfish-esque) appearing behind the sFIR text, no matter the transparency or the z-index
I’m pretty sure the main problem with this comes from ActiveX object support from the web browsers themselves. Although I agree that would be great if controls added to a page could behave more like other objects such as regular divs. There is however ways around this problem. For transparency method to work it needs to be positioned absolute in a div and z-index needs to be set. Also, maybe the iframe hack will work?
In reply to Jim M:
1. that’s a browser problem, unfortunately. However I’d like to know wheter you are seeing those issues with the latest 2.0.1, and if so, in which specific browser versions?
2. Could you clarify?
3. That’s a Flash problem
4. We’ll be able to do this in Flash 8
5. I think I get you. Noted.
6. Unfortunately we won’t be able to do this. There is no “ontextresize” event available. It’ll be possible to write site-specific (well, not included in sIFR) scripts for this, though.
7. We hope so!
In reply to Toby:
2) Alas, sIFR gets its information in pixels. We could also get padding in pixels, but this is not supported by a lot of browsers (Safari 1.2 and below come to mind, as well as some older Opera versions I believe).
So I kinda like this “Dutch Wolf” thingy :) I’ve noted down your comments, and replied to some above. Thanks already!
Variable font sizes inside the Flash movie. Spans and whatnot.
I will say this, however. sIFR works because it saw a need. It fixes a problem, enhancing it seamlessly. I dare say that nobody would use sIFR if it were not for the aliasing issue.
Let’s identify more problems and fix them. Let’s discover new enhancements, not just say, “Flash 8 can do this new stuff, so let’s do it.” That being said, better anti-aliasing is huge.
A well pruned list of core functionalities should be adhered to, with a few enhancements as it directly relates to the core. I doubt that we will see a bloated sIFR or anything, I just hope we are selective.
What’s missing from the web now? There are plenty of more “advanced” typography features that sIFR can continue to address. I would love it if sIFR could handle hyphenation, widows & orphans, punctuation spacing, etc.
Aliasing will slowly fade in the next couple of years… I would like to turn to sIFR for the advanced typography features that will not make it to the web for five or ten years. At least that’s how I see its evolution.
I’m sure it will all work out.
It would be nice if sIFR’ed fonts could be allowed to scale along with other non-flash text in a document.
Kerning / Leading (for multiline sIFR) control would be nice (many other above have asked for this as well)
Perhaps some official support for using more than one color of text within a single movie.
This one is a toughie – I’m not sure if its possible (perhaps its even possible with sIFR2, I dunno):
The ability to group more than one CSS selector and have the text from both those tags appear in the same flash movie (obviously they would have to be adjacent)
So, for example, if I had a page like:
<h1>This is a title</h1>
<p>This is the subtitle or witticism to go under the title</p>
It would be cool if I could replace the whole lot of that text with only one flash movie, which would display the header and subheader.
The ability to have complex backgrounds (again, this might be already available, but I’m not certain). For example, if I wanted a certain look behind my pullquotes, it would be cool if I could make a .swf as a background.
Per-word text formatting: This goes somewhat with multi-colored text, but it would be interesting if i could tell sIFR I want the first word formatted with X font and be red, the second word formatted with Y font and be black, etc.
Regular expression handling: So for example, if I wanted the quotation marks in my pullquotes to be huge and my font to be another size, I could write something that could do that.
Finally, I don’t know how you’d pull it off, since this is scaled flash text, but it would be nice to be able to set sIFR to a font size and have it stay there, without having to worry about the pixel height of the box it’s in. (I might just not be using sIFR2 properly, I don’t know)
A lot of my suggestions might not be appropriate for sIFR – they’re just brainstorms. There are some things I don’t want sIFR to do however:
I don’t want to be able to lay out a complicated, fixed dimension header with multiple lines of text and images in sIFR. Thats better done as a custom flash movie with parameters passed to it through a simple DOM script anyway. In my mind, sIFR is for styling text when traditional background image replacement techniques are impractical, such as in blog/news posts, episodic content, etc.
I dont want it to be able to handle things like columns – that would only encourage people to use sIFR for body copy.
You need to be cautious not to include every feature under the sun in sIFR. It’s great at what it does now – don’t make it bloated and attractive for abuse (like replacing body copy).
I seem to be unable to make SIFR work with relative font sizes such as small, medium, and large; that would be nice.
It would also be nice to be able to use [b], [i], [strong], and [em] tags within a word to change display properties.
Ditto on the dynamic size changes.
I came here with a bunch of suggestions, and it looks like every single one of them has been addressed. Glad to know that I’m not alone.
If I could choose a few in particular, though, it’d be support for kerning/letter spacing, line height, and different colors within headlines.
Keep it up Mike; sIFR rocks.
I just want better transparency support (may not be a sIFR solvable issue) and support for Flash 8’s live effects (drop-shadow in particular, because I display my sIFR headlines over varying bitmaps)
I wouldn’t say as beautifully as Photoshop. The anti-aliasing is several degrees better than before (I am able to set text to smaller sizes without fear of blurrying them up, or turning on the Alias option), but the kerning is still a bit of a problem.
Still, it looks real nice, and it’s a no-brainer to include it in the new sIFR.
No feature-bloat in sIFR, we’ll carefully select the stuff we want to implement.
Michael, unfortunately those are browser issues. Perhaps Firefox 2.0 will bring us relief.
Rob, thanks for your lengthy comments. Good to see word from you again (ah, those DC days…)
How about the ability to use color gradients? Just apply the gradient to the text by accepting two hex codes and fading between the two either horizontally or vertically.
Keep up the good work.
Thank you.
Hey Donald, some questions:
1. How would you like to see this?
2. What would you use that for?
3. The demo page? Or real-world examples?
4. Agreed.
5. Why would we do that?
Thank you everyone for your comments this far!
Thanks for the response Mark (Dutch Wolf).
Regarding your points,
1. I will test this out when I get a chance.
2. I run into a very bizzare issue when I use a transparent background on the flash movie when the page is printed. I am also using a print.css included file with media=”print” to handle the printing. When I do this, the printed document looks like it prints a green background the entire size of the flash movie. If I change the background to not be transparent I do not run into this issue.
3. Ya, a Flash developer at my work seems to think he can remedy this. If he does, I will let you know.
4. Great!
5. This will make all my designers REALLY happy.
6. I think only web developers change the font size when they test their work anyway! Just thought I would ask.
7. Cool. The little tabs beside each sIFR instance are annoying and even more annoying is the complete removal of them. All of which are almost as annoying as the spoiled brats who whine about sIFR yet have little to no knowledge about the importance of branding of Fortune 500 companies.
Thanks and good luck!
Jim M
Hey Jim,
1. Cool
2. I’m afraid this is beyond our control. We are checking for transparency support so we can use a fallback color if it isn’t there, but it’d seem that this support is entirely different for print. Use the fallback content for the printer (as the provided CSS does).
3. That’d be great. Thanks.
4. Well, I’m no longer 100% sure if this will be possible, but we’ll sure give it a try!
Cheerio!
Having worked with sIFR a good bit, my requests would be related to:
A) Making the tuning process easier/more consistent (No, I don’t know HOW to do this, but I do know that somehow it needs to be done. This is my biggest issue with sIFR.)
B) the DHTML menu drop down issue… even using the transparent or opaque wmode doesn’t seem to work — this is a pretty big issue.
C) It would be nice if the resizing and FlashBlock issues could be worked out.
D) I would LOVE to have the Flash 8 filters available… they rock. But they could be a pretty big processing hit as well… it would be interesting to see though.
Thanks for the hard work guys… I got a chance to promote sIFR a bit in my Advanced CSS Session at Macromedia’s MAX conference last week. It was surprising how few were aware of it’s powers (and existence)… looks like we have more work to do. ;)
I’d just like to add my voice to those asking for vertical text. Please. Pretty please even. It would make me so very, very happy.
Unless it can already be done, in which case, I’d dearly love to find out how.
Pointing to our previous disagreements, I would like to see this in sIFR3:
1. A sIFR that allows me to select text across the borders of the replaced text. Currently, as a keyboard user, I can’t use sIFR if I want to select blocks of text.
2. Less fuzzy antialiasing.
Arve, I’d like to see that too. But alas, Flash doesn’t do that…
Bwah, sorry ’bout the double submission, but I’ll still continue:
1. This is something I haven’t investigated deeply, but we should be looking into allowing the next-generation plug-in architecture allowing this.
2. Must be fixed within Flash: Antialiasing is currently very _ugly_
Arve, who do you mean by “we”? :)
I was going to read and see if my requests were already here, but I figured it would be better for ya’ll to see the quantity of requests for a certain feature. Mind you, I’m totally flash ignorant, so bear with me if these are flash limitations.
1. Better Typographic Control. I’d love to be able to tighten up the kerning.
2. I wish the flash wouldn’t render in CSS-off situations. This one is pretty trivial really, but it would be nice to have.
3. Cleaner & Easier implementation. I know it’s already pretty darned simple, but every extra bit of code I can keep out of my pages makes me exponentially happier.
Good stuff though, I’m really looking forward to it.
No Flash needed to encode a font file, please! (If possible.) thanks!
I have to agree with a few of the other comments. sIFR is good enough as it is, but hwat’s wrong with improvement. Anyway, I’d like to see Alpha transparency support, tiling images as backgrounds, and possibly vertical distribution of headlines along with horizontal distribution.
Jim (#31): Web developers are not the only people resizing text after a page has loaded. I do it when I’m browsing the web and enter sites with text that is too small to read. Ok, so I’m a web developer, but what I mean is that text size may need to be adjusted on a site-by-site basis.
Garrett (#39): One more vote for “no Flash when CSS is off”.
Mark: “We”, as in the “web developer community”.
At first glance, the University of Washington’s admission web site looks stunning. However! It’s an admission web site and CAN NOT find where to “apply” to the university. That’s a major issue for an admission web site if users are unable to find the application to the university.
Second, the text “Experience the University of Washington in all its energy and diversity. Everything you need is right here: the latest headlines, the best tips for visitors to Seattle, and up-to-the-minute advice on how to apply.” located in the middle of the page looks really out of place on the web site.
Just my 2 cents.
(Editor’s Note: “Apply” is right there in the main navigation at the top of the screen.)
Not sure if this is fixed in Flash, or something you can alter, but when you highlight text, it always uses a black background. On the University of Washington site, on the first page, this makes the highlight hard to see, as the backgrounds are dark shades. However, try the Academics page. The background is black, hence I cannot see the highlight at all! I had to copy the text and paste it into Notepad2 just to prove it was actually copyable. A bit of a problem here methinks. Over to you guys…
A flash API allowing us to execute customs actionscript would allow users to add nice effects, animation or whatever your can imagine :)
Multiple fonts, and/o rmultiple font weights would be nice.
For creating SIFR without flash, you should check SWFMILL & MTASC.
It is really easy to embed a font and then compile the code (that must be in AS2).
You should change some things (like creating the text field via AS), but after that, all works perfectly.
The problem with flash over menus is not solvable by the nice people here. It´s a problem with plugins and should be solved by browser vendors (i´ve solved it on some sites by hidding the sifr text while the menu is open, but is not nice).
Kerning: Currently not possible. Only letter spacing is supported in flash (and in version 8 and above).
Background images: in flash 8, it´s possible.
Text selection: Using a hack it could be done (flash doesn´t let you change that).
Apologies if this has already been addressed, but the ability to turn off anti-aliasing for pixel fonts would be most excellent.
Other than that, most of what I’d put on the wishlist has been requested. Keep up the great work.
We’ve been using sIFR on WWE.com for close to a year now.
kill the widows
something thing that bugs the crap outta me is the inability to put a non-breaking space in my text. is it just me that hates those? especially the tiny two or three letter ones, arg.
anyway to fix that would be swell.
Ber, what do you mean by “kill the widows”? Also, what would you use non-breaking spaces for?
Widows are lines with only one word on them. The problem with trying to get rid of them though is that there are really only two things you can do:
1. Shrink the font until the widow word jumps up to the line above it. I don’t think people will like this because it can affect the size of the text dramatically.
2. Pop another word onto the widow line so there are two words on that line. We probably could do this.
It would be super if sIFR could take the colors for text from CSS instead of having to hardcode them into the JavaScript.
could you allow html or ascii characters? then you could add a non-breaking space. that would also allow you to use all those special characters like é or ü or ñ as well.
I put an overlay gradient layer on my sIFR headings http://www.irishstu.com couldn’t find a way to make it scale – probably cos I suck at actionscript! So, how about an optional layer with a scaling object that can have effects on it? oh, and how about being able to make a flipped “reflection” effect?
I’d love to see a sIFR solution to replacing the initial caps for the titles of my blog posts, without having to use imagery and without have to resort to custom code for each title. The center alignment of a title might be an issue, but I’m sure I’d be willing to switch to left alignment if it meant using something like sIFR instead.
Um, I wouldn’t mind seeing the overall file size be a bit smaller if possible. That my only hang up.
Thanks
It would be really great if sFIR could adapt to background color changes initiated by user stylesheets or custom windows color schemes (user agent set on “use system colors”).
That would eliminate one mayor accessibility problem of sFIR – and yes, I like it to resize on window size changes to.
I asked about this one in the form, but just curious to know if it’s possible. I’d like to be able to have sIFR replace a pseudo-element, i.e., p:first-letter. I’ve got sIFR dropcaps working cross-browser, but being able to use a pseudo-element rather than having to wrap them manually in spans would be pretty cool.
Did you direct the AT&T link in your “I almost forgot…” comment to your own website on purpose ? Haha. Yeah, you might want to change that. I know that this is an old post, but some, like me, end up reading this stuff a wee bit later than others.
Cheers
(Editor’s Note: Oops! Forgot to populate the href field. Fixed!)
I second Cameron Moll’s request, if only to tidy up his RSS feeds. A list of actual headlines in my Firefox RSS bookmarks would be better than a list of entries like <img class=”capO” src=”/img/letters/o.gif”… :)
Awesome; I can’t wait for the next release, having just gotten into it. This IS the best thing since sliced bread.
Here’s what I’d like:
ps.
The other thing you could do, if you don’t want to make a dreamweaver plug-in would be to offer a web-based wizard that creates the code & SWF for download.
While I appreciate what is trying to be accompished with sIFR – there isn’t a better “font embedding” solution out there – I really think that reliability and some of the more basic functionality/documentation needs to be tackled first before getting excited about new whiz-bang features. There’s a reason sIFR is limited to fixed width headings and you don’t see people making cool tabbed menus or more clever implimentations
Let’s start by simply improving the documentation. I for one would like to see an explanation of what are the decoy styles are really all about. Are there well documented examples of how to “tweak” sIFR fonts – particularly in complex situations. Why are the results so unpredicatable?
While sIFR works fine for simple headings (h1, h2, and that’s great!) it seems to completely fall apart when the elements it is assigned to has more “complex” css proporties. sIFR seems to attach special importance to certain properties in a bit of a confusing way. In my tests sIFR seems to ignore font-size all together and use line-height instead. If you’re element has a height on it then it will ignore the line-height as use the element height. A bit confusing since it quitw common to come across situations where you font is smaller than your line height.
So for those of us who are tired of tweaking in order to “discover” sIFR’s behaviour please improve the documentation and provide more complex real world examples. You’ve got the designers and PHBs excited about using real typefaces again. Please help us developers deliver on this promise.’
Thanks
Christian:
Not true actually. sIFR is not limited to fixed-width headlines and it also works just fine with tabs menus and other clever implementations. It’s usually at it’s simple when put to work on simple tasks though.
I do, however, very much agree with you that sIFR is, unfortunately much easier for javascript/coding types to use than designers… which is a paradox that is probably not solvable at this point in time. Clearly it would be much better for things to be the other way around.
As for the way sIFR sizes things, yes, it’s *totally* counter to how you’re used to sizing type on the web, but it’s really not that hard to understand. The original article on sIFR is available here and explains the sizing pretty comprehensively. What happens is that your normal browser text renders first as a block level element. sIFR measures the height and width of this block and then replaces the block with a Flash movie. Then, the text is injected into the Flash movie and scaled up until it’s snug against the edges of the box.
I want it to do the washing up for me.
Following up on Mark Priestap’s comments, an all-in-one tool to SWFerize fonts would be hugely appreciated.
The website tool suggestion is a great one: Fill in a form, select the permissions & domain(s), specify if all the glyphs are to be included or only a subset, upload the font to be used and get back the generated file.
Free, advertising supported, a few bucks a transform, however paid for, this would really improve things for the less technically inclined folks.
sIFR has been pretty good for me and I only have one significant complaint
Text Size should be set with a number.
As you said Mike, it is totally counter intuitive to have to set the size of the block element to achieve the proper text size. Yes, studying/improving the documentation would help but at its root the problem (imho) is really the concept.
Also, the more attributes that can be handled from CSS the better.
I’d be pretty excited to see the handling of widows, orphans, and hanging punctuation as well.
Mike, have you seen this yet?
Revised Image Replacement.
http://www.mezzoblue.com/tests/revised-image-replacement/
Sifr’s great! One thing I’d like to see in the next version (or as a fix to the current one) is something that addresses a problem I came across recently while using the PC’s at my school’s library (both WinIE6 and Netscape 7.2). It seems that when Quicktime is set to handle Flash movies, sifr fails to show either the replacement text or the fallback text, and instead the user gets a Quicktime plugin icon. My apologies if there’s a way around this (other than telling someone to switch applications that handle Flash) that I missed. Thanks!
Graham – If you don’t have Flash and you would like to use sIFR, I would be glad to create the files for you. I don’t have any commercial fonts, but if it is a font from dafont.com, or any other free font site you can email me at alec (at) alecloudenback.com and I will e-mail you the files.
I think if you asked a lot of people they would do the same also – it’s not a long or difficult process at all.
Hi!
i’m using sIFR for not so long now, but i like what i see. Some feature requests:
– border around text
– horizontal en vertical alignment
– bold text
– etc etc
Nick
It’s already been discussed, but a way to create sIFR without the flash IDE would be the best thing for me. I’m currently looking into that, but not being an actionscript expert, it is not really effective.
I don’t really want to cash out only for that (even if I think it might be worth it) since I’m not so much of a Flash person, but in this case I agree it rocks.
I’d like to reiterate the request for the “Ability to use (and abuse) Flash 8’s live effects like soft drop shadows behind text”. I have created a template for intranet sites at the company I work for and use sIFR for headings. Though better than plain text it would be nice to have a drop shadow behind the text, especially when the text is over a graphic.
Better anti-aliasing is always a plus.
At work, computers that don’t have the Flash player installed display an icon instead of text.
The block element should be able to size to the page when using a liquid layout. The width of the Flash movie should be no wider than the text.
Tanny- are the icons that display the little Q quicktime icons? If so, that’s the same problem I had described- Quicktime can hijack Flash. This would actually seem to be quite a big deal because it makes accessibility worse, so I’m hoping there’s a way to fix it. I would guess that you can circumvent the problem on your work computers by disassociating .swf files with Quicktime. However, that’s not really a solution to the fundamental problem… Has anyone else come across this? Any word on whether there might be a solution?
Regarding the accessibility of sIFR – it would be great to clarify in the documentation the impact of choosing to use the sWmode argument (that is, if you use “window” for the value there is the possibility that the Flash content will be read in addition to the replaced content.). Also, there is a problem for keyboard users when the Flash content has linked buttons — keyboard users will tab through links in the replaced content as well as the buttons in the Flash content. This is not a big problem when there is a single link, but if this is used to replace a chunk of content with several links the burden on the user increases quickly. Not only does the user need to tab through the links, but the default wmode setting makes the default focus rectangle invisible, which adds to the potential confusion.
Seconded (thirded, fourthded?) the request to remove the need for Flash to create the .swf file (if it’s possible?). I’d have to invest $$$ in Flash for the newer version sIFR, which is unfortunately hard to justify just for (admittedly gorgeous) titles. A web-based tool for that purpose would be great – even if I had to install it on my own site first.
As for the “not having Flash” thing, Macromedia has a 30 day trial available. Probably not the best solution in the world, but if you’re looking to convert a batch of fonts, which is what I did, you have 30 days to do it in. The demo I downloaded is on the Macromedia site at http://www.macromedia.com/downloads/.
And another thing… there’s a cool sIFR plugin available for WordPress. Its still a work in progress, but it works out of the box for the features it has. I’m using it on my site at http://www.blahgkarma.com/wp, and it rocks. Now if I only knew something about web design, I’d really be cooking with gas – but wait, I don’t have to know that stuff to use sIFR, now do I!
The plugin is by David Chait, and you can get it at http://www.chait.net/index.php?p=310. Oh, and did I mention its free? Guess I did now…
A nice feature to have would be the possibility of hiding sIFR flash when hiding the container object. If you put a sIFRed tag in a div, then try to hide the DIV at runtime, sIFR-flash stays in place … and it is not a good thing.
I love everything about Sifr so far except for the ability to somehow detect if flashblock is installed and to disable the sifr.js altogether when flashblock is encountered. Not entirely sure how to do that but it would be a major boon since some of the sifr deployments I’ve done require that text be much larger in the script than it normally would be.
Possibly another suggestion would perhaps be a php based configuration tool ala flashy-titles for wordpress. Granted it would still take a large amount of configuration manually but the ability for quickly changing the options or even choosing the particular font would be quite handy.
Chris: sIFR already disables itself if FlashBlock is installed. Old versions of FlashBlock do not support this.
Dan – You’re right, the icons where Quicktime icons. I got the SA group at work to put the Flash 8 player on every PC (50,000+), which gets rid of the problem at work. Unfortunately it is still a problem for those that have allowed Quicktime to hijack flash content.
It would be nice if sIFR would only work if Flash was the default program for .swf files.
It would be nice if sIFR used the text that is created by CSS rules. For instance I may have a rule that transforms text to lowercase but another rule for a nested element that does not transform case. Here’s an example.
Welcome to CSS for Beginners
When lowercased it is displayed as:
welcome to css for beginners
However in this instance I want CSS to be capitalized, as in:
welcome to CSS for beginners
I would markup the text as:
<h2>Welcome to <acronym title=”Cascading Style Sheets”>CSS</acronym> for Beginners</h2>
My style would have:
#content h2 { text-transform: lowercase; }
#content h2 acronym {
text-transform: uppercase;
cursor: help;
border-bottom: 1px dashed #000;
}
The reason I would even want to do this, is that where I work, the intranet standard for H2 headings is that text is lowercase and acronyms are uppercase. In the future they might want to use propercase and since it is a heading the markup should be in propercase. Changing this works with standard CSS. How do I do this with sIFR?
Thank you,
I tried to find the suggestion in the above links…
How about a background colour change for links. Or some type of effect other than just a colour change?
Quite simply I would just love a faster conversion from text to sIFR text. If there are multiple uses of it on a page it can sometimes take a second or two to kick into gear as evident on my site.
You guys are doing an incredible job, thank you for all the hard work. If I knew your addresses i just might send you all a box of cookies. :)
And oh yeah, maybe you should integrate the good ole’ tag…
Rob, we’ll do our best. As for those cookies, depending on the size of the box addresses can be arranged ;-)
I would love to have the ability to use multiple fonts within one line of text. We had one layout that said something like:
“Book Review: Title of Some book”
It would be the greatest thing ever if I could do “Book Review” in the “Black” style of our font, and the book title in the normal style.
Although the sIFR docs discourage its use for links, navigation menus look really nice with sIFR.
This simple effect can’t be duplicated by sIFR:
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }You can set the color, background color, and hover color like so,
sIFR.replaceElement(named({ sSelector:"#topnav li", sFlashSrc:"swf/tradegothic.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#ffffff", sHoverColor:"#ffffff"}));but you can’t set the hover state’s background. Besides sHoverColor, I’d like to have a sHoverBgColor option, too.
I would like to see support for SES URL’s, for examle:
http://www.foo.com/index.cfm/go/home/show/new
If I use SES URL’s now, it brakes sIFR for some reason (even with absolute paths in all the settings).
So maybe some more SES support would be great!
Michael, what exactly are SES URLs and what is going wrong? Do you have a demo somewhere? (It might be better to discus this on the forum).
Rotation?
I’m sure this has probably already been suggested, but i’m too lazy to read all the previous posts so:
LEADING WOULD BE AWESOME.
Thanks guys, keep up the good work.
Great work on sIFR you guys!
I was just wondering if there was a timeline set up for sIFR 3 yet? And if its not in the near future, will it be easy to upgrade if I build a site using version 2?
Hi Alec,
I’m aiming to have it ready before summer. And unless you have a ton of Flash movies upgrading will be easy enough, in fact font tuning will be a matter of setting two CSS properties!
howdy, mike. i’m the developer for propel, although i don’t remember if it was me who sent you the link.
at any rate, thanks both for sIFR and the kind words. incidentally, all the kerning was done on the font itself before importing into Flash. used the same hac—er, technique on sfredportfolio.com.
I think the best visual improvment will be a support for flash 8 ‘Anti-alias for readability’ function. big big change, 10 times smoother.
Beside that, just continue this great affort of making the web look better.
LEADING – positive and negative would be fantastic – preferrably very easy to change as well.
“Ability to display crisper text (especially at small sizes) for people with Flash 8.”
This one getes my vote!!!! Big big difference at small sizes – and something I’d love to impliment on a site I’m building at the moment…
Is there a rough date in mind for launching v3?
Cheers
Im having troubles getting sifr to work with the pngfix.js that was released so that IE can view transparent png’s. When I disable the pngfix sifr shows up just great on IE, while when it’s disabled.. it doesn’t.. They work fine together on Firefox. So if 3 could work with pngfix.js then that would be excellent.. and if someone knows a fix to sifr2 or to pngfix, please let me know! :)
Not sure if this has already been mentioned, but is it possible to apply the new blending modes to dynamic text in Flash? If so, it would be great to see this in future versions of sIFR.
Drop caps would be great…
Easier Font tuning would rock my socks, but otherwise I’m quite happy with sifr, it does what I need it to.
would be good to be able to not need to supply pixel based font sizes and for the sifr technique to not screw with all headlines e.g. any replacement techniques used for h1 and top header graphics dont come out
also noticed that any element set to relative positioning doesnt come out in SIFR, you need a div wrapping round it to get it to work.
would be really nice to see drop shadows as this would make the text work a lot better at the site i am working on at moment http://jimbyrne.co.uk/thcarpets/template_static_html/testhome2.html#
sIFR should not in any way hide textual content from search engines or users. I find that text rendered by sIFR cannot be found when you use the “Find (on this page)” command in the browser. Hope you can fix it.
No content is hidden from search engines. It’s too bad that Flash doesn’t let the browser search it’s the text it renders, but replacing the text is pretty much the point of sIFR.
I want to echo Ben Scott’s comment that font sizes shouldn’t have to be specified in pixels. I always (and this is generally regarded as best practice in CSS) set my headings as a percentage of the base font size to ensure they are always some degree bigger than the regular paragraph text. If I have to set font sizes for SIFR in pixels, and a user has a larger than default font size set on his browser, he will get heading text that is smaller than the regular paragraph text.
In the SIFR 3 alpha, I can set font sizes in percentages and have the size of the Flash text come out roughly correct (which is all I desire), but it does screwy things to the margins of the headings.
Can sFIR be used with other languages? for example, Japanese font
Scalibality is the only request I have. Both resize when the browser resizes, and resizes the text when the user changes the text. There was an article on that may be useful.
Possibility to give em sizes for padding and offSet in the sIFR.replaceElement method
Soon i’ve encountered a problem, making sIFR replacing the text for menu created from block A elements with changing background in normal and hover state.
I think it will be nice if you enable attaching background images using the backgound definition from the CSS.
A wishlist item I would like to see implement in v3:
The ability to replace multiple selectors with one sIFR.replace() call.
I’m finding myself frequently duplicating calls to sIFR.replace() with the same parameters because the same style needs to be applied to multiple selectors. If I could pass an array of selectors instead of just one at a time, it would cleanup the code a bit.
Come on now Anthony, after all we’ve discussed you’d think I’d leave that out? ;-) Just seperate the selectors using a comma, like in a normal CSS file.
The ability to do a “not” selector, for example (to borrow from a previous example):
sIFR.replaceElement(named({
sSelector:”#topnav h2″,
sNotSelector:”#topnav h2.noSIFR”,
sFlashSrc:”swf/tradegothic.swf”
));
Which would replace all the h2 elements in topnav that don’t have the class noSIFR applied to them.
… and I missed a } in that example. Oh well, you get my point :)
The current version of sIFR 3 has support for this, in the form of a sIFR-ignore class. It might also be possible do support a not() selector. I’m not sure of the syntax but something like “#topnav h2::not(#topnav h2.special)”.
One good thing for sIFR 3 would be to replace the “onload” trigger by a DOM Content Loaded event. So the javascript replacement wont wait for all the pictures to be loaded before replacing sIFR text.
You can look at the jQuery library who succesfully implemented this function for cross-browser.
Possibility to integrate with IE7 javascript (use the DOM query stuff from there) — this should save some CPU when using both
php To generate a font from a ttf (I’ve been meaning to write this for a while but haven’t got round to it)
Yes, this would break backwards compatibility, but a version that was integrated with swfobject and used it’s simple object property way of setting parameters would be interesting.
I wish:
Slightly off-topic I know, but there’s a typo on the example page — The designer and font are called Frutiger, not Fruitiger (I don’t assume this was itended).
Sam: Good catch! Fixed…
I’d like to see a solution to this problem implemented :)
http://forum.textdrive.com/viewtopic.php?pid=128166#p128166
Someone here posted that they were having a problem using fixpng with sIFR… I had a similar problem where sIFR was breaking my fixpng so I thought I’d post my solution….
in fixpng.js wrap the script in a function, and call it at the end using window.onload like so:
function fixPNGs(); {
…… pngfix script …..
}
window.onload = fixPNGs();
/* Your PNGfix should now work with sIFR */
forgot to mention that for PNGfix to work you must also place the pngfix SCRIPT tag at the bottom of the page below the sIFR replacement calls.
I use swfdec (aka “the free flash implementation that works with youtube”) but sIFR doesn’t work. And it doesn’t degrade either. I don’t know if sIFR can be fixed to work with swfdec (probably it should be the other way ’round) but it would be nice to at least be able to see the browser text.
SIFR could implement writing-mode so we could have vertical/rotated tb-rl flipV/flipH for Firefox?
[…] Mike Davidson – sIFR 3: A Request for Requestsvia Tommi (again) – let’s you replace any html text by a flash file generated on the fly which let’s you use custom not standard typefaces… […]
A fix for sifr widows: http://darkmotion.com/blog/2008/07/21/reuniting-lonesome-sifr-widows/
Just wondering what the status is of sIFR 3. The request for requests was made back in Oct. of 2005 and there have been no recent posts or updates. I realize that 128 requests is a tall order, but is it still being developed or has something else come along that makes sIFR obsolete?
micthemouse: Good question. In my mind, it’s ready to be released, and has been for about a year. I’ve been using it on Mike Industries for probably a year now and it’s been great. Mark, the lead developer on the project, still has a few things he wants to work out before officially releasing it. I encourage you to bug him. :)
One good thing for sIFR 3 would be to replace the “onload” trigger by a DOM Content Loaded event. So the javascript replacement wont wait for all the pictures to be loaded before replacing sIFR text.