StylizedWeb is a blog about web trends and tutorials, KnowHow community forum designed and maintained by Dejan Cancarevic who also runs Serbian IT job board at itPoslovi.info

add to

During my work as frontend coder I had a task to place some white text on dynamic background image and the problems would accrue if background image was white so text wouldn’t be readable. This isn’t really every day requirement but it can be very useful. The solution I’m using is outline text JS, originally written by Anthony Ryan Delorie.

You can use this JavaScript in two ways, to outline text and to add shadow to text. It works in all major browsers. Click here for demo.

Outline

 
<script>
<!--
 
var message="outline";
var thickness=1;
var color2="black";
var color1="white";
var extra="font-size:40px;";
var x = -thickness;
var y = -thickness;
 
while (y<=thickness) {
while (x<=thickness) {
 
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");
 
x=x+1;
}
y=y+1;
}
 
document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");
 
//-->
</script>
 

Shadow

 
<script>
<!--
 
var message="Shadow";
var range=2;
var extra="font-size:40px;";
var color1="gray";
var color2="black";
var x = range;
var y = range;
 
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute\; left:"+x+"; top:"+y+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");
 
//-->
</script>
 

Both

 
<script>
<!--
 
var message="Both";
var thickness=1;
var color2="black";
var color1="white";
var color3="gray";
var extra="font-size:40px;";
var range=5;
var z = range;
var d = range;
var x = -thickness;
var y = -thickness;
 
while (y<=thickness) {
while (x<=thickness) {
 
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");
 
x=x+1;
}
y=y+1;
}
 
document.write ("<span style='"+extra+" color:"+color3+"; position:absolute\; left:"+z+"; top:"+d+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");
 
//-->
</script>
 

NOTE: It’s not working when doctype -> XHTML 1.0 is included

What Now?

Digg this
Save to Del.ico.us
Stumble This
Subscribe
Leave a Comment

Further Reading

• Horizontal layout trends
• Blazing Fast Xen VPS Servers Giveaway!
• Amaizing WordPress hacks part 1
• Grab data from WordPress database
• Useful WordPress Tricks

More?

Posted on 13. 01. 2008
Filed as Design, Javascript
By Dejan Cancarevic