An issue came up in a Design Shack post about fancy font effects: the tutorials offered by the poster don't work in IE. The good news for designers is that there is code that we can use so IE users aren't stuck with plain, boring font effects.
Cross browser complications
I love CSS3, and ever since I discovered it, I have been using it in my designs as and when the opportunities arose. Clients love the rounded corners, gradients and shadowed effects that they saw on my screen, but all too often I forgot they were stuck with older IE browsers, so couldn't see the fancy effects on theirs.
The same goes for the cool Dynamic Drive and other JavaScripts I've used for slideshows and other items: IE flat out doesn't like them. They work best on Webkit or Gecko browsers such as Firefox and Chrome.
IE workarounds
Thankfully, some kind souls have made code available for us so we can add the pretty shadows and imprint designs that Design Shack showed us to our designs, and IE users can see them almost as well. Usually, you have to use some messy JavaScript to get around the sheer ugliness of IE text and CSS rendering (or not. Don't get me started!), but designers Neil Crosby, Kilian Valkhof, and Zoltan “Du Lac” Hawryluk have given us code that works on older IE browsers to create pretty text effects for our designs without clogging up browsers with excess information.
Neil Crosby, 2005
This is particularly relevant because his code is guaranteed to work on IE 6 because IE 7 was released more than a year later. His method requires a page's worth of code, which would have to be linked within the page <head> tags as something like
<link rel="stylesheet" href="shadow-text.css" type="text/css" />
to save on page loading time.
It's important to note that earlier versions of IE are still widely used because its users either can't or won't upgrade. IE 9 requires a new operating system, but even IE 8 sucks at rendering CSS 3 properly without workarounds.
Kilian Valkhof, 2008
After experimenting with jQuery plugins to make text-shadows work in IE that only work in IE, but as the man himself said,
"...it just doesn’t look as good as native text-shadow support in the other browsers. It works pretty well for average-sized text-shadows, but it falls apart on smaller or larger sizes."
Kilian decided to create some code that would work on any browser. Here it is:
<style type="text/css">
/* regular styling stuff */
h1 {font:18px/1.5em Arial, Helvetica, sans-serif;color:#000;}
p, ul {font:12px/1.5em Arial, Helvetica, sans-serif;color:#000;}
.shadow {
/* pretty browsers*/
text-shadow:#000 0px 0px 5px;
/* ugly ie */
zoom:1;/*force hasLayout*/
position:relative;/*fot absolute position of child element*/
}
.shadow span {
/* position correctly */
position:absolute;
left:-7px;top:-7px; /* strength + pixelradius */
z-index:-1;/* force under the normal text */
/* the magic: filters */
filter:
progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')
;
zoom:1;/*force hasLayout*/
}
.knockout {color:#fff}/*same as background colour for knock-out effect*/
.knockout span {
filter:
progid:DXImageTransform.Microsoft.Glow(Color=#666666,Strength=2)/*make it a bit darker for contrast*/
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')
;
}
</style>
All you need to do is add span classes where you want the effects to go, and it works well in all the major browsers. Kilian says,
"The above should work in:
- Safari (supports text-shadow)
- Opera 9.5 (supports text- shadow)
- Internet Explorer 5.5+
- Konqueror (supports text-shadow)
- iCab (supports text-shadow)"
Zoltan Hawryluk, 2011
Since I don't have IE 9 due to the need to buy a new computer to implement it (buying the new operating system would cost about as much, so I might as well), I'll have to take Zoltan's word for it that even the latest release doesn't have support for CSS3 effects like border-image and text-shadow. In other words, I'm not missing much.
In his article, CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?, Zoltan gives us a range of effects that can be produced using Microsoft's visual filters that work in the older IE versions. The trouble is, the ClearType default in IE browsers messes them up. However, using a range of codes provided by Neil Crosby, Kilian Valkhof and Paul Irish, he found a way to overcome this obstacle to provide is with decent-looking text-effects.
Cufón
Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. I mostly use it on WordPress to provide me with fancy fonts for headings and special text. It's not perfect and only seems to work properly when used with an application that allows and supports the plugin. On its own it isn't terribly effective, in my experience. Results are patchy and text is jagged on some browsers.
Font Squirrel
I'm using Font Squirrel's @font face kit on the website for non-IE browsers. It works perfectly with beautiful results. On IE the HTML pages look okay but on the gallery and blogs the text looks eroded and is hard to read so I've had to fall back to Verdana, Arial, sans-serif.
Google Fonts
Google offers a wide variety of free web fonts that look fantastic on the page. On my websites I've found that it produces ugly results with the fonts I want to use. It's okay on Creative Hive and If Wishes Were Horses but I've tried it here and it didn't work out. There's a plugin for WordPress that I tried on Practical Digital but it looked so awful I went with Cufón instead.
Conclusion
Until Internet Explorer gets its act together and fully embraces web standards for CSS and HTML, it looks like we'll have to use JavaScripts when we're not using workarounds or resorting to images to make our text effects work on all browsers equally.
No comments:
Post a Comment