HTML tags in textfield

If you want to format text in field using old html tag here is simple list of possible tags:

• <a> hyperlink. Has two parameters:
• target - target window
• href - url  (or event!)
• <b> - text betwen those tags will be bold
• <br> - breaks line
• <font> - describes font:
• color - color of the text. Must be in hex (with # at the begining)
• face - font name
• size - font size
• <img>  allows to embed image (or swf) like in html site. Here is a list of supported properties:
• src - source of media
• width - width of rectangle where media is placed (always in px)
• height - height of rectangle where media is placed (always in px)
• align - horizontal alignment. Left or right. Specifies on which side text will flow around the image
• hspace - horizontal margin around media. By default it is 8px
• vspace - vertical margin around media. By default it is 8px
• id - identifier for embedded media. Used to controll it
• checkPolicyFile - connected to the security policy. Used with flash swf file embedded
• <i> - text between those tags will be italic. 
• <li>, <ul>, <ol> - lists. ordered and dotted
• <p> - paragraph. Supports only two attributes:
• align - specifies if text block is aligned to left/right/center or justify
• class - connects with CSS class
• <span> - inline part of text that allows only one attribute:
• class - classname from CSS
• <u> - text between those tags will be underlined

Complete description in Adobe's API: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html#htmlText

Letter Spacing - TextFormat or css StyleSheet

If you;re looking for example of setting letter spacing - here it is.

The first solution is TextFormat. The property is named same in both options - letterSpacing. Let's see the code:

var txtfmodified:TextField = new TextField();

addChild(txtfmodified);

txtfmodified.y =20;

txtfmodified.text = 'hello world';

var tf:TextFormat = txtfmodified.getTextFormat();

tf.letterSpacing = 3; /* I tried lots of different values here. */

txtfmodified.setTextFormat(tf);

We can also use stylesheet to adjust part of text (in previous solution you can also adjust part of text but selecting chars is more complicated than using styles for classes of html tags). Here is the example:

var txtfmodified2:TextField = new TextField();

addChild(txtfmodified2);

txtfmodified2.y =40;

txtfmodified2.text = 'hello world';

var s:StyleSheet = new StyleSheet();

s.setStyle("p", {letterSpacing:3});

txtfmodified2.styleSheet = s;

txtfmodified2.htmlText = "<p>hello world</p>";

Remember that there are two solutions but you cannot mix them. Either way you'll receive error like this:

Error: Error #2009: This method cannot be used on a text field with a style sheet


And a proof at the end. First line is simple not modified field. Second line is modified by TextFormat properties. Third line is adjusted by stylesheet.

Dynamic Font Embedding

When You want to load some parts or modules later font is one of thing that is not most important. Sometimes there is some kind of configuration where you or user chooses which font should be used. In those situations font should be embedded dynamically. So here simple instruction step by step:

Firstly we need font packed separately in swf. I made sepataed project to easily maintain it but it can also be module. My code looks like this:


package Arial
{
import flash.display.Sprite;

public class Font_Arial extends Sprite
{
[Embed(source='ARIAL.ttf', fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_Arial:Class;


[Embed(source='ARIALBD.ttf', fontWeight= "bold", fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_ArialBold:Class;

[Embed(source='ARIALI.ttf', fontStyle='italic', fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_ArialItalic:Class;

[Embed(source='ARIALBI.ttf', fontStyle='italic', fontWeight= "bold",fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_ArialBoldItalic:Class;


}
}

Maybe small description of code. I have  got package name. This will be important later.
Class name is something you can sat as you wish. The only thing is that it cannot be named as Font name in system, so if you name it Arial there will be conflict.
As You can see I'm embedding similar files - each one consist different style - there is normal, bold, italic and bold&italic (last one is separated style!). For each one there are describing parameters fontWeight and fontStyle.
FontName for all font styles must be the same and must be same as class name.
Last parameter is unicodeRange. it describes which signs are embedded. You can leave it but then all signs will added which usually is unnecessary and your file will be heavy. For example all glyphs from Arial normal (without bold and italic) weights about 300kB when my file with four styles and only glyphs that are used by my application (latin symbols, numbers, special chars) weights 90kB.

Now let's load it

public function FontLoader():void {
loadFont(_serverPath+"fonts/Arial/Font_Arial.swf");
}


private function loadFont(url:String):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontLoaded);
loader.load(new URLRequest(url));
}

I hope this part is easy and don't need comment


private function fontLoaded(event:Event):void 
{
var FontLibrary:Class = event.target.applicationDomain.getDefinition("Arial.Font_Arial") as Class;


Font.registerFont(FontLibrary['Font_Arial']);
Font.registerFont(FontLibrary['Font_ArialBold']);
Font.registerFont(FontLibrary['Font_ArialItalic']);
Font.registerFont(FontLibrary['Font_ArialBoldItalic']);


drawText();
}

We're extracting data from externall module. Remember my package name Arial? Full class name with package has to be put to getDefinition() method. Remember about package name. I lost some time to figure it out.
When you register font you can use it globally in your app.  Instead of calling similar command four time you can use foreach loop here.
Now we can use our font.

public function drawText():void
{
var tf:TextFormat = hintText.getTextFormat();

tf.font = "Font_Arial";
hintText.embedFonts = true;
hintText.setTextFormat(tf);
hintText.defaultTextFormat = tf;

}

I hope it's clear enough.

Embedding fonts

Embedding fonts is quite easy. Here is example:

Firstly, we have to embed font. In this case my path is relative. mimeType is not manatory, but it's good practise to fill it.

[Embed(source='assets/MyFont.ttf', fontName="Font_MyFont", mimeType="application/x-font-truetype")]
private static var stringForHoldingFont:String;

Variable from above is not used anywhere. It's just for holding glyphs.

Here comes our field, where we use embedded font
private var _title:TextField;

_title = new TextField();

var style:TextFormat =  _title.getTextFormat();

Type of font is set in TextFormat. We can create new or copy existing one. And here comes most important part. We set name from embed. And in textfield object (not TextFormat!), we setembedFonts property to true. Otherwise there will be no result.


style.font = "Font_MyFont";
_title.embedFonts = true;

When we set format for field this should work.


_title.setTextFormat(style);
_title.defaultTextFormat = style;

If You are using Flex builder / Flash builder as IDE remember to set font manager for project. Otherwise it won't work. To do this choose project properties -> 'ActionScript Compiler' and as 'Additional compiler arguments' put
 -managers flash.fonts.AFEFontManager 
like on this screen:

Remember to check it on device where this font is not installed. For example if You forget to set property embedFonts this will work on computer where you have this font (like probably your computer).

Text alignment

When positioning text there is easy way to set horizontal align like in this example:

_background = new Sprite();

_background.graphics.beginFill(112233,0.7);
_background.graphics.drawRect(0,0,200,20);

_itemLabel.width = _background.width;

rollOutStyle = _itemLabel.getTextFormat();
rollOutStyle.align = TextFormatAlign.CENTER;


another option is to switch last two lines by:


_itemLabel.autoSize = TextFieldAutoSize.CENTER;


But there is no such solution for vertical. We have to set it manually:


_itemLabel.y = _background.height * 0.5 - _itemLabel.textHeight * 0.5;