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).