How to use Text Layout Framework in Flex 3.2 or AIR 1.5

The goal of this article is to explain what the Text Layout Framework is and how you can use it to display rich text inside of Flash Player 10. While I will not cover all the possibilities of this framework, I hope I will give you enough of a push to get up to cruising speed.

As usual, you can find a demo and the source code for the examples in this article packaged as a Flex 3.2 project ZIP file. So if you prefer to see the code before reading the theory, then see the section “Code time: An example using the Text Layout Framweork in Flex 3.2″.

What is the Text Layout Framework

The Flash Text Engine (FTE) available in Flash Player 10 and Adobe AIR 1.5 brings support for many new text capabilities. There is an API that provides low-level access to this engine, but if you want to use the API you have to write a lot of code. Thus, the FTE is intended to provide the foundation for libraries that leverage these capabilities and make life easier for the developer.

And this is exactly what the Text Layout Framework is. It is a library written in pure ActionScript, and thus can be used in Flash CS4, Flex 3.2 or Gumbo, or AIR 1.5.

The Text Layout Framework provides support for:

Bidirectional text, vertical text and over 30 writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, and others.
Selection, editing and flowing text across multiple columns and linked containers, as well as around inline images
Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
Rich developer APIs to manipulate text content, layout, markup and create custom text components.

Below are some screen shots from the samples you can find on http://labs.adobe.com/technologies/textlayout/:

Understanding Text Layout Framework components

The Text Layout Framework (TLF) comprises three components and ten packages. All the packages are subpackages of the flashx.textlayout package. As I said this framework is implemented using pure ActionScript 3, and thus can be used in Flash CS4, Flex 3.2, Gumbo (the Text Layout Framework is part of Gumbo), or AIR 1.5. And of course you have to target Flash Player 10. Here is a short description of the three components in TLF:

textLayout_core.swc is the main component and handles data storage, flowing text into containers, and rendering the containers
textLayout_conversion.swc is used to import text into the framework, and to export it
textLayout_edit.swc facilitates text selection and text editing

One way to look at the TLF, is by comparing it with the MVC pattern. If you apply this pattern, then you will have:

The model is defined mainly by the flashx.textlayout.elements package, which includes classes/interfaces that define the data structure that holds the text. Another package, flashx.textlayout.formats, is used for storing the format information. The package flashx.textlayout.conversion can be considered part of the model as it embodies the rules for importing/exporting the data
The view includes three packages that handle the rendering of text for display. You can choose to display the text using one of the two different methods: using flashx.textlayout.factory package you can display static text, and using flashx.textlayout.container you can display containers for dynamic text. The flashx.textlayout.compose package defines the methods for positioning and displaying dynamic text in containers
The controller is represented by two packages that define how the user can interact with the text (selecting, editing, copy/paste, undo, and so on): flashx.textlayout.edit and flashx.textlayout.operations

The Model and Text Flow hierarchy

The model uses a hierarchical tree to represent text. Each element of the tree is a class from the package flashx.textlayout.elements. The root element is always an instance of the TextFlow class, and conceptually represents an entire story of text (the term story comes from DTP, and means a collection of text that should be treated as one unit). For example, the article you are reading now could be a story.

The rest of the elements are:

div – a division of text, can contains only div or p elements
p – a paragraph, can contain any element but div
a – a link; can contain tcy, span, img, tab, br
tcy – a run of horizontal text, used in vertical text; for example in Japanese you can have this type of element; can contain a, span, img, tab, br
span – a run of text in a paragraph; can contain only text
img – an image in a paragraph
tab – a tab character
br – a break character. Text will continue on the next line, but it doesn’t start a new paragraph

The TextFlow can have only these two elements as children: div and p. Here is how the model can look for a story:

This Text Flow hierarchy translates to an XML document, using TLF Markup. Basically the nodes can be: TextFlow, div, p, a, img, span, tcy, br, and tab. At the same time, each node has an ActionScript class implementation: TextFlow, DivElement, ParagraphElement, LinkElement, TCYElement, SpanElement, InlineGraphicElement, TabElement, and BreakElement. All these classes inherit directly or indirectly from the class FlowElement.

Now, let’s see how you can create a TextFlow element. Basically, there are two ways you can create a TextFlow element: by using an XML object, or by creating the nodes and assembling them together in a tree (similar to creating an XML using DOM).

Creating a TextFlow element using an XML:

private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<div>
    <p>
        <img source="air.png"/>
        <span>Flex is a highly productive, free open source framework for building and maintaining expressive web applications...</span>
        <br/>
    </p>
      </div>
</TextFlow>;

private var textFlow:TextFlow = TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);

As you can see TextFilter class is used for importing the XML and creates an instance of TextFlow. The second parameter of the import method tells what format the XML is written in. In this case I am using TLF Markup.

Creating a TextFlow using the FlowElement classes:

var textFlow:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = "Hello, World!";
p.addChild(span);
textFlow.addChild(p);

The Model and formatting information

As noted earlier, the model stores the formatting information too. If you choose to create the TextFlow element using XML, then you can add the properties like attributes on the node you want:

var text:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008" fontSize="14" textIndent="15" marginBottom="15" paddingTop="4" paddingLeft="4">"
       <p>
        <span>There are many </span>
        <span fontStyle="italic">such</span>
    </p>
</TextFlow>;

Or, if you create it out of FlowElement classes, you can do it like this:

