Aligning textfields close together produces inaccurate spacing appearance - actionscript-3

Question

I've added Arial as an embedded font to my font format, which I've added to numerous textfields that must be aligned accurately next to each other to create the appearance of spaces. They are aligned approximately 1 - 2 pixels next to each other. The problem is that they look inaccurately spaced when viewed at the normal stage size, but when I zoom in the text looks fine.
I've tried messing around and adding advanced antialiasing, but nothing is working. Perhaps Arial doesn't work at small sizes? I know not setting a font it produces the results I want, however it's not the font I want to use; it must be using Times?
Any ideas?
var myFont = new Font1();
format1 = new TextFormat();
format1.color = 0x000000;
format1.size = 16;
format1.font = myFont.fontName;
EDIT:
Essentially I'm splitting up each character into its own textfield, so I can manipulate each character and animate it. But to do so I need to space the characters as though it was one textfield.
private var bmd:BitmapData; // bitmapdata to draw textField in;
private function getExactMetrics(textField:TextField):Object
{
// copy textField to bitmap
bmd = new BitmapData(textField.width,textField.height,true,0x000000);
bmd.draw(textField);
// loop through pixels of bitmap data and store the x location of pixels found.
var foundx:Array = [];
for (var nx:int = 0; nx < bmd.width;nx++)
{
for (var ny:int = 0; ny < bmd.height; ny++)
{
var px:uint = bmd.getPixel32(nx, ny);
if (px != 0)
{
foundx.push(nx);
break;
}
}
}
// get the values for the metrics
var startX:int = foundx[0]; // first pixel found representing the x start of the text in pixels
var endX:int = foundx[foundx.length-1]; t
var realWidth:Number = endX - startX;
// clear the array with found x positions
foundx = [];
// wrap values in object
var metrics:Object = { };
metrics.width = realWidth;
metrics.x = startX;
// clear bitmapdata
bmd = null;
return metrics; // retrurn metric object;
}
}

Answer 1

Remember that fonts have kerning which means that letters are not just put one next to each other, but spacing depends on settings of the font. For example in word 'To' 'o' is slightly below the 'top beam' of letter 'T'.
If you just put letter next to each other it will look bad, you have to consider kerning.
TextField class has a getCharBoundaries method which can be used to get accurate char position. Not sure if it will work with htmlText, though.
To make it simpler you could use a third party library. There is a great SplitTextField from Greensock (but it's not free) or Textanim (open source).

Answer 2

Fonts such as Verdana might have greater readability at smaller sizes; however, it sounds like you are experiencing text metrics issues.
In this example, TextLineMetrics are used to accurately measure each text field.
Result:
Code:
package
{
import flash.display.Sprite;
import flash.text.AntiAliasType;
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.text.TextLineMetrics;
[SWF(percentWidth = 100, percentHeight = 100, backgroundColor = 0xefefef, frameRate = 30)]
public class X extends Sprite
{
public function X()
{
super();
// collection of words
var words:Array = [ "These", "are", "the", "words", "to", "be", "placed" ];
// define a text format
var textFormat:TextFormat = new TextFormat();
textFormat.font = "Arial";
textFormat.bold = false;
textFormat.size = 8;
textFormat.color = 0x0;
textFormat.align = TextFormatAlign.LEFT;
// destination x coordinate for next word text field
var dx:Number = 0;
// for every word
for each (var word:String in words)
{
// create a text field
var textField:TextField = new TextField();
textField.setTextFormat(textFormat);
textField.defaultTextFormat = textFormat;
textField.autoSize = TextFieldAutoSize.LEFT;
textField.antiAliasType = AntiAliasType.ADVANCED;
// set text and place the text field
textField.text = word;
textField.x = dx;
textField.y = 20;
addChild(textField);
// measure the text field for accurate width
var textLineMetrics:TextLineMetrics = textField.getLineMetrics(0);
dx += textLineMetrics.width + 2;
}
}
}
}