Overview of theText Layout Framework
By Mathew Fabb
Who Am I
I’m a Flash/Flex developer that has been doing Flash work from the tail-end of Flash 4 and the beginning of Flash 5
I recently left Questrade, and start work at DesignAxiom in December
I’ve been doing a technical edit of Wrox’s Professional Flex 3 Authored by: Joseph Balderson (aka
JoeFlash), Andrew Trice, Peter Ent,Joe Berkovitz, Tom Sugden,Todd Prekaski, David Hassoun, andJun Heider.
Text Layout Framework
Flash got a new way to display text with version 10 called Flash Text Engine (FTE)
FTE was created by the InDesign team API for FTE is very low-level This means a high level API is needed to make it
easy for most developers and designers to use The Text Layout Framework (TLF) is Adobe’s take on
this high level API Because FTE is low-level any 3rd party company,
organization or developer can come up with their own framework or set of components for FTE
Low-level API, high level API done in ActionScript seems to be the future direction of the Flash Player
Text Layout Framework
So what does the TLF give us? Bidirectional text, vertical text and over 30
writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, Tate-Chu-Yoko (horizontal within vertical text) and more.
Text with inline graphics (images, SWFs or any DisplayObject)
Multiple columns of text with text flow and text selection through these columns
“Print-quality typography for the web” meaning kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
Text Layout Framework
Enough talk! Demo time! Links:
Pagination example Highlight adornment example Spell check adornment example Editability example (demonstrating the
TLF undo manager) Note: These the source for these
examples are available with the TLF downloads on Adobe Labs
Text Layout Framework
TLF can be used in both Flash CS4 and the Flex Framework (version 3.2 and the upcoming Flex 4 “Gumbo”)
For Flash CS4 there is a new component called TextLayout that uses the TLF
For Flex 4 the FxTextArea component is built off of the TLF
Outside of these components, the TLF can be accessed in ActionScript code in Flex 3.2, Flex 4 and Flash CS4
Text Layout Framework
Flash CS4 Text Layout panel
Text Layout Framework
Text Layout Framework
TLF consists of 3 SWC files: textLayout_core.swc
Handles storage of text, the creation of text containers, and the display of text
Contains the majority of the framework code and TLF cannot be used without this component
textLayout_conversion.swc Used to import and export text from the TLF Not needed if the text is compiled directly into the
SWF textLayout_edit.swc
Used to make text selectable, editable and contains the undo manager code
Text Layout Framework
FTE classes can be found in the flash.text.engine.* namespace The old Flash text classes are found one
level up in the flash.text.* namespace
TLF classes can currently be found in the flashx.* namespace
TLF is based on the MVC pattern
Text Layout Framework
TLF markup <TextFlow xmlns="http://ns.adobe.com/textLayout/2008" fontSize="14">
<div><p>This is an example of Text Layout Framework Markup.</p> <p color="#0000ff">
<span font Style='italic'>This is the first span of the second paragraph.</span>
<span color="#ff0000">This is the second span of the second paragraph.</span>
</p></div><div><p>This is the second div in the markup example.</p></div>
</TextFlow>;
Text Layout Framework
Text Layout Framework
TLF’s Text Flow Hierarchy
Text Layout Framework
Links Text Layout Framework on Adobe
Labs Text Layout Framework Team blog