Starling extension for using bitmap fonts with simplified HTML tags for styling texts

HTMLTextField

HTMLTextField is a Starling TextField for using with simplified html notation

HTMLTextField now supports font scaling to adapt font size, it will choose the nearest biggest font size you have registered. (or smaller if no bigger found)

ACCEPTED TAGS:

bold : ;
italic : ;
underlined : ;
you have to provide the underline texture with: HTMLBitmapFonts.underlineTexture = yourTexture for this to work.
size : <size="10"></size> or <s="10"></s>;
colors : don't forget '0x' or '#' !
solid :
<color="0xFF0000"></color> or
<c="0xFF0000"></c>;
gradient up / down :
<color="0xFF0000,0xFFFFFF"></color> or
<c="0xFF0000,0xFFFFFF"></c>;
gradient up-left/up-right/down-left/down-right :
<color="0xFF0000,0xFFFFFF,0x000000,0x0000FF"></color> or
<c="0xFF0000,0xFFFFFF,0x000000,0x0000FF"></c>
links : <l="your-url.com">text to click</l>;
you can use defaultLinkColor var to auto colorize the links.
you can define a function to navigate to url for just one textField with myTextField.navigateToURLFunction = function(url:String):void{...}
you can define a function to navigate to url for all textFields with the static function HTMLTextField.navigateToURLFunction = function(url:String):void{...}
by default the navigateToURLFunction function internaly uses the flash.net.navigateToURL function
dispatch Event : <f="string var to dispatch">text to click</f>;
you can use defaultLinkColor var to auto colorize the links.

HTMLTextField uses HTMLBitmapFonts instead of the tradtional BitmapFont.

Device fonts support:

You can use a list of fonts to use the device font by default using the static var HTMLTextField.$useDeviceFontsForFontNames.
You can define the default device font replacement by using the static var HTMLTextField.$useDeviceFontName, all fonts listed in HTMLTextField.$useDeviceFontsForFontNames will be kept.
You can define to use device fonts for all textFields by using the static var HTMLTextField.$useDeviceFonts.
You can define by textField to use device fonts by using the instance var myTextField.useDeviceFonts.

Usage:

To add a font for use with HTMLtextField you must add them to HTMLTextField with the static method HTMLTextField.registerBitmapFont this fonction accept as xml value the same XML as traditional BitmapFont.

They can be generated with tools like :

Personnaly i use AssetManager for loading fonts and i just modified it like this:
in loadQueue -> processXML :

// if I parse fontHTML -> load the font for HTMLTextFields
else if( rootNode == "fontHTML" )
{
	name 		= xml.info.@face.toString();
	fileName 	= getName(xml.pages.page.@file.toString());
	isBold 		= xml.info.@bold == 1;
	isItalic 	= xml.info.@italic == 1;

	log("Adding html bitmap font '" + name + "'" + " _bold: " + isBold + " _italic: " + isItalic );

	fontTexture = getTexture( fileName );
	HTMLTextField.registerBitmapFont( fontTexture, xml, xml.info.@size, isBold, isItalic, name.toLowerCase() );
	removeTexture( fileName, false );

	mLoadedHTMLFonts.push( name.toLowerCase() );
}

Other things:

You can add emotes to the text, just register the emotes shortcut and the texture associated.
HTMLTextField.registerEmote( "{smiley}", mySmyleyTexture );
you can configure offsets x and y, xAdvance, and margins for each emotes.
You can prevent auto carriage return by setting the autoCR var to false
You can autorize the text to extend automaticaly if the text not fit by setting the resizeField var to true
You can change the line spacing of the text by setting the lineSpacing var to something other than 0.
Added left centered and right centered horizontal alignements rules, use HTMLTextField.LEFT_CENTERED and HTMLTextField.RIGHT_CENTERED.
You can easily make shadows on the text by setting shadowX, shadowY and shadowColor vars.
You can limit the min font size when autoScale is true with the minFontSize var.
You can override the coloring behaviour for the emotes by using colorizeEmotes it's default to false.
You can set to ignore the emote in first and last position for the horizontal centering of the text by setting ignoreEmotesForAlign to true.

Warnings:

Only one font name can be used in the HTMLTextField, it can only change size, bold, italic, and color
All font styles must be on the same atlas as the textField is drawn on a QuadBatch
All emotes registered must be on the same atlas as the textField is drawn on a QuadBatch
The underline texture must be on the same atlas as the textField is drawn on a QuadBatch

hooh / HTMLBitmapFonts