Text size & zooming nightmares
I'm working on a flex project where text gets put inside a box that the user can manipulate. Getting that box to autosize to the text, has been a little difficult.
But I finally got that working.
Another software requirement is that the user can zoom in/out. I was doing this just by changing the xScale/yScale of the parent container. It all works great.
Except for some very specific text/font combinations. The damn text field wraps differently at different zoom levels. This video shows that:
The font, text, and box size remain constant through that entire thing but at anything less than 100% zoom the text wraps to two lines. I assume it's because of some sub-pixel antialiasing changing the text dimensions depending on zoom or something.
Arghhhhhh
I think I might give up and just take a bitmap of the text and scale that.
posted by Marc at
11:03 AM
4 Comments:
That's what I did in one situation, where I needed the text alignment to be perfect with a transition.
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.text.AntiAliasType;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.text.Font;
import FFFPhantom01;
public class StringToBitmap extends Sprite
{
private static var _sprite:Sprite;
private static var _textFormat:TextFormat;
private static var _textField:TextField;
private static var _bitmapData:BitmapData;
private static var _bitmap:Bitmap;
public static function textFormatter():void
{
_textFormat = new TextFormat();
_textFormat.font = "FFF Phantom 01";
_textFormat.size = 12;
_textFormat.color = 0xFFFFFF;
};
public static function stringToBitmap(string:String):Bitmap
{
_sprite = new Sprite();
_textField = new TextField();
_textField.embedFonts = true;
_textField.antiAliasType = AntiAliasType.ADVANCED;
_textField.sharpness = 400;
_textField.thickness = -150;
_textField.autoSize = TextFieldAutoSize.LEFT;
_textField.text = string;
_textField.setTextFormat(_textFormat);
_sprite.addChild(_textField);
_bitmapData = new BitmapData(_sprite.width, _sprite.height, true, 0xFFFFFF);
_bitmapData.draw(_sprite);
_bitmap = new Bitmap(_bitmapData);
return _bitmap;
};
};
};
By
Anonymous, At
1/25/2008 11:45 AM
I can confirm this behavior (bug?!) happenning at my application as well.
It only happens at my application when the font size is set to 10 pixels. If font size is set to 12 or more pixels, flash.text.TextField wraps the text correctly under different zoom levels.
I set xScale and yScale properties for the container too to achieve different zoom levels.
I will prepare a screencast for you tomorrow to illustrate my case.
Meanwhile, you can approach the developers of Buzzword application and ask them how do they deal with this situation, I am interested to find the best solution too as I had found out today :()
By
Anonymous, At
1/28/2008 10:15 AM
Thanks for the code leef, I might end up doing something just like that.
Jabby, I've actually talked with the buzzword guys on a couple occasions in the past.
One of the areas they spent a lot of time developing was a custom text layout engine. They actually lay out every word (or maybe every character I forget the detail they work at). Unless you're making a kick ass word processor I'm betting that approach is cost prohibitive.
By
Marc, At
1/28/2008 10:20 AM
Sent video to my Screencast demo privately via email to Mark.
By
Anonymous, At
1/31/2008 9:32 AM
Post a Comment
Subscribe to Post Comments [Atom]
<< Home