var cf:CharacterFormat = new CharacterFormat();
cf.fontSize = 14;
textFlow.characterFormat = cf;

All the properties that can be set for all the nodes are grouped into three types: container, paragraph, and character properties. You can see the API for the flashx.textlayout.formats package here.

Container formats apply on the entire container of text, for example column properties and padding values. Container formats can be applied only on a TextFlow, DivElement, or other class that implements IContainerController. You can apply these properties using an instance of the ContainerFormat class.

Paragraph formats apply to an entire paragraph of text: justification, margins, tab stops. They can be applied on TextFlow, DivElement, and ParagraphElement. You apply these formats using an instance of ParagraphFormat class.

Character formats apply only to a single character or run of characters: font size, color, tracking, kerning, superscript. You can assign them to any FlowElement, thus you can set the font size for an entire story by setting the property on the TextFlow, or the SpanElement. You use a CharacterFormat class to apply the properties.

When you apply a format on a FlowElement, you have two options: to overwrite the existing formats, or to keep the existing ones, and add the new format. Below is code illustrating both options. To keep the existing format, when you create the new format you pass an instance of that format to the constructor.

//overwrite the characterFormat for the TextFlow
var cf:CharacterFormat = new CharacterFormat();
cf.fontSize = 14;
textFlow.characterFormat = cf;

//keeps the existent characterFormat, and change only the font size
var cf:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
cf.fontSize = 14;
textFlow.characterFormat = cf;

Finally, if you apply a font-size change to the TextFlow element, then this change will be applied to all its children that don’t have a font-size explicitly set on them.

Important: every time you apply changes to a TextFlow object that has been displayed, you have to call the method updateAllContainers() on the flowComposer property of the TextFlow object to trigger the update of the display:

   1: textFlow.flowComposer.updateAllContainers();

The View: displaying the text

You’ve learned how to create the model for storing the text using the TextFlow class. Now it is time to see how you can display this text. Basically, you have two options depending on what level of control you need to have on the text. Both methods convert the TextFlow into TextLine instances, which are part of the new Flash Text Engine. In order to display the TextLine you have to add it to a control that is a subclass of DisplayObjectContainer, such as Sprite.

TextLineFactory

If you just want to display the text and you don’t want to interact with it (for example, by selecting parts of it), then you can use TextLineFactory. This class has two static methods, createTextLineFromTextFlow and createTextLinesFromString, which create TextLine objects out of a TextFlow or a string. Here is an example of how to use it:

var sprite:Sprite = new Sprite();
//this serves as the bound for the text
var bounds:Rectangle = new Rectangle(0,0,300,100);
var txtStr:String = "This is sample text showing lines created by TextLineFactory.";
var characterFormat:CharacterFormat = new CharacterFormat();
characterFormat.fontSize = 48;

TextLineFactory.createTextLinesFromString(callback, txtStr, bounds, characterFormat);

//this is the callback function that will be called by createTextLinesFromString() 
//method for each TextLine
function callback(tl:TextLine):void{
    sprite.addChild(tl);
}

Flow Composer

If you want to be able to select or edit, then you have to use the Flow Composer. Every TextFlow instance has an object that implements the IFlowComposer interface. You can use the property flowComposer of the TextFlow to access this object. This object has the methods to associate the text with one or more containers and prepare the text for display.

For the container you can use any instance of a DisplayObjectContainer, such as Sprite for example. In order to link a container to another one (when you do this, if the text overflows the first container, then it will flow into the second container) to support scrolling or container formatting, the DisplayObjectContainer is wrapped inside an instance of DisplayObjectContainerController.

This is how you can add the container to a TextFlow object, and then trigger the formatting and displaying of the text:

var sprite:Sprite = new Sprite();
canvas.rawChildren.addChild(sprite);
var controller:IContainerController = new DisplayObjectContainerController(sprite, 600, 400);
textFlow.flowComposer.addController(controller);
textFlow.flowComposer.updateAllContainers();

Adding interaction capabilities to the TextFlow

If you want to make the text selectable, you have to use a manager, SelectionManager and associate it with the interactionManager property of the TextFlow. You setup the manager like this:

   1: textFlow.interactionManager = new SelectionManager();

After the manager is assigned to the TextFlow’s interactionManager, the TextFlow has access to the event handlers of the manager. For example, it knows when a key is pressed, when the container loses or gains focus, and when text is selected.

If you want to enable editing features on top of selecting features, then you would use EditManager instead of SelectionManager:

   1: textFlow.interactionManager = new EditManager();

And finally, if you want to enable Undo/Redo commands, you use UndoManager, like this:

   1: textFlow.interactionManager = new EditManager(new UndoManager());

Import and Export text

For import/export you use the TextFilter object from the flashx.textlayout.conversion package. You’ve already seen one way to import XML to the TextFlow. What you have to do is this:

   1: var textInput:XML = <TextFlow><div><span>Some text here.</span></div></TextFlow>;
   2: var textFlow:TextFlow = TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);

You can also import plain text (you set the convertor to parse string, by setting the second argument to TextFilter.PLAIN_TEXT_FORMAT):

   1: var textInput:String = "Hello World, this is plain text";
   2: var textFlow:TextFlow = TextFilter.importToFlow(textInput, TextFilter.PLAIN_TEXT_FORMAT);

Text Layout Framework can export text in any one of three formats: plain text, FXG, or Text Layout Format. For example this is how you export XML text from an existing TextFlow instance using Text Layout Format:

   1: var out:XML = TextFilter.export(textFlow, TextFilter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE );

