CSS: Text Drop Shadows
I recently published one of my mad experiments, CSS: Text Shadows (see the experiment page itself) and I linked to one of the best solutions I found on the web when doing some research. The innovator, Scott Jehl, got in touch with me to explain the merits of his method. He was very reasonable and appreciated what I had done so I decided to post here to have some open dialog (I will invite Scott to give his views in full). And I’d like to hear from others as well.
It’s very unlikely anyone would want or need to offer text shadows, at least not until the CSS3 text-shadow property is actually supported widely — even though Scott actually had a good example of a cool implementation that makes some sense, but I’m interested in what others have come up with. I did some research on it, but I didn’t look at every example on the web — some were really bad and made my head hurt.
Originally I wanted to use the CSS “content” property to apply the replicated content only if CSS was supported, but due to a lack of support that wouldn’t due. I tried scripting solutions as well but they all had flaws. This experiment actually drove me nuts so I came up with my own workaround — more out of stubbornness than anything else — but it’s not that great either. I’m thinking the web just isn’t ready for text drop shadows yet. 
So what have you come up with. I want to see text that’s resizable. Feel free to post links to experiments or examples. I’ll moderate quickly provided it’s to text that resizable, not male anatomical appendages. Also, how about doing away with replicated content… have you succeeded so screen reader users don’t have to hear it twice, hear it twice?
Mike Jolley responds:
Posted: September 17th, 2006 at 6:40 am →
Ive never used them, and I dont have a screenreader, but cant the aural properties be used to avoid reading the replecated content?
http://www.w3.org/TR/REC-CSS2/aural.html
speak:noneAgain, i have no idea of the support for this, but just a thought.Mike Cherim responds:
Posted: September 17th, 2006 at 8:33 am →
Mike, you are absolutely correct. That is a brilliant solution! Instruct the aural media type to simply not say it. Out-freaking-standing
Mike Jolley responds:
Posted: September 17th, 2006 at 3:44 pm →
I got it? Awesome lol
Scott Jehl responds:
Posted: September 17th, 2006 at 4:37 pm →
Hi Mike, Thanks for the credit - I’ll put my original thoughts in here and then a quick response to Mike J.
–Scott Jehl
Original comments:
While your example has the advantage of working without JS, the need to physically duplicate markup in the source presents issues of practicality. I admire your creativity in reworking the content to flow when unstyled, but obviously that would only work in a few situations. In the scripted method, the script itself is not doing anything terribly complex. The beauty of it is that the source is free from presentational markup, which is what the duplicated markup is, essentially. Instead, the targeted element requires only a class name that the script will recognize upon running its course, duplicate its inner content, and give that duplicate a class name that’s
ready to style with css.
It has its downfalls, no doubt, such as requiring JS to essentially acheive a presentational effect. But I think leaving the duplication to the dom scripting rather than in the markup itself, is probably a decent separation of layers.
Regardless of the technique used, like you said, duplicated markup presents problems in accessibility; js-enabled text browsers and screenreaders get the content twice, which sucks. So use of these techniques beyond just a
short headline (ie: bodycopy) would open up some serious accessibility issues. I’ve looked into preventing these devices from seeing the text but haven’t come up with much.
I actually started out by trying the :before pseudo-element with its content property grabbing the element’s title attribute and styling that as a shadow. But since pseudo-elements are about as well supported as the text-shadow property, it didn’t help much. For example, something like:
<h1 title="Today's News">Today's News</h1>Combined with:
h1{color: black; position: relative; left: 1px; top: 1px;}
h1:before {content: attr(title); position: absolute; color: red; left: -1px; top: -1px;}
It only worked in safari and oddly enough, the pseudo-element would always stack on top, so I styled it as if it were the regular text, and the element is styled as the shadow.
It’s really unfortunate that certain browsers require such ridiculous workarounds to achieve such a common design technique.
Re: Mike J
Good idea with the speak property, unfortunately it looks like most browsers don’t support any of the aural styles.
Similar attempt - since I’ve found that screenreaders generally don’t see elements set to
display:none, in testing I had tried to hide the duplicated text with display and filter it with the “reader” media type. Unfortunately, that media type isn’t really supported yet either.A possibility may be to detect for a screenreader prior to running the script, but detecting a reader with something like this seems a bit overkill for a drop shadow effect. Could be done though I guess.
Thoughts?
–Scott
John Faulds responds:
Posted: September 17th, 2006 at 10:44 pm →
Just thinking aloud because I haven’t tried it but maybe incorporating the text and shadow into an in image and then using image replacment with an SWF is an option? You only need to include the text in the source once and a SWF can be resized with the text size, an example is the header on Nick Cowie’s site.
Mike Cherim responds:
Posted: September 17th, 2006 at 11:41 pm →
That’s a nice example, John. I rarely see resizable imagery look so good when displayed outside its native size. Personally, until the shadow text property, I doubt I’d use anything but imagery to create text shadow effects. Moreover, with imagery, the effect can look so much more natural with a nice feathered shadow. In Scott’s case, though, his need for replaceable, dynamic content his method really met his needs well.
Regarding aural styles, I think the best way to go is to actually supply an actual aural CSS to get the required support. For detection, something like this PHP method could probably serve the purpose, I’d just need to get the right info to create a code block covering the top screen readers (though I’d have issues with Opera’s reader since the distinction between visual and aural rendering couldn’t be resolved… I don’t think so anyway).
Scott Jehl responds:
Posted: September 19th, 2006 at 6:04 pm →
I wonder though, if that php script or something similar could detect a reader, or instead just the browser that it’s assisting. In my experience readers such as windoweyes just run right on top of IE. Maybe they do identify themselves somehow, if so I’d be interested if in hearing about it.
Katalog responds:
Posted: September 30th, 2006 at 11:04 pm →
Superb article, but there is somebody who already has test for IE6, Opera and Firefox?
Mike Cherim responds:
Posted: September 30th, 2006 at 11:14 pm →
Not sure Katalog.
Anthony Brewitt responds:
Posted: October 2nd, 2006 at 4:48 am →
Really interesting ideas, and I liked the idea of Mike Jolley’s solution. The text replacement also seems a way forward. I have never come across Scotts method before and found it very interesting, thanks. Bring on CSS3!