3

All browsers, with the exception of Internet Explorer (even the IE9 beta, apparently) support text-shadow, and additionally, webkit browsers seem to understand -webkit-text-stroke. But how to emulate text stroke in Internet Explorer? I've had a look at the available filters and it seems to me that none can be used to simulate this, apart maybe from Glow, but it creates a blurry glow, not a solid outline.

Is there any way to achieve this using CSS and/or Microsoft filters/behaviours and/or JavaScript?

I don't need the solution to work in ancient versions of IE, my layout isn't going to be optimised for IE7 or earlier.

mingos
  • 23,778
  • 12
  • 70
  • 107

2 Answers2

7

I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.

This is a combination of using CSS3 text-shadow, which has good support except IE (http://caniuse.com/#search=text-shadow), then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.

IE Filters

The glow filter (http://www.impressivewebs.com/css3-text-shadow-ie/) looks terrible, so I didn't use that.

David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.

I then combined some of the elements suggested on useragentman with the dropshadow filters.

Putting it together

This example would be black text with a white stroke. I'm using conditional html classes by the way to target IE.

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}
crdunst
  • 1,034
  • 9
  • 16
  • This is working great for me. Up voted but the white is so sketchy and not sharp :/ – Si8 Feb 26 '14 at 14:40
  • Have you tried changing the textshadow and IE offsets to 2px? – crdunst Feb 26 '14 at 14:48
  • Won't it be even thicker white? I was looking for the same stroke as the FF. I know it might not be exactly but close enough. – Si8 Feb 26 '14 at 14:49
  • Yes it will make it thicker - I wasn't sure what you mean by 'sketchy', I thought you meant partially missing on the outline. It's virtually impossible to have all browser versions looking the same using pure css, especially earlier IE. IE10 and 11 look fine in my experience, and I compromise on earlier versions of IE - if it doesn't look perfect it's no big deal, the above solution is as good as I've managed to get it on <=IE9 – crdunst Feb 26 '14 at 14:57
  • I agree and your method is the only one that is working for me so far. I guess it's because I am using a comic font so some area the white extends out more than other part of the text. – Si8 Feb 26 '14 at 15:03
2

There's this here that I dug up from a while back: http://jsfiddle.net/kovalchik/yJff9/

I can't test if it actually works or not though since I'm using a mac at the moment. It looks like a bit of a dirty hack as well. But it might be worth a try :P

David Hewitt
  • 829
  • 4
  • 13
  • Wow, this is an interesting thing. I was unable to chain the Shadow filter, as the second one seemed to override the first one. Guess it works with Dropshadow. Cool, thank you very much! – mingos Dec 31 '10 at 02:40