HTML Markup

[DAMINK]

Hey guys and gals.
Just a quick question i hope someone can help me with.
I want to make some fancy usernames for some members of my forum.
Now as it currently stands we cant really use html markup for it based on character limits.
So i resort to using additional css which works well.
However how would i go about changing each letter of someones name?
Now obviously this will not fit in html markup. (prob not the correct code either just an example really)

<span style="color: rgb(255, 0, 0);">D</span>
<span style="color: rgb(204, 0, 0);">A</span>
<span style="color: rgb(153, 0, 0);">M</span>
<span style="color: rgb(102, 0, 0);">I</span>
<span style="color: rgb(51, 0, 0);">N</span>
<span style="color: rgb(0, 0, 0);">K</span>

So how exactly could i do this with additional css?
Can it even been done through additional css?
Any help to point me in the correct direction would be great.

[Sarteck]

Not sure if you wanted something like this, but this is what I've got.

On a fetch_musername hook, I've got a plugin with the following (more or less):

PHP Code:


if (!function_exists('zebra_text')) {function zebra_text($text)
{
  $ret = ''; $white = true; $textlength = strlen($text);
  for ($i=0;$i<$textlength;$i++)
    {$fgc = ($white)?'#FFFFFF':'#000000'; $bgc = (!$white)?'#FFFFFF':'#000000'; $white = !$white; $ret .= '<span style="color:'.$fgc.';background-color:'.$bgc.'">'.$text[$i].'</span>';}
  return $ret;
}}

if (!function_exists('spastic_rainbow_text')) {function spastic_rainbow_text($text)
{
  $text = str_replace("'","\'",$text); $len = 16; $base='123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; $max=strlen($base)-1; $randstr=''; mt_srand((double)microtime()*1000000);
  while (strlen($randstr)<$len+1) {$randstr .= $base[mt_rand(0,$max)];}
  $output = '
<span id="spastic_rainbow_container_'.$randstr.'">'.$text.'</span>
<script type="text/javascript">
set_as_spastic(document.getElementById(\'spastic_username_container_'.$randstr.'\'),\''.$text.'\');
</script>';
  return $output;
}}

if (!function_exists('rainbow_text')) {function rainbow_text($text)
{
  $ret = ''; $colors = array('ff00ff', 'ff0099', 'ff0000', 'ff9900', 'ffff00', '99ff00', '00ff00', '00ff99', '00ffff', '0099ff', '0000ff', '9900ff'); $i = 0;
  $pattern = '/(&[^\s]*;|.)/'; preg_match_all($pattern, $text, $matches); $textarray = $matches[1]; $textlength = strlen($text);
  while($i<=$textlength) {foreach($colors as $value) {if ($textarray[$i] != "") {$ret .= '<span style="color:#'.$value.';">'.$textarray[$i]."</span>";} $i++;}}
  return $ret;
}}

if ($some_condition_about_the_user)
{
  $user['musername'] = zebra_text($user['username']);
  /// Could also put the Rainbow or Spastic Rainbow in here.
} 


(Note: For the "Spastic" Rainbow username, which is a moving rainbow, I added the following to my headinclude template

<script type="text/javascript">
function randint(len) {var chars = "0123456789"; if (!len) {len=8;} var randomstring = ''; for (var i=0; i<len; i++) {var rnum = Math.floor(Math.random() * chars.length); randomstring += chars.substring(rnum,rnum+1);} return randomstring;}

function set_as_spastic(el,name,idstring)
{
  var randid = 0;
  if (idstring) {randid = idstring;} else {randid = Math.floor(Math.random() * 102400);}
  el.id = 'spastic_username_container_' + randid;
  spastic_Timer[randid] = 0;
  spastic_Names[randid] = name;
  if (!idstring) {spastic_index[randid] = 0;}
  spastic_letters[randid] = name.split("");
  spastic_Timers[randid] = setInterval("spastic_username("+randid+")", 50); 
}

var spastic_Names = new Array();
var spastic_Timer = new Array();
var spastic_Timers = new Array();
var spastic_index = new Array();
var spastic_letters = new Array();

function spastic_username(idstring)
{
  var colors = new Array('ff00ff', 'ff0099', 'ff0000', 'ff9900', 'ffff00', '99ff00', '00ff00', '00ff99', '00ffff', '0099ff', '0000ff', '9900ff');
  var bgcolors = new Array('880088', '880033', '880000', '883300', '888800', '338800', '008800', '008833', '008888', '003388', '000088', '330088');
  spastic_index[idstring]++;
  if (spastic_index[idstring] > colors.length-1) {spastic_index[idstring] = 0;}
  var temp_index = spastic_index[idstring];
  var output = '';
  for (var i=0; i<spastic_letters[idstring].length; i++)
  {
    if (temp_index > colors.length-1) {temp_index = 0;}
    output += '<span style="color:#'+colors[temp_index]+';background-color:#'+bgcolors[temp_index]+';">'+spastic_letters[idstring][i]+'</span>'; temp_index++;
  }
  document.getElementById('spastic_username_container_'+idstring).innerHTML = output;
  document.getElementById('spastic_username_container_'+idstring).onmouseover = new Function('pauseSpastic('+idstring+')');
  document.getElementById('spastic_username_container_'+idstring).onmouseout = new Function('unpauseSpastic('+idstring+')');
}

function pauseSpastic(idstring)   {clearInterval(spastic_Timers[idstring]);}
function unpauseSpastic(idstring) {set_as_spastic(document.getElementById('spastic_username_container_' + idstring),spastic_Names[idstring],idstring);}
</script>