views:

480

answers:

2

I have a need for text-shadow for inline, long, paragraph text in IE. I understand progressive enhancement, but the situation is different. I do absolutely need text-shadow, it's not a design issue, but a matter central to the function of my app.

In any case, IE does not support CSS text-shadow. What are some alternatives? I know that some fonts have outlines that creates a similar effect as text-shadows, but does IE support web-unsafe fonts?

What about dynamic image replacement? Is that a viable tactic? I'm thinking probably not, considering the length of the text.

Does anyone have any suggestions? I've also considered forcing google chrome frame, but that's sort of a last resort thing if there are no other viable strategies.

Thanks.

A: 

I think that here, with your core requirements, Flash is your best best. I'm not sure if SIFR supports shadow, but that's worth looking into.

It's certainly a cheaper burden on your users than forcing Chrome frame.

EDIT:

Looks like SIFR is quite flexible on this front:

http://fortysevenmedia.com/blog/archives/sifr%5F3%5Fhard%5Fdrop%5Fshadows/

Even more promising, unless I'm mistaken, it looks like it may be supported in IE:

http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx

so:

.className {
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
spender
Would be amazing if this works, but I think I tried this previously but found that it doesn't work correctly for inline elements. Will try again, thanks. I really see the advantages of flash, but the lack of mobile support is really annoying there.
Charuru
Unfortunately I don't believe this works on inline elements. But thanks for your help.
Charuru
A: 

Hi

I think you should use a true type font(.ttf) font and convert it to .eot. Then referance it in your html via java script likes this:

<style type="text/css">
@font-face {
 font-family: MyCustomFont;
 font-size:10.0pt;
 src: url("fontname_free.eot");/* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 font-size:10.0pt;
 src: url("fontname_free.ttf") format("truetype");/* TTF file for CSS3 browsers */
}

Then in your actual html you make reference to the font in the style attribute like this:

You can convert from .ttf to .eot here and find further explaination on how it workd http://www.kirsle.net/wizards/ttf2eot.cgi

Yo Momma