Code time: an example of using the Text Layout Framework in Flex 3.2

If you want to run the example, click here; you can download the project from here. This example uses flowComposer. I use a single container, and the textFlow is created using an XML file. In this XML I have four paragraphs in four languages, two of them are rleft-to-right, and two are right-to-left.

Also I add some controls to change the font size, to change the number of columns, and to change the direction of text for the first two paragraphs.

You can click on the text, scroll, edit, delete, insert, undo, copy/paste and so on.

Without further delay, here is the source code (don’t forget that you need the Flex SDK 3.2, and the three SWC libraries of the Framework; if you choose to download the project, then you’ll have these libraries):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="absolute" creationComplete="init()" horizontalScrollPolicy="off" viewSourceURL="srcview/index.html">
<mx:Script>
    <![CDATA[
        import mx.controls.CheckBox;
        import mx.collections.ArrayCollection;
        import flashx.textLayout.formats.Direction;
        import flashx.textLayout.elements.InlineGraphicElement;
        import flashx.textLayout.events.StatusChangeEvent;
        import flashx.textLayout.formats.ContainerFormat;
        import flashx.textLayout.formats.ICharacterFormat;
        import flashx.textLayout.formats.CharacterFormat;
        import mx.events.SliderEvent;
        import flashx.textLayout.edit.UndoManager;
        import flashx.textLayout.edit.EditManager;
        import flashx.textLayout.container.DisplayObjectContainerController;
        import flashx.textLayout.conversion.TextFilter;
        import flashx.textLayout.elements.TextFlow;


        public var directions:ArrayCollection = new ArrayCollection(
                            [
                                {label:"Left-to-Right", data:Direction.LTR},
                                {label:"Right-to-Left", data:Direction.RTL}
                            ]
                        );

        [Embed(source="air.png")]
        [Bindable]
        static public var imgClass:Class;

        private var _textContainer:Sprite = null;

        private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<div>
 <span>And the text come here...</span>
</div>
</TextFlow>;

        private var _textFlow:TextFlow;

        private function init():void {
            _textContainer = new Sprite();
            canvas.rawChildren.addChild(_textContainer);

            _textFlow = TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);
            _textFlow.flowComposer.addController(new DisplayObjectContainerController(_textContainer, canvas.width-40, canvas.height));
            _textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, picLoaded);
            //adding Select/Edit/Copy/Paste/Undo features
            _textFlow.interactionManager = new EditManager(new UndoManager());
            // initialize with a selection before the first character
            _textFlow.interactionManager.setSelection(0,0);

            _textFlow.flowComposer.updateAllContainers();
        }

        private function picLoaded(event:StatusChangeEvent):void {
            var image:InlineGraphicElement = event.element as InlineGraphicElement;
            _textFlow.flowComposer.updateAllContainers();
        }

        private function changeFontSize(event:SliderEvent):void {
            var cf:CharacterFormat = new CharacterFormat(_textFlow.characterFormat);
            cf.fontSize = event.value;
            _textFlow.characterFormat = cf;
            _textFlow.flowComposer.updateAllContainers();
        }

        private function changeNoColumns(event:SliderEvent):void {
            var cf:ContainerFormat = new ContainerFormat(_textFlow.containerFormat);
            cf.columnCount = event.value;
            cf.columnGap = 15;
            _textFlow.containerFormat = cf;
            _textFlow.flowComposer.updateAllContainers();
        }

        private function changeTextDirection(event:Event):void {
            _textFlow.direction = (event.target as ComboBox).selectedItem.data;
            _textFlow.flowComposer.updateAllContainers();
        }

    ]]>
</mx:Script>
    <mx:VBox x="20" y="20">
        <mx:Canvas id="canvas" width="600" height="400"  backgroundColor="#ffffff" verticalScrollPolicy="auto"/>
        <mx:HBox width="100%">
            <mx:HSlider labels="Font size:" minimum="10" maximum="22" snapInterval="1" change="changeFontSize(event)" enabled="true" />
            <mx:HSlider labels="No of Columns:" minimum="1" maximum="2" snapInterval="1" change="changeNoColumns(event)" enabled="true" />
            <mx:Label text="Text Direction:"/>
            <mx:ComboBox change="changeTextDirection(event)" dataProvider="{directions}"/>
        </mx:HBox>
    </mx:VBox>

</mx:Application>

Conclusion

So, that was my introduction to the Text Layout Framework. If you want to learn more, the first step is to go to the labs page, where you can take a look at the demo application (the one from which I took the screen shots at the beginning of this article). If you click on the small arrow at the top right of this app, you can download the source code for the current panel and see for yourself how it was done. You can also check out this demo, which lets you explore many of the typographic and text layout capabilities of TLF.

You can find the APIs here, and you can download samples for Flash CS4, Flex 3.2, and Gumbo from the labs page.

LATER UPDATE: if you wonder how to add a scrollbar to control the text, read this post.

January 19, 2009 | Filed Under AIR, Flex, Tutorials

Comments

RSS feed for comments on this post.

77 Responses to “How to use Text Layout Framework in Flex 3.2 or AIR 1.5”

mrm [http://blogu.lu/mrm] on January 19th, 2009 2:25 pm

Not a big deal, but line 10 of the first code snippet should read:
10: private var textFlow:TextFlow = TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);
instead of TextFilter.import(…) — that, or the docs are not updated.

