Text outline

[King of Red Lions]

Is there any way, maybe using CSS, to create an outline on text? Thanks in
advance.

 

[Jim Roberts]

"King of Red Lions" wrote...

Is there any way, maybe using CSS, to create an outline on text? Thanks in
advance.

I suppose one could overly the same text of a slightly larger font-size.
That would yield an outline effect.

Is that what you meant?

Regards,
Jim Roberts

 

[King of Red Lions]

Jim Roberts fell into a slight daze and imagined the following:

"King of Red Lions" wrote...

I suppose one could overly the same text of a slightly larger font-size.
That would yield an outline effect.

Is that what you meant?

Regards,
Jim Roberts

It is indeed. Thankyou for that suggestion. I will try it, shame there's
not a ccs option for this though. Oh well thanks very much.

 

[Jim Roberts]

"King of Red Lions" wrote...

Jim Roberts fell into a slight daze and imagined the following:

It is indeed. Thankyou for that suggestion. I will try it, shame there's
not a ccs option for this though. Oh well thanks very much.

I bet if there were, IE wouldn't support it. Just like text-shadow.

I know there are techniques for doing CSS text shadows that work in Internet
Exploder. A text outline would basically use the same method. Might try a
google search.

Regards,
Jim Roberts

 

[Mitja]

"King of Red Lions" wrote...



I bet if there were, IE wouldn't support it. Just like text-shadow.

I know there are techniques for doing CSS text shadows that work in Internet
Exploder. A text outline would basically use the same method. Might try a
google search.

yup... have a look for the "filter" property. Doesn't support the ouline
directly though, may find "glow" useful.

 

[Jim Roberts]

yup... have a look for the "filter" property. Doesn't support the ouline
directly though, may find "glow" useful.

I haven't fooled around with IE's filter property too much. I tend to stay
away from the proprietary features. Originally, I meant techniques that
would be cross-browser compatible. Offsetting the same text to make shadows;
things like that. If I really need fancy text, I usually just make an image.
I still include the actual text in a span element and set the display:
hidden. This will allow speech enabled browsers to read the text.

Regards,
Jim

 

[SpaceGirl]

I haven't fooled around with IE's filter property too much. I tend to stay
away from the proprietary features. Originally, I meant techniques that
would be cross-browser compatible. Offsetting the same text to make shadows;
things like that. If I really need fancy text, I usually just make an image.
I still include the actual text in a span element and set the display:
hidden. This will allow speech enabled browsers to read the text.

Regards,
Jim

Its proprietary features *are* available on 90% of the worlds browsers
though

 

[Jim Roberts]

"SpaceGirl" wrote ...

Its proprietary features *are* available on 90% of the worlds browsers
though

Yeah, I know. There are still the other 10% to think about though. I suppose
I'm biased because I use Firefox. Plus, IE makes me so angry sometimes! I
guess no browser is perfect. Even if MS would fix all the things that people
hate about Internet Explorer, you would still have to worry about all the
users who have older versions.

Maybe I'll have another look at those proprietary features. I wouldn't be
taking anything away from people who don't use IE, just adding things for
the 90%(?) who do.

Cross-browser compatibility gives me a headache... I think I'll start just
making text websites, lol.

Take care,
Jim

 

[Nik Coughin]

Is there any way, maybe using CSS, to create an outline on text?
Thanks in advance.

Sort of. I've done it before, as an exercise to see if I could do it, and
came up with this:

http://homepages.ihug.co.nz/~nrkn/outline.html

I don't think it's practical though, for two reasons:

1. I relied on absolute positioning to offset the outline. Don't know how
you would do this with text when you don't know exactly where it's going to
start. Maybe something to do with relative positioning would help, don't
really know enough about it -- sorry.
2. When you resize the browser it sometimes wraps the outline text
differently to the foreground text, which looks terrible. You could advoid
this by not having an outline on the right hand side, but this wouldn't look
too good either, IMO.

It's fine for things like overlaying captions on photos though, which is why
I originally wanted to do it -- given a random photo, you never know what
color the text is overlaying, possibly the text and background are the same
color and you can't read the text. Outlined text is one way of getting
around this.

 

[mikewandling]

Yes!

I know this is an old thread, but I ran acrtoss it in my searches and figured someone else would to. There is a way, using only HTML and CSS to do true text outlines (not boxes around a piece of text). I posted all about it on my blog at mike.thosewandlings.com. So far it's the best method I've found. There are others that are complicated, unreliable and not cross browser functional. My method works on all browsers, the same way.

I'm guessing it's the same method as Nik is talking about, but his link is dead. I didn't have any of the problems he was talking about, absolute positioning works fine if you put all of your text in a containing div, that way it is positioned inside of that and isn't affected by anything else. A fixed pixel width takes care of the text wrapping problem as well.