Outlining characters in css

I am preparing the header text layout and was just wondering if anyone knows a way to outline characters without using a graphic image?

If you don’t mind it not working in IE8, go with text-shadow.

Wow, that’s pretty cool. Thanks

And if you do need it to work in IE (which doesn’t even work in IE9, grrr) you could try some JS (although I think IE users don’t deserve it!):



[font=verdana]Just to add – with regards to the question of “whether you need it to work in IE”, you need to consider whether the text is readably without the shadow/outline.

If you’ve got white text on a white background, but you use text-shadow to give it an outline and make the letters visible then you definitely need to put something in place for IE-users (whether you go for a scripted solution or a different stylesheet that puts the text in a different colour).

On the other hand, if you’ve got sufficient contrast between the text and the background that it will be visible without the text-shadow then it just comes down to aesthetics – how much do you care about IE users seeing the page exactly as you intended it? Or can they make do with the letters plain and unadorned? That’s up to you.[/font]

Actually I tested it using Greek as well and it works nicely using arial. Microsoft should just throw away their IE program.
Thanks everyone.

Or simply…
Use text shadow for non IE, and include a conditional comment setting the text color to a readable version. No JS needed.
This is not future proof tho :confused:

[font=verdana]Is that not pretty much exactly what I said? :confused:

If we knew at what point IE would support text-shadow then you could make it future-proof, by including a max version in the conditional comments, but if we’re relying on guesswork then that might go wrong … it would be safer to leave it as all versions of IE until we get a version of IE that supports it, then try to remember every site where you’ve used conditional comments in that way and go back and edit the conditional comments to have a max version.[/font]

It probably doesn’t matter, as CCs will not be supported beyond IE9 (or is it 8?), and IE10 is supposed to support text shadow.

Hey Ya’ll how about “text-stroke”

It’s not much use outside of Webkit just yet, but certainly another one to look forward to.