Assign Width of First Letter of Word
===

I'm trying to set up a plugin and it works pretty good, but I noticed that the first character (F in First) wasn't being assigned the correct width on page load.  The plugin allows you to mouseover and it changes to Second word and then on mouseout, changes back to First word & then the first character's width is correct. So I tried this to fix it when it first shows:


    var firstltrwdraw = $('span.char1').css('width'); // this width is actually 39px but it keeps pulling 27
     console.log('1st Width Raw: ' + firstltrwdraw);
    var firstltrwd = Math.abs(firstltrwdraw);
      console.log('1st Width: ' + firstltrwd);
      console.log('1st Type: ' + typeof firstltrwd);
    $('span.char1').parent().css({'width': firstltrwd + 'px'});

Here's some typ. html:

    <div class="lslide_wrap">
      <a href="javascript:void(0)" ...>
        <span class="sl-wrapper" ...>
          <span class="char1 sl-w2" ...>S</span> // first letter of Second
          <span class="char1 sl-w1" ...>F</span> // first letter of First
        </span>
        <span class="sl-wrapper" ...>
         ... // second letter of each word, etc
         ...
        <span>
      </a>
    </div>

Here's a demo page:  http://www.partiproductions.com/letterslide_test/index.html

Sure would appreciate some help in getting the width from char1 and assigning it to it's parent sl-wrapper.

Thanks,  Bill