Textarea BitmapData Clips HTMLtext Italic System Font

Question

When using an italic system font, such as BrushScriptStd.otf (pretty standard on Windows PCs - attached if you don't have it), it renders a capital "B" correctly in the textarea:
public var letB:String = '<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="BrushScriptStd" SIZE="72" COLOR="#000000" LETTERSPACING="0" KERNING="0">B</FONT></P></TEXTFORMAT>';
myTextArea.htmlText = letB;
Looks like this in the flash player in Firefox:
When I try to create a bitmap image of the TextArea, the edge of the italic "B" that "overhangs" the next character position gets clipped off in the rendered bitmap:
I used the BitmapData.draw method to generate the bitmap.  I have also tried ImageSnapShot with the same result.
            myTextArea.setStyle("backgroundAlpha", 0.0);
            var myBitmap:BitmapData = new BitmapData(myTextArea.width*1, myTextArea.height*1, true, 0x00000000);
            var m:Matrix = new Matrix();
            m.scale(1, 1);
            myBitmap.draw(myTextArea, m);
            BitmapImageOfB.source = new Bitmap(myBitmap);
BTW - I need to use system fonts (allow the user to be able to create text with any fonts they have on their hard drive.)  However, I have tried this with embedding the BrushScriptStd font just to see if that was the problem, but embedding did not change anything.
Is this a bug?  Or am I doing something really wrong?

Answer 1

You are quite right about the bounding box.  And I can add an extra space, that will allow the portion of the italic character that extends beyond the bounding box to render.  If my project were only that simple.
I have discovered that adding a space only works if it is in the same font face as the italic letter being clipped. The ultimate project users often compose type with multiple font faces in a single word (kind of the ransom note effect) as part of their type setting. In addition, some of the font faces have exaggerated swashes that span several letters, which would require you to add several spaces, and on either side since descenders in italic typically run forward under the preceding character.
My application goes further in that I also allow the user to kern / change the space between the letters by using <FONT LETTERSPACING="-5"> in the HTMLtext.  This also results in clipping.
So far, the only thing I can come up with, which to my mind is a complete hack, is to take the HTMLtext apart letter by letter.  First determine the standard bounding box dimensions so that I can determine the base line and starting line using: measureHTMLtext().ascent etc., as well as the width of both the character and a standard space in that font.  Then I would do as you suggested use a hidden TextField to render each letter padded by spaces and make a bitmap of the single character.  Then I would position the image in another hidden container, positioning based on the calculated baseline, and substracting the inserted padding spaces to determine the proper x and y for the resulting bitmap.  I would keep repeating this until all the letters have been rendered as individual images (talk about your ransom note).  Once all the characters had been captured as bitmap images, I could make a bitmap of the hidden container I layed them all back out in.
There has got to be a better way.