Also, what’s with the namespace on the textInput XML root node? I couldn’t find any documentation on the source parameter in TextFilter.importToFlow; any guidance would be appreciated.

And lastly, thank you for a very nice article!
Mihai Corlan on January 19th, 2009 11:46 pm

@mrm

Actually the import method is importToFlow; you can check here: http://livedocs.adobe.com/labs/textlayout/flashx/textLayout/conversion/TextFilter.html#importToFlow()
The other method is called export(); indeed it is strange that is not called import

Regarding the namespace, you can see the use of it in the textlayout_framework_markup.pdf documentation at page 11.

Thanks for the nice words.
Jason Parker [http://www.family-mingle.com] on January 20th, 2009 11:28 pm

A great review

I have struggled with the new Text Layout Framework for a full day.

Only now it is starting to make sense.

Thanks
Leif Wells [http://www.leifwells.com] on January 21st, 2009 12:25 am

This is EXACTLY what I needed for a user group meeting two weeks ago

Thanks for posting this article. I look forward to walking through it tonight.
Mihai Corlan on January 21st, 2009 11:02 am

@Jason Parker
Thanks!

@Leif Wells
If your UG is in Europe we can arrange a Connect session. We are working to create a pool of topics and have them presented to User Groups via Connect
Leif Wells [http://www.leifwells.com] on January 21st, 2009 7:48 pm

I run a couple of user groups in Atlanta, but would love to arrange a connect session with you guys. Since you are in Europe, I suppose that would be either really late or really early. Contact me at leif [dot] wells [at] gmail [dot] com
Nick Belhomme [http://blog.nickbelhomme.com] on January 24th, 2009 9:02 pm

This looks really familiar Thx for the personal presentation today on this topic!

You rock , hope we’ll meet again at one of the next conferences.

Nick Belhomme
Mihai Corlan on January 26th, 2009 7:13 pm

@Nick Belhomme

Thank you! and see you around. Let me know when you create your first Flex or AIR app
Student Geeks - How to use Text Layout Framework in Flex 3.2 or AIR 1.5 [http://student-geeks.com/blog/2009/01/adobe-air/how-to-use-text-layout-framework-in-flex-32-or-air-15/] on January 29th, 2009 6:56 am

[...] Read more [...]
leio on February 1st, 2009 3:59 pm

Hello,need help!
I want create a textFlow , it can write only one line ,just like a textInput.
But when I press “Enter” key,it change to another line,I didn’t found a Property or function can set it,how to do this?
Nabeel on February 9th, 2009 3:09 pm

Hi Mihai
I have a problem I tried both flex 4 and 3.2 with the swc files but the both give me that error :
1046: Type was not found or was not a compile-time constant: ContentElement. tlf Unknown 1234181027306 79
1046: Type was not found or was not a compile-time constant: ContentElement. tlf Unknown 1234181027306 85
1046: Type was not found or was not a compile-time constant: ContentElement. tlf Unknown 1234181027306 86
1046: Type was not found or was not a compile-time constant: ContentElement. tlf Unknown 1234181027306 88
1046: Type was not found or was not a compile-time constant: ElementFormat. tlf Unknown 1234181027306 77
1046: Type was not found or was not a compile-time constant: ElementFormat. tlf Unknown 1234181027306 84
1046: Type was not found or was not a compile-time constant: FontMetrics. tlf Unknown 1234181027306 76
1046: Type was not found or was not a compile-time constant: FontMetrics. tlf Unknown 1234181027306 82
1046: Type was not found or was not a compile-time constant: FontMetrics. tlf Unknown 1234181027306 83
1046: Type was not found or was not a compile-time constant: GroupElement. tlf Unknown 1234181027306 87
1046: Type was not found or was not a compile-time constant: TextElement. tlf Unknown 1234181027306 78
1046: Type was not found or was not a compile-time constant: TextLine. tlf Unknown 1234181027306 80
1046: Type was not found or was not a compile-time constant: TextLine. tlf Unknown 1234181027306 81
1046: Type was not found or was not a compile-time constant: TextLine. tlf Unknown 1234181027322 89

and this is my code:

package {
import flash.display.Sprite;

import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.TextFlow;

public class tlf extends Sprite
{

private var textflow:TextFlow;
private var paragraphe:ParagraphElement;
private var span:SpanElement;

public function tlf()
{
textflow = new TextFlow();
paragraphe = new ParagraphElement();
span = new SpanElement();
span.text = “Nabeel Molham”;
span.fontFamily = “Arial”;
span.fontSize = 30;
span.fontWeight = “Bold”;
paragraphe.addChild(span);
textflow.addChild(paragraphe);
addChild(textflow);
}
}
}
Mihai Corlan on February 9th, 2009 3:23 pm

@Nabeel

Try to use the forum for text layout framework to get some help. I suspect that either the Flex SDk wasn’t the right one or the required Flash Player version was 9 instead of 10. Good luck!
Nabeel on February 10th, 2009 12:10 am

Thanks Mihai
you are right it was the targeting
it should by 10.0.12.36 instead of 10.0.12
Justin Serulneck on February 10th, 2009 4:09 pm

Everything you’ve done here is so fantastic and lends better understanding of all these components. I greatly appreciate the work you’ve put in.

I was wondering if you happen to know, what is the “correct” way to add scrollbar functionality into text flow elements, or flow composers? Is there some sample code?

Also, now that adobe finally gave us a way handle images and text, 1. How can we get text to wrap around the image, or is that not feasible? And 2. How can we modify attributes of the image? (like width and height)? I’m hoping to add drag and drop resize capability.

Thanks again, for all the help!

Justin
Mihai Corlan on February 10th, 2009 5:12 pm

@Justin Serulneck

Some of your questions are on my list of TODO, but never had the time to do it.

However, my understanding is if you want actually to have the text flowing around an image, actually the image has to be outside of the text flow, and have the text-flow using containers that are positioned around the image.

I know that there is no support for events like selecting an image from the text-flow and resize.

You can find more on the forum for text layout engine.

Good luck!
Justin Serulneck on February 12th, 2009 4:17 am

Thanks for the pointer. I’ll take a look through the forums.

Thx,

Justin
Mihai Corlan on February 12th, 2009 9:11 pm

@Justin Serulneck

I just posted an article about adding a scrollbar:

http://corlan.org/2009/02/12/how-to-add-a-scrollbar-to-text-layout-framework/
How to add a scrollbar to Text Layout Framework : Mihai CORLAN [http://corlan.org/2009/02/12/how-to-add-a-scrollbar-to-text-layout-framework/] on February 13th, 2009 4:19 pm

[...] month I wrote an article about using the Text Layout Framework in Flex 3.2 or AIR 1.5. The article was an introductive one, [...]
Justin Serulneck on February 15th, 2009 6:01 am

Awesome! Thanks, I’ll take a look tonight.

Justin
Anne Knoche [http://www.physioSim.org] on February 17th, 2009 4:56 am

One of my biggest needs is the ability to mark up words inside text and get mouseover and click events. The text will be static and it needs to be non-editable and non-selectable and use embedded fonts to get really nice anti-aliasing. I don’t see anything in this article or in my quick forays into the doc that talks about this. Is this not in the text framework? Or am I just a dim bulb (which is often the case I’m afraid). To date I have had to deal with this requirement by creating static text inside Flash and then putting invisible buttons over words to get the events and to put a little highlighting on the word when you mouse over and such. Obviously this is less than ideal when it comes to having to make edits and changes to the text. Requires careful testing to make sure the invisible buttons are still in the correct place.
Mihai Corlan on February 17th, 2009 10:46 am

@Anne Knoche

If you want to control the interaction with the text, just read for a start the “Adding interaction capabilities to the TextFlow” section of my article. If you don’t add the Edit manager, you will have text that is not editable. and so on…

If you want to add click events on the text, use the link element (a).

I think you can do what do you want, you just have to dig a little bit.

All the best!
Ajai on February 24th, 2009 11:25 am

Hi,
Is it possible to add embedded font to textflow.
radha on February 24th, 2009 12:24 pm

How to get the properties of the Text Flow Object
trace(textFlow.fontSize)
Amit on February 25th, 2009 10:07 am

When I tried given example in Air using Flex Builder 3.2.
I got following error :-

ReferenceError: Error #1065: Variable flash.text.engine::BreakOpportunity is not defined.
at flashx.textLayout.formats::CharacterFormat$cinit()
at global$init()
at BaseTextLayoutImporter$cinit()
at global$init()
at global$init()
at flashx.textLayout.conversion::TextFilter$/getImporter()
at flashx.textLayout.conversion::TextFilter$/importToFlow()
at AirRTLTest/init()[D:\flex\flexProjects\AirRTLTest\src\AirRTLTest.mxml:82]
at AirRTLTest/___AirRTLTest_WindowedApplication1_creationComplete()[D:\flex\flexProjects\AirRTLTest\src\AirRTLTest.mxml:2]
at flash.events::EventDispatcher/dispatchEventFunction()

Please Help
Mihai Corlan on February 25th, 2009 11:48 am

@Amit

I have this article on adobe.com:
http://www.adobe.com/devnet/flex/articles/text_layout_framework.html

there is a part that explains how to use the example for an AIR application using AIR 1.5

I presume you don’t have AIR 1.5.
Amit on February 25th, 2009 1:12 pm

Hi Mihai,
thx for reply
but I am using AIR 1.5
Cameron Yule [http://cameronyule.com] on February 26th, 2009 1:31 pm

Hey all, I’ve written a blog post explaining how to use embedded fonts with the Text Layout Framework, in case anyone was wondering why it wasn’t working in Flex 3.2.

http://cameronyule.com/2009/02/embedded-fonts-and-the-text-layout-framework
Rajesh on February 27th, 2009 8:08 am

Hi,

I am trying to implement the functionality to autoSize the Text Layout Framework(sprite and textFlow).

After searching I found that it can not be autoSize as like out normal textFrame.

Please suggest the right method to implement it.

Rajesh
Rajesh on February 28th, 2009 9:32 am

I got it with implementing

textFlow.flowComposer.removeAllControllers();
_controller = new DisplayObjectContainerController(sprite, this.width, newHeight);
textFlow.flowComposer.addController(_controller);
textFlow.flowComposer.updateAllContainers();

Rajesh
Mihai Corlan on February 28th, 2009 7:57 pm

@Rajesh

There you go
Manoj Sinha on March 17th, 2009 3:19 pm

Great article.
I thank you for all your effort. I have a similar application to develope. I used your method. When I use this in datagrid to read data from xml, the _textContainer does not refreshes.
I need to drag/drop the images and texts in line. I am looking for help. Please make this possible. This will help me a lot.
Thanks again.
Hoang Visup on March 18th, 2009 2:33 pm

just about curiousity, how do i ensure the Arabic characters are displaying correctly? I heard that they read from right to left. So i made a test on the Arabic text in the code, example: “hello” then i think the display should be “olleh”. But it is not this way in the example. Second, When i select display “right to left” in the combobox then, in fact, it is right alignment. What do you think about my comment? Any idea to ensure the Arabic correctly display as well? Thanks for your response
Hoang Visup on March 18th, 2009 3:26 pm

Last comment, i found that we can just assigning the Arabic text to TextField.text. Then it can also be displayed as same as the case using Text Layout Framework. it means that language support is not an advantage of Text Layout Framework? And infact, it is more useful if we want to manage text layout (implied from the name)?
Amit on March 21st, 2009 12:23 pm

Hi,
I am creating an ePub reader in Air which supports RTL languages like Arabic also.
Please suggest what process I should follow and how I can effectively use Text Layout Framework for this task.
Insert image from File System into text using the Text Layout Framework | sakri rosenstrom blog [http://www.sakri.net/blog/2009/03/23/insert-image-from-file-system-into-text-using-the-text-layout-framework/] on March 23rd, 2009 11:46 am

[...] How to use the TLF tutorial TLF online forum online TLF documentation addthis_url = ‘http%3A%2F%2Fwww.sakri.net%2Fblog%2F2009%2F03%2F23%2Finsert-image-from-file-system-into-text-using-the-text-layout-framework%2F’; addthis_title = ‘Insert+image+from+File+System+into+text+using+the+Text+Layout+Framework’; addthis_pub = ”; [...]
RIA Devs Blog » Flash Text Engine, Text Layout Framework [http://blog.riadevs.com/2009/03/flash-text-engine-text-layout-framework/] on March 31st, 2009 10:11 pm

[...] Wprowadzenie do TLF, ten artykuł jest również na adobe devnet [...]
Lance [http://www.viatropos.com] on May 3rd, 2009 4:06 am

Just wanted to make some observations/comments about the layout framework.

I wish this text framework had better model-view-controller separation. Because it is not open source, it is not going to be able to compete with what the community can produce in the next year or two.

Some of the things it should include:
- Adding gradient colors to the text dynamically.
- Being able to tween the text lines in a text flow and adjust the selection highlights while they’re tweening, so if it’s 3D you can have it glow and highlight as they rotate (like in the mac RSS screensaver example).
- Being able to customize the effects when the EditManager performs an action. Hardcoding the idea that when you delete or highlight something, it should instantly appear is a huge limitation. Now nobody can make anything NEW out of it, it’s just another text framework like all the others. If you start messing around with the FlowElement and TextLine classes, and try to add the ability to do innovative animations and such, you’ll have to rebuild the entire layout framework because the EditManager and SelectionManager are closed to the public and they have not been designed well.
- Being able to extend the editing functionality and/or edit the EditManager/SelectionManager.

Basically, it should be open source. So us consumers can contribute our ideas to the project and help shape it how we would use it.

I would like to be able to get in there and customize how things look when I edit the text, or when the text is created or highlighted but it’s impossible unless I start from scratch and rebuild everything from the TextLine and FlowElement.

Cheers,
Lance
daslicht on May 6th, 2009 4:13 am

Hello,
where may i get the src from that example:
http://labs.adobe.com/technologies/textlayout/demos/
That would be the ultimative starting point.
Best Regards
dl
Mihai Corlan on May 6th, 2009 11:24 am

@ daslicht

I’m afraind the sources are not available for now. I will post an update when they will be.
Jonecir [http://www.humantech.com.br] on May 27th, 2009 10:45 pm

Hi, nice post.
I’m currently using Flex 3 Builder, which does not support the Text Layout Framework. How do I upgrade to Flex 3.2?
Mihai Corlan on May 28th, 2009 9:20 am

@Jonecir

Basically you download an new Flex SDK from opensource.adobe.com, and then unzip the file and add it to the flex builder. you can find documentation on the URL I gave you about the specific steps.
Amit on May 29th, 2009 8:27 pm

Hi,
I have taken canvas.width = 100%
canvas.height = 100%
Its giving unexpected results–
_textFlow.flowComposer.addController(new DisplayObjectContainerController(_textContainer, canvas.width, canvas.height));
Can you please tell me how to give height and width of _textcontainer in percent, not in pixels.
Actually I want to resize the _textcontainer on canvas resize.
Jonecir [http://www.humantech.com.br] on May 29th, 2009 10:30 pm

Hi Mihai, thanks for your prompt reply. I now have the latest SDK. Another thing: when running your example, the image does not appear. Any suggestions?
Jo [http://www.skyco.de] on June 11th, 2009 12:33 pm

Hello,

we are greatly relieved that you are looking so intensely into typographics! Thanks. One point that is essential for typographers is keeping the original user input, e.g. in color selection.

The immidiate question is: is there a way of storing the originally entered attributes of a style (paragraph or character) with the style … e.g. a free accessible Object?

Why this is important: There is different color sets, like CMYK and RGB. There is no way of matching on a one to one basis, since the two color systems are of different size (multiple results). So: after formatting a text and exporting, one would want to know which color the user entered for a specific format.

The colors are just an example, rounding issue of textsize in didot Point and such are more examples. All would be solved, if we had freely accessible Objects or if (even nicer) all attributes could be set in string form and one could write little converters for application of attributes.
Jo [http://www.skyco.de] on June 16th, 2009 12:03 am

Dear Mihai,

in desperate need of custom format attributes I upgraded now to build 452. I found the id being contained with Textflow, super.

Did I understand that every single format applied to certain textrange becomes in itself a textflow with unique id? Then how would I find the right textflow to change … e.g. in the sample, changeFontSize

IEditManager(_textFlow.interactionManager).textFlow.setStyle(“custom1″,”myOwnValue”);

will set the style, but on a global level, not exclusively on the formatted and selected area.

I would greatly appreciate a hint, been spending days now on this specific issue. Thanks in advance!
Mihai Corlan on June 16th, 2009 10:13 am

@Jo

Please use the product forums on the Labs. There are engineers that response usually to these type of questions. It is impossible to me to act as a support engineer
judah on July 11th, 2009 11:27 pm

Great post!
Do you know if this will support wrapping text around images by the time it is released?
Mihai Corlan on July 12th, 2009 1:51 pm

@judah

I really don’t know. Actually it supports now, but you have to work, it isn’t done automatically for you.
It’s hot, open up a little bit! : Mihai CORLAN [http://corlan.org/2009/07/21/its-hot-open-up-a-little-bit/] on July 21st, 2009 12:31 pm

[...] source. I think this is very exciting for a lot of developers. When I wrote, back in January, a post explaining what is Text Layout Framework and how you can use it with Flex 3.2 (in Flex 4 it is part [...]
Chetan Sachdev [http://cksachdev.blogspot.com] on July 23rd, 2009 9:08 pm

@Mihai
Is there any recording of connect session, on TLF ?
Mihai Corlan on July 24th, 2009 9:54 am

@Chetan Sachdev

Have a look on http://tv.adobe.com (you can find all the sessions from MAX and much more).
FLEX{er} » Blog Archive » Two New Adobe Projects Go Open Source - OSMF & TLF [http://www.flexer.info/2009/07/24/two-new-adobe-projects-go-open-source-osmf-tlf/] on July 24th, 2009 9:55 am

[...] Corlan, Platform Evangelist with Adobe, wrote an article explaining what Text Layout Framework is and how it can be used with Flex 3.2 (in Flex 4 it is part [...]
Amit on July 24th, 2009 5:40 pm

Hi, I am using Flex 3.2 and textlayout_framework_p1_111808 in my project.
I migrated to textlayout_framework_455 to use external css using CSSFormatResolver but not
able to use embedded fonts in TLF.
Please suggest.
Jonecir [http://www.humantech.com.br] on July 24th, 2009 11:09 pm

Hello, is there a way to run an swf flash file inside text layout framework?

I mean, suppose your application allows users to enter their own data in a TLF screen (kind of CMS). What if the user wants to add an swf file? Is this possible? If not, is there a work around for this?

Thanks a lot
khalil on August 3rd, 2009 2:46 pm

I am finding it impossible to have rtl arabic text with linebreak set to explicit. Whenever a rtl text is set with linebreak as explicit it acts like a ltr text. this is extremly problematic…anyone help
在Flex中实现聊天表情图片支持-资料篇 | zrong's Blog [http://www.zengrong.net/?p=721] on August 15th, 2009 12:34 pm

[...] How to use Text Layout Framework in Flex 3.2 or AIR 1.5 [...]
Manoj on September 9th, 2009 5:36 pm

Hi,
How to underline a text and color it in red, without changing the color of text.
erivan on September 10th, 2009 1:16 pm

I have : link example into TextFlow

I need collect the href data to an textInput when the curson is on ‘link example’ words.

I add a Listener:

TextFlow.addEventListener(SelectionEvent.SELECTION_CHANGE,selectionChangeListene r,false,0,true);

and :

private function selectionChangeListener(evt:SelectionEvent):void
{

/// how can I read href tag ?

myTxt.text = evt ???????

}

thanks
judah on October 9th, 2009 12:36 am

If someone comes up with a TextArea using TLF and includes image wrapping please post it here! Thanks

Judah
Guilherme Henrique de Oliveira [http://www.humantech.com.br] on October 9th, 2009 1:57 pm

Use this command to insert an inline image in TLF, you cas use some flash’s and images.

insertInlineGraphic(inlineGraphicElement.source, inlineGraphicElement.width, inlineGraphicElement.height);

http://lyraspace.com/tools/flex_langRef/flashx/textLayout/edit/IEditManager.html
judah on October 9th, 2009 8:39 pm

Hi Guilherme,

That places the image inline with text on either side but it does not wrap multiple lines of text around the image.

For example, if an image is higher than the text line height there is a gap between it,

Incorrect:

tttttttttttttttttttt
tttttttttttttttttttt
IMAGE
IMAGE
IMAGE
tttttttIMAGEtttttttt
tttttttttttttttttttt
tttttttttttttttttttt
tttttttttttttttttttt

Desired:

tttttttttttttttttttt
tttttttttttttttttttt
IMAGEttttttttttttttt
IMAGEttttttttttttttt
IMAGEttttttttttttttt
IMAGEttttttttttttttt
tttttttttttttttttttt
tttttttttttttttttttt

I’d also like to know if there is a way to give an image it’s own space with no text on either side, I think it’s called float, like this,

tttttttttttttttttttt
tttttttttttttttttttt
IMAGE
IMAGE
IMAGE
IMAGE
tttttttttttttttttttt
tttttttttttttttttttt
tttttttttttttttttttt
judah on October 9th, 2009 8:41 pm

The spacing was messed up on the last one. Here is another example of inline (not wrapped),

tttttttttttttttttttt
tttttttttttttttttttt
IMAGE
IMAGE
IMAGE
IMAGEttttttttttt
tttttttttttttttttttt
tttttttttttttttttttt
tttttttttttttttttttt
Amit on October 13th, 2009 8:23 am

Hi,
sample text
not showing bold text in Linux.
Please help…..
Amit on October 13th, 2009 8:26 am

Hi,
<span fontWeight=”bold” >
sample text </span >
not showing bold text in Linux.
Please help…..
judah on October 20th, 2009 11:27 pm

Hi Mihai,

Is the source code for this demo, http://labs.adobe.com/technologies/textlayout/demos/, available yet?

Can we target SDK 3.4 for TLF work or should we target 4.0? Thanks,
Mihai Corlan on October 21st, 2009 5:14 pm

@judah

The source is not available for now. You can use TLF with both Flex 3 and Flex 4 (in Flex 4 it is part of the framework, and it easier to used because there are components that are built using TLF).
Action Script Error Repository » Error: Unknown element http://ns.adobe.com/textLayout/2008::em [http://www.actionscripterrors.com/?p=2157] on October 22nd, 2009 8:28 am

[...] Reason Possibly because the root element of a TextFlow can only be a paragraph or a div. In my code the first element was an image. Read more here… [...]
Action Script Error Repository » ArgumentError: newElement not of a type that this can be parent of [http://www.actionscripterrors.com/?p=2158] on October 22nd, 2009 8:57 am

[...] to contain other elements. For example, a paragraph cannot contain another paragraph. Read more here… Please post your comments to help future [...]
chandrashekar on December 23rd, 2009 9:34 am

Hi

I had a requirement for text to show as curveup and curvedown. So can i able to make the text curve up and down using textlayout framework.If it is please give some hints.

Thanks
chandrashekar on December 23rd, 2009 9:38 am

Below is the link for refer for text curveup and down.
chandrashekar on December 23rd, 2009 9:39 am

https://studio.youdesignit.com/youdesignit.cfm?digital&ProdCatID=101&ProductID=77
green on January 28th, 2010 9:23 am

can you give an idea on how to use text events with textLayout
sunny on January 28th, 2010 12:24 pm

How to deal with bullets in TLF.
Guilherme Herique [http://www.humantech.com.br] on January 28th, 2010 1:42 pm

Hello sunny, you can’t do bullets with native resources of TLF, but you can put images and text in the content, with patience you do a good work. The native resources of TLF, and the source of the TLF Editor is in TLF team – http://blogs.adobe.com/tlf/.

Ty
Shiyaz on January 29th, 2010 7:51 pm

Hello, i have made a swf which can read text from external xml and create dynamic TLF on stage. This swf works fine as stand-alone or if loaded within another main swf. However, when more than one swf with TLF content is loaded, then i get this error:

———————————
TypeError: Error #1034: Type Coercion failed: cannot convert flashx.textLayout.container::DisplayObjectContainerController@eaabc69 to flashx.textLayout.container.IInternalContainerController.
at Vector$object/http://adobe.com/AS3/2006/builtin::push()
at flashx.textLayout.compose::StandardFlowComposer/addController()
at com.tis::TextImage/parseConfig()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.tis::ResourceObject/completeHandler()
at MethodInfo-22()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()
———————————

Individually they work perfect. They work fine if i load only one file. The moment i try to load two files, i get this error. I noticed that the error happens at this line:

flow.flowComposer.addController(fController);

Where am i going wrong?

Thanks for the valuable post.

Regards,
Shiyaz
Shiyaz on February 1st, 2010 12:57 pm

I have found the solution for the *TypeError: Error #1034: Type Coercion failed* error listed above. I just had to import the TextLayout swc in the library of the base file too. Just for the record, these are the various libraries/versions I had to use for the implementation:

* Flash CS4 with Flex SDK 4.0.0.10485.
* TLF_Installed by MXP_11.14.2008 – TextLayout component in the libraries of the base(loader) file and all the FLA files which needs TLF.

Regards,
Shiyaz
sunny on February 9th, 2010 1:56 pm

hello..
How to make the inline graphics non selectable.I want that the inline graphic i have inserted in my text should not be get selected by any mean.

Leave a Reply

RSS for Articles
RSS for Comments
My Twitter
About me
I am a Platform Evangelist for Adobe. The views expressed on this site do not necessarily reflect the views of Adobe Systems Incorporated.
Upcoming Events
- No events.
Event Calendar

« Dec Feb »

January 2009
M T W T F S S

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30 31
Recently Written
Categories
- AIR
- BlazeDS
- Books
- Conferences
- Events
- Flash Builder
- Flash Catalyst
- Flash Player
- Flex
- Flex Builder
- Java
- LCDS
- LiveCycle
- LiveCycle Data Services
- OSP
- Others
- PHP
- Presentations
- Tutorials
- Video
Archives
Blogroll

How to use Text Layout Framework in Flex 3.2 or AIR 1.5

What is the Text Layout Framework

Understanding Text Layout Framework components

The Model and Text Flow hierarchy

The Model and formatting information

The View: displaying the text

TextLineFactory

Flow Composer

Adding interaction capabilities to the TextFlow

Import and Export text

Code time: an example of using the Text Layout Framework in Flex 3.2

Conclusion

Comments

About me

Upcoming Events

Event Calendar

Recently Written

Categories

Archives

Blogroll