Re: problem in firefox and moziila

Hi Doug,

this was really very helpful for me.

I had to change some details for my application. Maybe someone can use that
as well.
My texts come from a database and can contain linebreaks (Windows and Unix
style). Both were not taken in account in the original code, so I added that
to the wrapText function:
[code snipplet...]
      TextAreaObj.prototype.wrapText = function( textObj )
      {
         //my changes here:
         textObj.text = textObj.text.replace(/ \s/mgi, ' '); //linebreaks
after a space are invalid
        textObj.text = textObj.text.replace(/\r/mgi,
'\n').replace(/(\n)+/mgi, ' <textwrap:linebreak> '); //these ones need to be
preserved
         var wordArray = textObj.text.split(' ');
         
         var x = textObj.x;
         if ( 'end' == textObj.textAnchor )
         {
            x = textObj.x + textObj.width;
         }
         else if ( 'middle' == textObj.textAnchor )
         {
            x = textObj.x + (textObj.width/2);
         }
         

         var lineIncrement = 0; //Changed from 1 to 0
         var eachWord = '';
         var tempLine = '';
         var eachLine = '';
         var hide = false;
         for ( var w = 0, wLen = wordArray.length; wLen > w; w++ )
         {
            eachWord = wordArray[w];

            if ( '' != eachWord && ' ' != eachWord )
            {
               tempLine += eachWord + ' ';
              var textWidth = tempLine.length * (textObj.fontSize / 2 );
//changes here...
	    if (textWidth < textObj.width && eachWord!='<textwrap:linebreak>')
               {
                  eachLine = tempLine;
               }
               else
               {
//and here...
                  tempLine = eachWord!='<textwrap:linebreak>'?eachWord + '
':'';
                  
                  var newLine = this.createTextItem( eachLine, x, lineY,
hide );
                  textObj.textEl.appendChild( newLine );

                  lineIncrement++;
               }
            }

[...code snipplet]

Then my font-size was not in an dedicated attribute but in style="...", so I
added this to the function TextObj():
[code snipplet...]
         this.fontSize     = Number(this.el.getAttribute( 'font-size' ));
		if(this.fontSize<1)
		{
		var styleArray=this.el.getAttribute( 'style' ).split(';');
		for(var i=0;i<styleArray.length;i++)
		{
		if(styleArray[i].indexOf('font-size')!=-1)
		{
		this.fontSize=parseInt(styleArray[i].split(':')[1]);
		}
		}
		}
[...code snipplet]

I only tested in FF2 on Windows...

Stef


Doug Schepers-2 wrote:
> 
> 
> I put together a (very) simple example of how you can do text-wrapping 
> with script.  I tested in in Windows with FF2, Opera9, and IE7+ASV3.
> 
> http://svg-whiz.com/svg/text/TextWrap-simple.svg
> 
> It's by no means perfect... it does take into account text-anchor, but 
> not letter-spacing, word-spacing, etc.  The heuristic for determining 
> the width of each line is a weak ad-hoc measure based on the number of 
> characters and the font-size, not the getComputedTextLength or getBBox, 
> because those didn't work (for this purpose) in FF2.
> 
> Still, I hope it's of some use to you.  To use it, simply create a 
> 'textArea' element in my pseudo-SVG1.2 namespace, with the desired 
> dimensions and text, and this script will do pretty much the rest.  You 
> can use whatever attributes you want (it will transfer them over), but 
> keep in mind that this script is not rigorously tested.
> 
> You could adapt it to be more robust, but I'm hoping the real 
> 'svg:textArea' element is implemented in browsers before long, making 
> this script unnecessary.
> 
> 

-- 
View this message in context: http://www.nabble.com/problem-in-firefox-and-moziila-tf3508545.html#a10412874
Sent from the w3.org - www-svg mailing list archive at Nabble.com.

Received on Thursday, 10 May 2007 14:48:07 UTC