After struggling with TLF today trying to format different HTML tags. There are all kind of great experiments out there such as TLFX, which try to address some of these concerns. However, since the project is still in the works I rather not use it on production code.

I end up using what’s available in TLF, which is still very limited. It appears that TLF doesn’t support many of the common HTML tags you exact such as “b” or “font tags” at the same time it does support some HTML tags (see list here) and what works is using the span property and attaching attributes.

There are two tequinques I found.

You can use the TextConverter util to import and export HTML, see example below:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   initialize="init()">
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.conversion.TextConverter;
			import flashx.textLayout.elements.TextFlow;

			public function init():void
			{
				var markup:String = "<textFlow xmlns='http://ns.adobe.com/textLayout/2008'><p>hello Flex<span fontWeight='bold' color='#cccccc' fontSize='28' fontFamily='Neutraface Text Demi'>Flash</span> Hello ActioinScript.<span fontSize='42'>Hello TLF</span></p></textFlow>";
				var textFlow:TextFlow = TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT);

				descriptionRichText.textFlow = textFlow;
			}


		]]>
	</fx:Script>

	<s:RichText id="descriptionRichText" blendMode="normal"
				color="#000000" fontFamily="Arial"
				whiteSpaceCollapse="preserve" x="350" y="102"/>

</s:Application>
  

This technique works well but require you to add the following tag:

<textFlow xmlns='http://ns.adobe.com/textLayout/2008' />
 

Additionally you can use TextFlowUtil, see below:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">

	<fx:Style source="Main.css"/>

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;

			import spark.utils.TextFlowUtil;

			protected function button1_clickHandler(event:MouseEvent):void
			{
				try {
					descriptionRichText.textFlow = TextFlowUtil.importFromString(textArea.text );
				}
				catch (error:Error)
				{
					Alert.show("HTML error: " + error.message);
				}
			}

		]]>
	</fx:Script>

	<s:TextArea id="textArea" x="102" y="75"/>
	<s:Button x="102" y="244" label="Submit HTML" click="button1_clickHandler(event)"/>

	<s:RichText id="descriptionRichText"blendMode="normal"
				color="#000000" fontFamily="Arial"
				whiteSpaceCollapse="preserve" x="350" y="102"/>

</s:Application>

Using the following HTML code produced a successful format.

<p>hello Flex<span fontWeight="bold" color="#cccccc" fontSize="28" fontFamily="Neutraface Text Demi">Flash</span> Hello ActioinScript.<span fontSize="42">Hello TLF</span></p>

Notice that I also embedded an external font: “Neutraface Text Demi”.

@font-face
{
	fontFamily: "Neutraface Text Demi";
	src: url("assets/fonts/NeutraText-Demi.otf");
	embedAsCFF: true;
}

Hopefully you’ll find this post helpful.