Forum Moderators: open
One other way would be using CSS and absolute positioning to fix the starting spot for each word. That's possibly just as detailed and frustrating a process, and not as backward compatible as the 1x1 px gifs would be.
As far as I know, there's no really elegant way to do this, like defining a curved margin or something like that.
Here's a simple example, using CSS.
<html>
<head>
<style type='text/css'><!--
.c { font-family:sans-serif; font-size:18px; color:#3333ff; background:#cccccc; padding:10px; }
#c1 { position:relative; top:0px; left:0px; }
#c2 { position:relative; top:-2px; left:0px; }
#c3 { position:relative; top:-4px; left:0px; }
#c4 { position:relative; top:-6px; left:0px; }
#c5 { position:relative; top:-8px; left:0px; }
#c6 { position:relative; top:-10px; left:0px; }
#c7 { position:relative; top:-12px; left:0px; }
#c8 { position:relative; top:-12px; left:0px; }
#c9 { position:relative; top:-10px; left:0px; }
#c10 { position:relative; top:-8px; left:0px; }
#c11 { position:relative; top:-6px; left:0px; }
#c12 { position:relative; top:-4px; left:0px; }
#c13 { position:relative; top:-2px; left:0px; }
#c14 { position:relative; top:0px; left:0px; }
--></style>
<script type='text/javascript'><!--
//--></script>
</head>
<body>
<div class='c'>
<span id='c1'>W</span>
<span id='c2'>E</span>
<span id='c3'>B</span>
<span id='c4'>M</span>
<span id='c5'>A</span>
<span id='c6'>S</span>
<span id='c7'>T</span>
<span id='c8'>E</span>
<span id='c9'>R</span>
<span id='c10'>W</span>
<span id='c11'>O</span>
<span id='c12'>R</span>
<span id='c13'>L</span>
<span id='c14'>D</span>
</div>
</body>
</html>
