sIFR 2.0b2: The Mo’ Betta Beta
UPDATE: Version 2.0 is now available. See article here.
Another week, another round of improvements to sIFR. I think we’re 95% of the way to an official release now. Here are the improvements in the latest beta:
- Syntax now 100% compatible with XHTML Strict, even when served as application/xml
- Optional conversion to uppercase or lowercase now supported
- Optional link underlining on hover
- Bolding and italicizing of TrueType fonts now supported
- Automatic removal of extra white space in HTML
- Full support for Safari, Firefox, Mozilla, Mac IE, and PC IE
- Improved support for Opera
- Better international character support
- Ability to use quotes, ampersands, and other normally escaped characters
- Various speed improvements and bug fixes
For people who have already implemented sIFR, you don’t need to redo any of your CSS. Simply pop the new JS file into place, re-export your SWFs, and you should be good to go. Please make sure you have the updated .as files in the same folder as your .fla when you re-export.
There was only one minor change to implementation you should be aware of: The replacement calls must now go either at the end of your HTML document or at the end of the JS file. This only affects people who may have embedded the replacement calls in the middle of the JS file previously.
Alright, here’s the sIFR 2.0b2 download. Bang away.
Thanks for the update, Mike! Was looking forward to the uppercase option and its good that it’s out now. When do you think you will have an official release? Couple of weeks?
Just noticed that when you do use the uppercase option, it makes any links that enclose the replaced tag in uppercase as well..is it possible to have only the text be uppercase, and not the actual link?
Hesam, only one text string is passed to the Flash, therefore we can’t uppercase certain parts of the text.
Beautiful. Can’t wait to get home and try it out this evening!
Thanks so much! Cant’ wait to impliment it on some upcoming sites.
Thanks for your hard work. These are revolutionary times on the ye’ol internet.
I’ve been trying to use this for some header replacements, but I’ve run into a bit of a problem. My headers need to have links in them, but only the actual link part should be clickable. Take this example:
<h3>This is <a href=”#”>some</a> text</h3>
In the current version (2.0b2) it seems to make the entire header a link, no matter what. If I set underline=true, it will underline the entire header, rather than just the link as I’d think it should.
Any ideas?
Kudos to the updates, specifically the Bolding and italicizing.
“résumé” as h1 doesnt work
Frank,
Just click the “Character…” button on the Properties palette while in Flash and you can add any special characters you like. If we included every single special character like that by default, the file would be large.
How does someone without Flash 6 go about creating new .swf files for new fonts? Someone want to start a library of ’em somewhere?
Mark Wubben wrote :
Could you show how? I’m not very strong in JavaScript.
I can’t see any speed or quality improvements (transparent background is pure green) in the new version with Opera (7.54 win xp) and I’d like to just switch it all off for this somehow good browser.
Otherwise – great job, guys!
Mike,
COOL! thanks…
I’ve come across a strange issue. I haven’t figured out if it’s font-specific or style-specific…
If you look at this page, you’ll notice that some of the letters looked cropped. In some cases (the page title), it’s just the descenders that get cut off, but my ‘h2’ tag (in the body of the page), both the bottom and right sides of the letters are cut off.
These are all House fonts, so I’m going to try some alternate script fonts and see what happens…
(Editor’s Note: If you’re experiencing this issue, please redownload the beta and re-export your .swfs. I slipped in a change to fix an issue with fonts not reporting their descender depths.)
I’m having problems with the hover underline feature… sometimes when I hover over the area the text becomes underlined, sometimes it doesn’t. If I click a few times in the area and then hover over it, this seems to fix this problem…
Anyone else having this issue?
And I was having the same problem as Kyle and thought it was a font issue – good to see that it’s not. The fix works perfectly for me now.
I am having probs using this with my own flash file. I am getting our creative dude to make it in Flash MX 2004, using Century Gothic and the sifr wont pick up our files, althoguh it works fine with the examples…
What are the settings you need to specify?
Oh and the newer version, (2,0b2) wouldn’t work for me in IE6 Win2K with all updates and patches.
Krzystof, we’re thinking about disabling sIFR for (certain) Opera (versions), there’s no nice way to include that in the code though and keeping it customizable at the same time without forcing people to edit the code.
Let me rephrase that: you’ll need to modify the sIFR code to prevent specific browsers from replacing elements.
Ben, could you please be a bit more specific? Also, could you put the exact files you used online so others can test and confirm?
Mike (not Davidson)-
Starting a “library” of SWF font files would be akin to pirating fonts, IMHO. Not only would it probably be illegal, but it would also be unfair to our fellow designers who created them.
And what about WIN/IE 5.0?
i think it doesn’t work
People: Please, if you’re going to ask about possible problems, include an example or at least fully describe what’s happening. We haven’t found any bugs in 2.0b2 yet, so vague statements asking for help aren’t very useful. 99% of the time, somebody miscopied the CSS or is not exporting the .fla with the .as files present, or something like that.
This technique does require a very basic knowledge of HTML, CSS, and Flash, so without that knowledge, these things are bound to happen. I just want to separate these sorts of things from actual bugs.
Thanks.
Hey Mark,
I tried sending mail to mark at novemberborn.net and got delivery failure. You can write me at gmail. The username: “composed”.
Hi Mike,
Great stuff. At the moment I’m trying to implement sifr at http://www.annmaurice.co.uk – the text is rendering far, far, too small. How best can I control this and replace like with like? With the sifr stylesheet or within the flash component? Many thanks!
All the best,
—
Ian
Mike,
Have you tried exporting new .swf’s after your most recent changes? I am not able to export .swf files that display any dynamic text at all.
I have the .as files in the same directory as sifr.fla. I open sifr.fla in Flash MX (Win XP). Noting that the stage has the properties Color: Alpha at 0% (transparent), I double click on it. The contents (“holder”) appears, and so does the text box within it, which says “Do not remove this text.” I click on the text box once, and now appear the properties: 30pt Verdana, Dynamic Text, with an ID of txtF.
I change the font to a test font–say, CheltenhamOldStyT–and see that the contents of the text box now reflect the new font. I go to File > Export Movie… and save it as a .swf, with the following properties:
The resulting .swf does not seem to respond to sIFR. Nothing appears when I try Flash Replacement; not even invisible text (but of course the space for them is allocated, so there are empty white boxes). If I open up the .swf directly, I see a blank white box. If I open up the sample, vandenkeere.swf, I see “PLEASE PASS IN YOUR TEXT” set in Vanden Keere.
And if I open sifr.fla and make no changes at all, and export into “verdana.swf”, still nothing.
Any tips would be terrific.
Hi Eric,
That’s what I’m doing too – and it’s working fine, althought the text could be bigger. There also seems to be some padding there now which I don’t think was there before. What browser are you using?
—
Ian
Mike,
One other thing – sifr.js is giving me an error with IE4. – the error is “Object doesn’t support this property or method”.
—
Ian
Eric-
I’m not quite sure where you are going wrong, but I can confirm that your final SWFs should indeed say “Please pass in your text” if you view them directly in your browser. Example:
http://jeffcroft.com/swf/conduitBold.swf
Thus, I’d deduce that the problem lies somewher ein your SWF creation, rather than with the .js or the .css.
Drat. More discoveries so yet another comment from me:
1) The sifr JavaScript seems to prevent annmaurice.co.uk from loading in Internet Explorer 5.2 (Mac). The pages loads OK if sifr is removed.
All the best,
—
Ian
I agree, Jeff, the problem is solely with the swf’s…or, at least, the swf’s are wrong so I cannot test anything above that layer. The problem is browser independent, CSS independent, and JS independent–I had stripped down all the files (and tested in IE 6, Firefox, Safari, Ian–thanks) before I realized the swf’s themselves were not valid exports for the task at hand.
Another piece of additional info: if I make the Stage opaque rather than transparent, I see “Do not remove this text.” in the exported swf and it never changes and is far too small. It seems as if the swf does not really have a dynamic text field inside.
I am puzzled as to why I am the only one experiencing this problem. I have been exporting these .swf’s since sIFR 1.x, and have not had a problem until 2.0 beta2.
I have found a fix to the problem, but am still bewildered by why no one else encountered it.
I noticed an error which I should have noticed before, namely that
when I export the movie, I get an output error:
sifr2b2\dont_customize_me.as: Line 1: ';' expected /* sIFR (Scalable Inman Flash Replacement) Version 2.0b2It looks like it did not recognize certain characters in the .as file, and was freaking out at the very beginning. I have not touched either .as file, and I reloaded them from the archive and still got this problem. What’s weirder is that the actionscript in the .fla loads customize_me.as first, and there were no errors reported in that one.
Nonetheless, I deleted the leading comments out from dont_customize_me.as and it worked fine.
I have not opened the original .as in a hex editor or anything, but I
suspect there were freaky characters in the beginning. This issue was probably platform-related (Win XP), at least.
@eric:
i got the same problem as you state. doesn’t matter which font i choose and export – the swf file is a white empty box. could the problem appear because i’m using flash mx? does it only work with flash mx 2004?
thanks for any help and greets from cold switzerland,
>oli
@eric:
just made my post exactly when you were writing your solution. i tried it and now it works. i just got rid of the comments in the files… strange, no?
Hi Mike D – Thoughts for any upcoming SIFR documentation:
Disclaimer: People: these are not bugs – but quirks.
*Links will not open in new tab using scroll wheel click in mozilla
(not a gamebreaker – but its nice to have all these things documented so no one starts complaining)
* Right click to open in new window will not work
(should be obvious- but apparently it wasn’t to some people i know)
* White space text in html does not get trimmed to a single white space before being passed to flash – so be vigilant about making sure the text has no undue spaces in it – of the rendering will look pretty odd
(Maybe a future improvement of the javascript ?)
*Changing the .as files for domain lock down does not update until the flash is re-exported
(This is the most common biggest question I get asked from friends who are trying to use it)
Regarding the “dont_customize_me.as” file corruption issue mentioned above:
One change I made in b2 was to zip the files up from a PC instead of a Mac. This, unfortunately appears to have altered a few characters at the beginning of the .as file which screw up some versions of Flash.
I have now re-exported and re-uploaded sIFR2.0b2 from my Mac so everything should be fine now. Go ahead and re-download. Sorry about that. I usually don’t trust my PC for many things… and this yet another way it has failed me.
Marc,
Great suggestions.
Regarding the right-click/middle-click/scroll-click thing though, this actually does work as long as you don’t turn hovercolors or hoverunderlines on. Turning either of these two things on unfortunately turns the whole textbox into a “button” in Flash which disables the context menu stuff.
Doh! sorry about that. I normally read and test a lot so I don’t miss simple things like that. Apologies.
One other thing regarding the Anchor tags , the links to anchors dont seem to work when the anchor is within the tag being replaced (but not encapsulating any text – without flash it does work this way)
win xp – flash mx, mozilla firefox and ie 6
I am not sure how often anchor tags are used these days – but nonetheless its worth noting for situations were it is beyond your control eg – bad cms systems and client updates.
Shall I keep trying stupid things to try and break it for you? I won’t post them one at a time but I will wait till 5 or so pop up…
I rather like that multiple spaces don’t get trimmed down to one.
I severely dislike html’s heavy-handed insistence on single spaces between words, even after periods. Yes, there are debates regarding the origins, correctness, and readability of sentence padding. Regardless of the results of them, however, I like the aesthetic of two spaces. But I digress.
It’s likely that I’m the lone voice of dissent on this issue.
Well, the issue itself is not whether you like the way it handles spaces, or which one is correct – merely that they differ and people will need to be aware of it (as it will cause layout issues )
One example is a content management system that show the code fine when the page is being edited.
When the file is saved it imposes a word wrap on the file, and the end of the headline gets dropped to a newline.
Each time it gets edited – the text displays fine in the cms window, but then gets dropped onto a new line in the html – causing large spaces to appear (at the point where the headline gets dropped onto the newline) and the flash displays the text really small.
The reason it does this : the javascript works out the space taken up by the HTML version of the headline. It then draws a flash box to fit in this space. Flash keeps all the spaces, and has to try and fit into the space available – hence the text displaying very very small and on two or more lines.
Even if you like the multiple spaces.. be aware that the flash is dependant on the size occupied by the html element and using multiple spaces in html to cause a bigger spacing in flash is a recipe for trouble
Thanks for this Mike. I’m excited about what I see here. I have been experimenting with a site tonight. I noticed someone mentioning a Mac 5.2 error above. I didn’t receive a JS error, but this page breaks very badly in IE Mac. I wondered if anyone else had seen this? Here is the page with the sIFR: http://kpcinc.com/sIFR/advantage2.htm … and here is the original page with an image: http://kpcinc.com/about/advantage.htm (granted there is an incomplete doctype in this site at this time… I’m in the process of recoding portions and thus, I’m not “fixing” any of that until I reach the recoding stage). I haven’t been able to think of why it would be breaking with the replacement.
My other question has to do with letter-spacing. You’ll notice if you view the site now (with the image) and then go to the sIFR page and turn off the JS, viewing the sIFR as CSS, the kerning is very tight. Using Flash, do I have no ability to affect the kerning?
Thanks for the great work!
Wow this is a great piece of code, as a developer i have been looking for something like to use one the sites I am working on such as Big Plasma Televisions. I have tryed using the microsoft EOT files but was not happy with the compatibility issues – but this method is really cool – thanx
How about changing the status text of the browser window when over the link so it shows the target linke in normal html ?
just a suggestion…
Regarding the Mac IE issue, I’ll be deferring to Mike for now.
Regarding IE4, I suppose I’ll have to update the object detection, so IE4 doesn’t try to load sIFR anymore.
Cosmin, no. Browsers handle this differently and I’m very reluctant with this kind of feature creep.
(Mike: this beta seems to be holding quite well!)
I do have one other issue I’ve noticed and wondered if it’s just me. There’s a fairly significant size difference in my headings (shown in my post #37 above) on a PC and Mac. Even using the same flavor browser. Is there a known work around for this issue?
I’m also having issues with Mac/IE5.2. All of the regular text is mysteriously lower-case and right aligned, there are thick borders on certain elements(which don’t have borders assigned) and, seemingly on the entire body tag, the actual Flash replacements aren’t positioned properly, etc. Everything works fine in every other browser I’ve thrown at it.
The site I’m trying to use it on is not yet public, so I can’t provide a link in here, but if one of the devs would like a look at the problem, please e-mail me, and I’ll see about making a copy on my own server.
I too was having severe problems in IE5/Mac. After some extensive debugging and stripping down, I figured out the source of 99% of them.
In my case, the issue was extremely obvious: the page would not even show up, except for the background color!
The weird thing was, the page was fine if either:
1. sifr.js was not included, or
2. my layout stylesheet was not included
So there was some strange coupling going on.
The tip-off was a rule I had in my layout stylesheet which, when taken out, showed the page with some kind of condensed Cubist Dali freak show layout, with overlapping boxes and text and hover underlines showing up across the page. But at least I saw more than a background color. The rule I removed was this:
.nodisp { display:none; }Keep in mind that this rule had only been applied to two <label>s on the page that were not to be displayed if CSS was supported and, as one would expect, had worked correctly in every other browser I have tested on–with sIFR.
So for some reason, the “display:none” was being applied to either the whole page or, for some other baffling reason, every element within the page.
After some more debugging I found that my layout problems disappeared if I removed certain rules–namely, the ones with declarations involving classes without parent selectors!
I changed .nodisp to label.nodisp, and .container to div.container, and so on. And everything was now displaying fine.
It seems that sifr.js alters the document tree in such a way that IE for the Mac gets all creepy and starts applying styles liberally. I’ve found that removing “global” declarations for classes–by making them specific within other elements–this problem can be resolved.
It is not the best solution, because for something like “.nodisp” such a rule is best when applicable to multiple elements; but I must concede to yet another sacrifice on behalf of the lack of web standards.
Slick stuff, but I’ve noticed a couple bugs thus far on the my (sub)site.
I’m viewing the site on WinXP wth FireFox mainly.
A couple things I wouldn’t mind seeing:
Dan,
Thanks. Here are some responses:
1. The losing of linkability on scroll has not been reported by anyone else and I haven’t noticed this behavior either. That’s not to say it doesn’t exist, but an example would be nice. I looked at your site and none of the replacements seem to have anchors. Also, I noticed you are using the transparent background setting, which is not recommended nor is it necessary on your site since your canvas is white.
2. What do you mean by “links are served up as all caps”? I’m not understanding this. sIFR doesn’t touch your code.
3. Text selection works for me every time on all browsers and all platforms.
And as for your wish-list:
A) Small-caps requires a small-caps font to be embedded. This is already possible… you just need the font.
B) Underlines of a different color are unfortunately not possible.
C) The ability to link only part of a title already exists. The reason you may not be aware of it is that as soon as you specify a hovercolor or hoverunderlining, unfortunately the entire Flash movie becomes linkable (and the text is no longer selectable or right-clickable). Hover colors and hover underlining is achieved in a less than perfect way and thus some functionality is lost when you turn these options on.
Eric Pan, regarding the Mac IE issues, perhaps this could be because sIFR isn’t entirely correct with class changes. For example the sIFR-hasFlash class is set as ” sIFR-hasFlash” (note the whitespace before the classname.
I’ll change that behaviour and contact you to test the changes.
You guys hit the nail on the head. I removed the external style sheet from my expermental page and ONLY put in the classes being used for this page. Then I made them more specific. ie: p.body_class instead of the way they had it – .body_class The page reassembled itself and popped back into position.
The only thing I’m seeing in IE Mac now is, the Flash replacement isn’t respecting the margins given to it’s CSS/text counterpart. Should it? (I moved the margin from the h1/h2 to padding on the containing element and that worked, but I just wondered about that little detail.)
Thanks for the lead guys.
1st of all: congrats. great stuff.
As mentioned by Hesam above, there still is the link-uppercase issue. If you pass the parameter “uppercase=true” to the flash, and there is a link in the element, the href is uppercased too.
This breaks pages on linux-servers.
Hope you can fix this until 2.0.
greets.
mark.
Just curious – I never saw an explanation anywhere… why is the transparent background option bad?
Can’t wait to get beta 3 then… The client has agreed to use this technique. Might we have beta 3 by Monday? I’ll be watching … :D
Stephanie, probably, yes. Unless Mike has some new Flash stuff up his sleeves….
Hi,
On this version and the previous beta, sIFR is throwing an error on IE PC for me, but only on my implementation (not on other websites using sIFR, e.g. http://www.annmaurice.co.uk). I’m getting an “Error: object expected” on my first line defining the replacements, wherever I put it (in sIFR.js or in HTML).
My replacement code is:
/* header text */
replaceElement(‘#places’,’/sifr/sifr.swf’,’#FF88DD’, ‘#FF88DD’, ‘#FF0099’, ‘transparent’, null, null, null, null, ‘textalign=center’);
replaceElement(‘#tagline’,’/sifr/sifr.swf’,’#3F0C2B’, null, null, ‘transparent’, null, null, null, null, null);
replaceElement(‘.flash-replace’,’/sifr/sifr.swf’,’#FF0099′, null, null, ‘transparent’, 2, 0, 2, 0, null);
/* generic replace */
replaceElement(‘.flash-replace’,’/sifr/sifr.swf’,’#FF0099′, null, null, ‘transparent’, 2, 0, 2, 0, null);
// ]]>*/
Any ideas?
This is brilliant, guys, keep it up!
I’ve noticed that it ignores certain things like &n bsp; (space) in my implementation. Is this right or have I missed something?
Anyone gotten italic or bold to work? “dont_customize_me.as” appears to be searching for an <I> or <B> tag in the text to determine when italics or bold is used. Is that a conversion sifr.js or flash makes, or do we really have to put those tags in to get it to work? Putting them in didn’t work for me, neither did “font-style: italic” or “font-weight: bold” on the <h2> I was replacing.
It did seem that changing the font-weight in the sample doc worked (er, made the font sizes slightly larger), but changing the font-variant, embedding <i> or <em> did nothing.
Anyone? Bueller? :)
Oops, meant font-style there, where appropriate.
Jonathan,
The way to make the text bold or italic is to export the .swf with either the B or I box (on the properties palette) selected. And no, don’t add the bold or italic tag to your code or stylesheet… that will have no effect.
I’d tried that with Italic already, to no effect. Might be the particular flavor of Garamond I’m working with, I’ll keep playing. Thanks for the confirmation that’s how it should be done.
Bah, user error. It’s working now. Remember kids: just selecting the text tool and setting your font choices there doesn’t change the text already in the movie. Use the Libary Panel to select the text to change. Sometimes my I scare myself.
Bruce, this is taken care of – well, sort of – in the next beta release.
There are still some issues dealing with whitespace. If I have a title like so:
[h1]This_is__my_title[/h1]
(Replacing spaces with _, of course) Flash will honor those double spaces between “is” and “my” while HTML will ignore them. Maybe spaces are getting converted to %20 and not getting caught by String.prototype.normalize?
Also, I’d like to request putting ampersands in the default character set. I always forget to add it back in when I download a new version and export.
Great! Works wonderfully. The last version had trouble with font sizes over 100px (IE would hang) but it seems to be fixed in this version.
I even got it to work with Greek text by adding the appropriate Character set!!! My clients are going to love me…
Thanks for the great work!
David, that’s been fixed in beta 3 already.
This is shaping up to be a great product, but there is one thing that is driving me a little mad. Has anyone worked out a way to tighten up the leading beyond the textFormat() limit of 0? Passing negative leading values to the .swf defaults it to 0.
I’m trying to sit sIFR text on top of a visible border-bottom and leave only 2-3 pixels of whitespace between them. I don’t want to use a transparent background due to browser inconstencies handling that.
My h1 size text ends up being around 24px, but puts a big chunk of whitespace beneath it – maybe 18px with 0 leading. I’ve tried fiddling with the offsetTop property, but that just pushes everything down.
I’ll keep searching…
Hi everyone,
I’ve been looking for a smart solution for a text replacement like this since a long time – thanks or your efforts.
I’ve worked a few hours with sFIR, visited the demo- and testpages and now I wonder if I’m the only one who has noticed that the text renders bigger in Mozilla/Firefox than in IE5+ … any thoughts on that problem?
Regards, Lars
Lars, this is probably because it renders bigger without the replacement as well.
I think the text sizing convention is something that needs flashing red text when the formal documentation gets written up. It’s probably going to be strange for some people to wrap their heads around the idea that you never directly tell the Flash text what size to be.
Ahhhhh….click. I had a look at the introductory-text and demo-movie of the concept. Now I got it. I’ll post a link to the projects page as soon as it is finished.
Thanks alot!
Any possible way we can turn off the auto-sizing? It would be wonderful to be able to specify exact type sizes.
I think the work being done here is FANTASTIC, but I think that in the process of trying to gain more control over typography, we’re in fact losing control over essentials like type size.
That is exactly the case Francine.
You can pretty much have your choice of four fonts (Verdana, Arial, Courier, Times) and specify exact sizes, or you can have your choice of thousands of fonts and specify a size which will be roughly what the font is rendered at. That is a key reason why sIFR is recommended mostly for display type, where the difference between 29 point and 31 point is negligible. As opposed to body copy where the difference between 10 and 11 point is dramatic.
For body copy, I’d choose browser text every time, but for display type, I don’t mind giving up a point or two here and there if it opens me up to the universe of typography.
On this size issue.. Is there any way to just set a specific size in flash like in much older versions of IFR? I would like to start using 2.0 on my site (especially for the inline options) but I can’t deal with the headers always rendering a different size (using the beta, my heading are visibly different sizes.)
I think a “thank you” is in order for all the hard work that’s been done!
Chris, the size is determined based on the dimensions of the to-be-replaced elements. Setting font size from the Flash turns around this idea, forcing the Flash to change its own size, and that’s a can full of worms I’d rather not open.
The idea behind sIFR is to replace styled typography with better styled typography. The difference in size between the “HTML” and “Flash” typography should not be very visible to the user, or that’s what I think.
First: Thanks for sIFR! Great!
Question: Is there a way to change the letter-spacing in the Flash-file?
Hi,
Just wanted to check back and say that it works like a charm now! The speed increase is amazing and all problems with serving it as xml/application are gone with the wind!
Thanks Mike, Mark, Tomas and everyone else for making this wonderful app ;)
Just wanted to say thanks for the development of this text replacement!
I understand the sizing, but when you are working with smaller header (between 10 and 15 pixels) the flash text ends up looking either much smaller or much larger than the text you are trying to replace. I was just curious if it would be possible to more directly set the size of the flash text.
and I agree, thanks so much for the development!
Chris,
You can indeed adjust your text size as you request. This is done with the “decoy” styles. So for instance, let’s say you are replacing a simple H1. Here’s your regular browser text style:
h1 { font-size: 30px; }
If the standard replaced text size isn’t right at this point, you can create a decoy style like so:
.sIFR-hasFlash h1 { font-size: 40px; letter-spacing: -1px }
What happens then is that right before the text gets replaced, the decoy style gets applied to it, thus increasing the font-size and decreasing the letter-spacing (and whatever else you want to do to affect the overall box size). So the net effect is a bigger replaced font.
I’ve actually found a work around for the uppercase link problem. I’ve messed with the dont_customize_me.as file and changed this line:
holder.onRelease = function () {getURL(urlArray[0],targetArray[0]);}
into this one. i guess that for somebody that uses mixedcase urls this won’t work, but it’s OK for me.
holder.onRelease = function () {getURL(urlArray[0].toLowerCase(),targetArray[0]);}
I’ve been following this technique, and I’m really happy you folks created it. I commend you on your beautiful and beneficial work.
I’m just now testing and have run into an oddity that I’d like to share with the class. The line-height attribute significantly impacts the size of the text that Flash renders. But if I use a large line-height, those seeing the text version get an odd result.
Example:
h4 { font: 14px/18px Georgia;…renders the same as…
h4 { font: 34px/18px Georgia;…but…
h4 { font: 14px/38px Georgia;…renders the Flash text much larger.
I found that eliminating the use of line-height solves the issue, and subsequently the font-size attribute works as anticipated. However, I use line-height quite a bit, so this poses an issues for me.
Any thoughts?
You regularly use text with a line-height ~half the size of the text itself? I’m assuming that’s just an extreme example, but it actually suits our purposes well.
What you need to remember is that the Flash text is sized based upon the *box* the browser text would be in, and not strictly the (font-)size of the browser text. Again, at no point are you explicitly telling the Flash text what size to be.
Under base circumstances(no line-height specced), increasing the size of text increases the height of the box it would go into. But when you specify a line-height, you’re partially overriding that, and therefore taking on the responsibility for it. The box will not get any taller until the text is forced to wrap, and when it does, if your line-height is smaller than the font-size, the text will likely overlap. This is because while the container has been forced to grow, the line-height is still the same. Maybe this illustration will help. This is why the Flash text for those two rules looks the same. The size of the box around a chunk of text is the sum of several things, not just the font-size property.
(I think all that junk above is correct. Everyone feel free to poke holes.)
What you need to do first is get your regular text displaying as you want it, and then leave those styles alone. Then use the dummy classes and essentially lie to the sIFR file a bit to tweak the size of the Flash text..
Mike,
Great technique, my only query is how are you keeping the the text hidden when style is turned off?
If I turn style off, but still have javascript on, I still get the flash replacement but also see the original text alongside- I notice that this doesnt happen on this site- how is that so?
Ben, first of all Mike is still using a 1.x version here. Second, there is no way for us to figure out if CSS is disabled. Third, why would somebody disable CSS but not JS?
Hi guys, I’ve just installed the script on this site with good results except for opera. The problem becomes even more weird since on one of my computers it’s working fine while one two of them it’s not. I’m using Opera 7.54 on all three computers.
What happens is that if I just visit that page again, without hitting refresh, the replacements disappear. Try going on it, then click on the logo. On the second visit the flash objects disappear, however on some hovering over the menu, the text only one comes back, the links don’t. If I hit refresh they appear normally, but if I hit Enter in the adress bar they vanish.
I don’t think it’s a problem in my CSS since this happens even with your official example (the newspaper one).
Thanks in advance for any thoughts on this one.
PS: the only thing I can think of for the third computer not experiencing the same behaviour is that it’s the only one not running XP SP2.
PPS: On second thoughs I don’t think so; I just installed Opera 7.54 on Win 98SE and still the same. I’m lost here
Sorry guys, it seems it was caused because I was calling some other JS after the replacement code. Still can’t figure out why one of the computers was not affected.
Hi,
I just wanted to re-iterate some of the comments before, this is a great system and as someone who rather embarrassingly has only just (like about a week ago) started down the compliancy/accessibity route I find this kind of software really exciting.
Being a relative novice to just about all the technologies involved I am having some difficulties integrating it with my CMS. I have decided to build a fully compliant and CSM driven version of my current web site and the sIFR version work in progress can be found here .
My problem has been mentioned before but perhaps due to my lack of knowledge of CSS I am missing something simple. I can get simple headings to work but my CMS generated menu displays in a massive font size with no spaces between the words and only the first link in the list works with the rollover applying to the entire menu.
Any suggestions would be most welcome.
Thanks.
Not sure why my links don’t work but here they are:
current site: http://www.creativefreedom.co.uk
sIFR version: http://www.ssd23.digital-word.com
Thanks
Adrian, I figure the other JS somehow conflicted with the Flash. Flash support isn’t optimal in Opera yet.
Adam, appearantly something’s wrong with the dimensions of the menu items. The size of the Flash is based on the size of the element you are replacing, not the font-size. Also, don’t overuse sIFR. Personally I don’t see much sense in replacing a menu.
I’m new to sIFR, but have been playing with it and it seems fairly straight forward. Kudos to all involved. This is a fantastic achievement.
My question is whether there exists or will be a way in the future to display mixed styles. Can I italicize part of a headline, by embedding <i></i> tags?
For example: My headline Part II
It doesn’t seem to work for me, but maybe I am missing a step? i noticed in the fla that the text area is set to HTML, so I thought it may work.
It would be nice if you could mix in bold, underline, italic. I understand this may be complicated since the FLA probably doesn’t export those styles unless they are embedded as well, so it would probably need to be extended to contain textareas for each style. I realize it can all be italic, or all bold, but I wish to have mixed styles.
Any thoughts on whether this is currently possible, or if it may be available in a future release?
I cant seem to open the flash file using Flash MX 2004? I just get an “unexpected file format”
Do I need to have a copy of Flash 6 to open this file? Or how whould I create one of these form scratch?
Brilliant. I can physically feel barriers lifting as I experiment with this. I think this will have a dramatic impact.
ignore that last comment, I’m just stupid.
Mark, thanks for getting back. Even if I solved my problem by removing all JS after the replacement code, Opera still behaves like that on your example.
Anyway, thanks for a great piece of software.
Adrian, for the record, that’s Mike’s example ;-) Also, I don’t have these problems on my Opera 7.51 on Windows XP Pro (yeah..). I’m using the beta 3 JavaScript code though.
lucky, I just discussed this with Mike, and it would triple the size of the Flash. So I don’t think this is practical.
Mike,
Pardon the late responce to your reply to my comment.
And…
B) Drat!
C) Good to know
Thanks
Can you confirm whether this technique supports lists?
I want to use sIFR for my main site menu. My CMS outputs menu links in a list format but when I encase the ‘list’ in a heading tag that uses sIFR, it displays all the text as one long link with no spacing between the words.
Is there something I have missed in the setup?
Thanks.
Adam, sIFR takes all text content of the selected elements. So, if you replace the <ul> tag all list items end up on one line. You should replace the list items individually.
Also note that you can use a good deal of CSS selectors. You aren’t limited to a header tag. (Small tip here: only use whitespaces when you want to select descendants, don’t use it to seperate words/symbols.)
Hey there,
is there a possibility of making the Flash elements always 100% wide. I know how to in my CSS, but the movie itself needs a certain width i think.
Thanks for the great job so far!
I’m confused.
In v.1 there was this:
/* This goes in the stylesheet to hide the browser text before it is replaced */ html.hasFlash .replace { visibility: hidden; }Simple enough, but I don’t follow what’s going on in the latest version, there are now seperate rules for every element replaced, including rules for letter-spacing?
If any one can explain this to me I’d really appreciate it.
I wanted, first and foremost, to say thanks for all of the hard work which the rest of us are benefitting from. This really is a spectacular leap forward for anyone who is even somewhat concerned with decent typography on the web.
My main implementation question is this: how are we supposed to pronounce “sIFR”? Cypher? Siffer? Maybe the F is silent? Like any good acronym, uttering the individual letters will almost surely make me the object of scorn and ridicule amongst practicing professionals and enthusiasts alike. Imagine if I actually verbalized the letters “S-Q-L” to a database engineer… I shudder to think.
I’m not terribly concerned with validation or elegant code, but if I fall even minutes behind on what the kids are saying these days, then I have failed as a designer, and as a person. My apologies in advance if this pressing topic has been addressed already.
Never mind, I’ve figured it.
BTW this rules, can’t wait to use it
Wow. This looks great, just what I’ve been looking for.
I somehow stumbled upon this .. Not sure how – Just following the endless trail of blogs and trackbacks.
I had actually been considering using SVG to do a similar kind of thing (since it also uses CSS), does nice text, scales well, and can have effects such as drop shadows applied.. However browser support just isnt there unlike flash, which my site will be using anyhow.
NJ ;)
David
Klaus, the movie needs pixels. If you specify 100% in the CSS sIFR should pick it up just fine though.
David, personally I pronounce it as “siffer”.
I am also seeing some differences in text size with sIFR. I have stripped down my style sheet to the very basics text sizes
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 18px; }
h4 { font-size: 14px; }
but IE seems to display the text size at a very different size compared to Gecko/Safari based browsers. I am using Myriad Pro which I thought would be a nice wide font to avoid some of these issues but it does not seem to make much of a difference. http://business-edge.com/solutions/printdesign.asp
i feel like an idiot asking, but is there a simple instruction on how to use it? i see theres some stuff in the code of the included index.html but im just a beginner trying to learn all of this stuff. i can follow some of it, but it would be nice to just have a stripped down instruction set.
sorry if thats a dumb question :(
…. particularly which styles are necessary.
i just would like to see something that instructed the user on what is absolutely required, and where the designer has room to experiment.
I am closing this thread because sIFR 2.0 is now out. Read about it and download the new files here.
sIFR – Typography for the Masses
I’ve started using the sIFR technique on the rest of this site and will be adding it to the weblog portion shortly. The scalable Inman Flash Replacement technique allows us to easily replace portions of the text on each page with a Flash movie. This al…
V2 Up and Running
V2 of this (sub)site is finally up and running!
At first I was relcuctant of putting this design up due to the font I’m using for titles. The font is the free Cool Air Conditioner wich adds a realy slick retro look but plays havoc with layout. It’…
The Secret Is Out
So I’m a little late.
Who cares? The secret is finally out.
I promised 7 days, but it took a little longer. In reality, this redesign has been a few weeks in the making, and I’ve been working on different concepts for at least a couple of mont…
Flash Blog
“FlashBlog”http://www.flashblog.org/ es una inciativa para realizar un sistema publicador de weblogs que utilìza Flash para el frontend y Php/MySql en el backend. La idea de entrada me parece buena, pero creo que luce demasiado como…
sIFR 2.0b2 (update)
sIFR has been updated to Scalable Inman Flash Replacement 2.0b2. sIFR, in case you don’t know, is a way to replace text in HTML with your favorite font embedded in flash. Mostly used for headlines so don’t got font crazy!
:heart:
btw: I’m s…
Æß – ÇØ¿Ü CSS Å×Å©´Ð ¹®¼ ¸ðÀ½
ÇØ¿Ü CSS Å×Å©´Ð ¹®¼ ¸ðÀ½
Ä«Å×°í¸®:
Webtech/CSS/XHTML
No Design
Generated Content – Westciv
Whatever:hover – Peter Nederlof New
ºí·Î±×, À¥Áø
456 Berea Street New
White Space New
A List Apart New
Andy Budd New
Web Graphics New
Simple Bits Ne…
[…] the coolest thing to hit the web since Flash itself. sIFR allows for complete control of typography, regardless of what fonts are installed on a user’s […]