Outline text with JS

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

Have some feedback? Leave a comment