Help - Search - Members - Calendar
Full Version: Is There A Way To Outline Text With Html?
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS
k.digennaro
Is there a way to use the text below using just HTML? all it is, Font: Arial Black, color white, outlined in black 1px. Is there a code to add an outline around the text in html? The reason I want to use html instead of images is A)loads quicker and cool.gif images dont get crawled by search engines as 'text'

Example Here
Andrew
I think I've seen ways to do this before, but I can't remember how. You may want to look into Sifr for using any font as headlines or nav areas, it makes the text a flash video, and uses whatever font you want (and is visible the same on all computers) and with Googles ability to crawl flash images now it would be a viable option.
http://www.mikeindustries.com/blog/sifr/

An alternative would be to use images with alt text so that it still has the same text even when the image isn't being loaded.

edit: added link to Sifr
k.digennaro
thanks trippin, ive heard good and bad things about Sifr, some one told me its incredibely complicated to use. Is this true?
Andrew
I actually have no idea, I've only heard of it, never put it to use.
k.digennaro
hmmmm, do you just use the web fonts then? or do you use your fonts as images? Just curious, looking for the best way to do fonts
Andrew
I personally only use graphical fonts in header images, everything else I just use a basic font everyone would have on their computer.
k.digennaro
okay, that's wat ive been doing, i wish there was a better way in html to modify fonts, i guess it makes sense why its hard to, because ther are so many variables, for instance just taking Times New Roman and adding a drop shadow or something.

I read into Sifr a little, it just seems so complicated for what you get in the end. I like the alternative text idea I didnt really think about that. Is there a way to disable the alternative text so that it exists, but when you hover over an image it doesnt appear?
Andrew
I don't think so.

You really got me wondering about a text outline with html, and I came across a post on a forum that said to have two layers of text on top of each other, one slightly smaller. That would do what you want. Just don't know what it would look like (there was no example on the forum, or any code to help, just the idea)

Found this too, http://www.webdeveloper.com/forum/showthread.php?t=61999
k.digennaro
Nice finds trip. The layering thing makes a ton of sense, I tried it out and didnt have any luck, have you tried it? If so can i see the code?

The code for the outline is cool, but it doesnt look like it works in firefox.


Thanks again,
Kevin
Andrew
i just tried but when you make one font bigger it makes the whole line bigger and won't match up.
k.digennaro
thats wat happened with me too o well lol
prixat
heres a page to get text shadow working across browsers.

http://www.workingwith.me.uk/articles/css/...er-drop-shadows
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.