Let's say I have white characters and I want a black outline over each character (this is different from outlining the whole text box).
What is the code to make this outline ?
EDIT: Well bummer, I'm not asking for a whole document. All I want is the one line of code and the needed parameters to create an outline for text. I don't feel the need to post code as it is really just a simply request.
I have tried using text-outline: 2px 2px #ff0000; but this is not supported across any major browsers.
Scope :
function createTitleLegend() {
legendTitle = document.createElement('div');
legendTitle.id = 'legendT';
contentTitle = [];
contentTitle.push('<h3><font size="16">TM</font></h3>');
contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');
legendTitle.innerHTML = contentTitle.join('');
legendTitle.index = 1;
}
I have tried using outline within the font, as well as a class and div. None works. The bruteforce approach doesn't seem to work either.
Yet another EDIT:
This is the key line where I want the outline.
contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>');
Before I apply the outline, the string is written in one line. After I apply the outline, we have 3 different lines of text.
contentTitle is a legend in a Google Maps where the text align is at the center. That sentence that is being pushed uses two different type of fonts, one for the words and one for the number. In the event that I apply a text shadow with a div, that creates a new line. I know the normal solution for keeping everything in the same line is the use of float. However if I float, nothing is centered anymore.
Maybe I'm not floating correctly, but I've tried both div style=float and class="float" thus far.
With HTML5's support for svg, you don't need to rely on shadow hacks.
<svg width="100%" viewBox="0 0 600 100">_x000D_
<text x=0 y=20 font-size=12pt fill=white stroke=black stroke-width=0.75>_x000D_
This text exposes its vector representation, _x000D_
making it easy to style shape-wise without hacks. _x000D_
HTML5 supports it, so no browser issues. Only downside _x000D_
is that svg has its own quirks and learning curve _x000D_
(c.f. bounding box issue/no typesetting by default)_x000D_
</text>_x000D_
</svg>Try CSS3 Textshadow.
.box_textshadow {
text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
Try it yourself on css3please.com.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">_x000D_
<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
<head>_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />_x000D_
<title>Untitled Document</title>_x000D_
<style type="text/css">_x000D_
.OutlineText {_x000D_
font: Tahoma, Geneva, sans-serif;_x000D_
font-size: 64px;_x000D_
color: white;_x000D_
text-shadow:_x000D_
/* Outline */_x000D_
-1px -1px 0 #000000,_x000D_
1px -1px 0 #000000,_x000D_
-1px 1px 0 #000000,_x000D_
1px 1px 0 #000000, _x000D_
-2px 0 0 #000000,_x000D_
2px 0 0 #000000,_x000D_
0 2px 0 #000000,_x000D_
0 -2px 0 #000000; /* Terminate with a semi-colon */_x000D_
}_x000D_
</style></head>_x000D_
_x000D_
<body>_x000D_
<div class="OutlineText">Hello world!</div>_x000D_
</body>_x000D_
</html>...and you might also want to do this too:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">_x000D_
<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
<head>_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />_x000D_
<title>Untitled Document</title>_x000D_
<style type="text/css">_x000D_
.OutlineText {_x000D_
font: Tahoma, Geneva, sans-serif;_x000D_
font-size: 64px;_x000D_
color: white;_x000D_
text-shadow:_x000D_
/* Outline 1 */_x000D_
-1px -1px 0 #000000,_x000D_
1px -1px 0 #000000,_x000D_
-1px 1px 0 #000000,_x000D_
1px 1px 0 #000000, _x000D_
-2px 0 0 #000000,_x000D_
2px 0 0 #000000,_x000D_
0 2px 0 #000000,_x000D_
0 -2px 0 #000000, _x000D_
/* Outline 2 */_x000D_
-2px -2px 0 #ff0000,_x000D_
2px -2px 0 #ff0000,_x000D_
-2px 2px 0 #ff0000,_x000D_
2px 2px 0 #ff0000, _x000D_
-3px 0 0 #ff0000,_x000D_
3px 0 0 #ff0000,_x000D_
0 3px 0 #ff0000,_x000D_
0 -3px 0 #ff0000; /* Terminate with a semi-colon */_x000D_
}_x000D_
</style></head>_x000D_
_x000D_
<body>_x000D_
<div class="OutlineText">Hello world!</div>_x000D_
</body>_x000D_
</html>You can do as many Outlines as you like, and there's enough scope for coming up with lots of creative ideas.
Have fun!
There are some webkit css properties that should work on Chrome/Safari at least:
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
That's a 2px wide black text outline.
from: Outline effect to text
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Source: Stackoverflow.com