When adding a single letter at a time to a text field, how do I avoid the word wrap occuring mid-word? - string

Question

Given the following example SWF:
Sample
Notice how with the words "enthusiast" at the end of the first line and "write" at the end of the second line, that they start to type out on the first line but after a few letters they are bumped.
I understand this is the correct behavior, but is there a way for "enthusiast" to begin being typed on the second line, and "write" on the third line instead of being bumped during the typing?
Currently I am thinking of doing a search ahead mechanism, so it finds the next word in whole, then makes that the active word to print, temporarily print it, see if it increases the numlines, and if it does insert a line break and continue writing. But it seems fiddly.
Code below:
import flash.text.TextField;
import flash.events.Event;
var tt:TextField = new TextField();
tt.wordWrap = true;
tt.width = 200;
tt.height = 50;
tt.border = true;
var s = "Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers";
addChild(tt);
var currentLetter:int = 0;
addEventListener(Event.ENTER_FRAME, onEnter, false, 0, true);
function onEnter(e:Event):void
{
if(currentLetter < s.length)
{
tt.appendText(s.charAt(currentLetter));
}
currentLetter++;
}

Answer 1

adjusted your code a bit and posted the result on wonderfl: http://wonderfl.net/c/rZkm
as #mouseas suggested i put the next word into an additional textfield measure the width and compare this to the remaining space in the current line ... if the next word doesn't fit I add a line-break and continue.
here's the code:
package {
import flash.geom.Rectangle;
import flash.text.TextFieldAutoSize;
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.Event;
public class FlashTest extends Sprite {
private var currentLetter:int = 0;
private var tt:TextField;
private var debug:TextField;
private var pre:TextField;
private var s:String;
public function FlashTest()
{
// write as3 code here..
tt = new TextField();
tt.wordWrap = true;
tt.width = 200;
tt.height = 150;
tt.border = true;
s = "Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers";
addChild(tt);
// predraw word
pre = new TextField();
pre.y = 150;
pre.width = 200;
pre.height = 50;
pre.autoSize = TextFieldAutoSize.LEFT;
pre.border = true;
addChild(pre);
// debug txt
debug = new TextField();
debug.x = 250;
debug.wordWrap = true;
debug.width = 200;
debug.height = 500;
debug.border = true;
addChild(debug);
addEventListener(Event.ENTER_FRAME, onEnter, false, 0, true);
}
private function onEnter(e:Event):void
{
//debug.appendText("char: " + rect.x + " " + rect.width + "\n");
var c:String = "";
if (currentLetter < s.length)
{
c = s.charAt(currentLetter);
tt.appendText(c);
}
else
{
debug.appendText("DONE! \n");
removeEventListener(Event.ENTER_FRAME, onEnter);
}
if (c == " ")
{
var rect:Rectangle = tt.getCharBoundaries(currentLetter-1);
if (rect != null)
{
//debug.appendText("char: " + rect + "\n");
var cPos:int = rect.x + rect.width;
var r:int = tt.width - 4 - cPos; // 4px for gutter on left+right side of textfield
var start:int = s.lastIndexOf(" ", currentLetter);
var end:int = s.indexOf(" ", currentLetter+1);
if (start < 0) start = 0;
pre.text = s.substr(start, end-start);
debug.appendText("rest: " + r + " " + pre.textWidth + " > " + pre.text + "\n");
if (r - pre.textWidth <= 0)
{
tt.appendText("\n");
debug.appendText("\n");
}
//debug.appendText("w:" + tt.textWidth + " " + start + "->"+ end + " /" + pre.text + "/ " + pre.textWidth + "\n");
}
}
++currentLetter;
}
}
}
works great - only the "a" in the 4th line makes trouble - maybe you need to finetune the calculations a bit...