Posts in Category "TLF"

TLF 2.0 Changes: SubParagraphGroupElements and typeName applied to TextFieldHTMLImporter and CSSFormatResolver

Changes made to the TLF 2.0 are being used to improve theTextFieldHTML importer. First note that this importer is intended for compatibility with the TextField.htmlText property. It’s not intended to be a general purpose HTML importer.

The SubParagraphGroupElement

In TLF 1.1 and earlier There was no equivalent of HTML’s nested spans. TLF 2.0 adds the SubPargraphGroupElement (in markup <g>). SubParagraphGroupElements can be a child of a ParagraphElement, LinkElement, TCYElement or another SubParagraphGroupElement. These are useful for creating nested text elements that share some formatting.

The FlowElement typeName property

All TLF elements now have a typeName property. This property is initialized to the string used when exporting TLF markup. This table shows the default class names and default typeNames for new instances of that class. Note that typeName is a read/write property and clients may manipulate it.

DivElement div
InlineGraphicElement img
LinkElement a
ListElement list
ListItemElement li
ParagraphElement p
SpanElement span
SubParagraphGroupElement g
TabElement tab
TextFlow TextFlow

Note that TLF always converts TabElement and BreakElement elements into the tab and newline character so normally they disappear from the TextFlow and are left off this table.

HTMLImporter Changes to Support Unknown Tags

The HTML importer now preserves unrecognized element tags, for example <foo>Text</foo>, by creating a TLF element and setting its typeName to be an element of that tag. The goal of this is to allow importing of HTML with custom tags and connecting a stylesheet with typename selectors that match through an IFormatResolver. When the importer encounters an unknown tag the rule it uses is if the unknown tag has one child element that child gets its typeName set to the unknown tag. If two or more elements are created than a <div> or a <g> as the parent of the children with its typeName set.

For example :

Import this HTML:
to create TLFMarkup:
<p typeName=”foo”><span>Text</span></p>

Import this HTML:
to create TLFMarkup:
<div typeName=”foo”><p><span>Hello</span></p><p><span>World</span></p></div>

Import this HTML:
to create TLFMarkup::
<p><g typeName=”foo”><span fontWeight=”bold”>bold</span><span>normal</span></g></p>

Import this HTML:
to create TLFMarkup::
<p><span typeName=”foo”>asdf</span></p>

Warning: TLF’s HTMLExporter converts all tag names to uppercase. So typeName=”foo” exports to <FOO>. The TLF markup exporter preserves case as shown above.

SubPargraphGroupElement and the HTML Importer

Previously the importer was unable to preserve nested span elements with formatting. For example:
<font size=”18″><span>Normal <font color=”#0000ff”>BLUE</font> Normal</span></font>

In 1.0 this content created 3 spans with different formatting like this:
<p><span fontSize=”18″>Normal </span><span color=”#0000ff” fontSize=”18″>BLUE</span><span fontSize=”18″> Normal</span></p>

In 2.0 this content creates a group with three span elements:
<p><g fontSize=”18″ typeName=”span”><span>Normal </span><span color=”#0000ff”>BLUE</span><span> Normal</span></g></p>

This example becomes even more interesting if the <span> is changed to a <foo> and CSS formatting is connected.

typeName and CSSFormatResolver

This can all be used to improve the connection of CSS stylesheets to a TextFlow using the IFormatResolver interface. This was originally described in an older blog post.

I’ve updated the Flex based CSSFormatResolver example to leverage the typeName property as well as including a demonstration of a styled “foo” tag. It’s attached here. Note: You will have to adjust the library paths.

For those requesting a non-Flex version of CSSFormatResolver I attached a sample here. Note: You will have to adjust the library paths.

Padding Changes in TLF 2.0

TLF has 4 padding properties: paddingLeft, paddingRight, paddingTop and paddingBottom. In TLF 1.0 the padding properties only applied to TextFlow and ContainerController objects. The effective padding on each side of each container is the sum of the two paddings.

TLF 2.0 adds additional support for padding on DivElements, ParagraphElements, InlineGraphicElements as well as the new list related elements ListElement and ListItemElement. Each element will have a padding specified inset around it.

During import of TLF markup padding properties are ignored on these additional classes unless the attribute version="2.0.0" is specified on the TextFlow tag. The goal is that existing markup won’t render differently if padding properties were specified on elements that didn’t implement padding in 1.0.

The padding properties don’t inherit by default. If not specified they have their default value. In 1.0 and 1.1 the default value was "0". In TLF 2.0 this default value is "auto". For all elements except ListElement "auto" is interpreted as "0".

For ListElements "auto" is "0" except on the start side of the list where the value of the new listAutoPadding property is used. The default value of listAutoPadding is 40. This was done to give lists a default indent.

The following markup creates a list with the marker placed outside the box of the ListItem.

<TextFlow><list><li>First list item</li></list></TextFlow>

Without listAutoPadding the list item would have no padding and the marker would be to the left of the clip and would not be visible. TLF 2.0 applies the listAutoPadding to the start side and indents the list 40 pixels and places the outside marker in the visible area to the left side of the indentation.

Flex 4 Updates For TLF 2.0

TLF 2.0 is not a drop-in replacement into Flex 4. To even get it running changes are needed to Flex 4.0.T wo files need to be replaced in Flex 4 and spark.swc needs to be rebuilt.  The files, and, are available for download here.

These changes were tested with Flex 4.0 SDK build 14159. I believe the same changes will work with Flex 4.1. To rebuild Flex with these changes:
1) From download the “Open Source Flex SDK” you wish to modify.
2) replace the two files with the above modified versions.
3) run “ant -q main” in the frameworks directory
4) replace spark.swc with the one you just built.

There are other known issues. The biggest one is that TLF changed selection to permit inclusion of the final paragraph terminator in the selection from the selectAll API. This gives more consistent highlighting but caused some problems for Flex code. Fixes for this issue are not available for 4.0/4.1.

UPDATE For Flex 4.1

The changes for Flex 4.1 are to the same two files but the source files have changed in the Flex SDK.  I posted 4.1 versions here:

I’ve also seen the problem with building datavisualization.  I solved by copying manifest_datavisualization.xml to manifest.xml in the frameworks/projects/datavisualization directory.

TLF Now on SourceForge

Since we finished the 1.1 release, we’ve been working on more performance improvements, fixing bugs and adding list and float features. What we’re working on now will eventually become our 2.0 release. The official release will take a while as Adobe products integrate, test and ask for more changes. We don’t want to wait that long, so we’ve created an open source repository on SourceForge to show our in-progress work.

We’re still working on the documentation pages and keeping the repository current with our daily changes, but this week’s code is now available. It’s in a preview state (lists aren’t completely done, and there are some bug regressions in links) but we hope people can take a look at the new features and performance gains and give us early feedback on how we can further improve the code. We’re also hoping that being on SourceForge will make it easier for people outside Adobe to submit patches (for those so inclined).

TLF Update March 2010

FlashBuilder 4.0 is Released

FlashBuilder 4.0 includes Flex 4.0. TLF 1.0 – the official 1.0 release – is included as textLayout.swc. FlashBuilder is available here.

And of course TLF 1.0 and Flex 4.0 are opensource. The Flex 4 release with Flex 4 and TLF 1.0 source is available here: Flex4 Download

Flex 4.1 Nightly Builds Includes TLF 1.1

Flex 4.1 is not yet released but its opensource tree and nightly builds include TLF 1.1

TLF 1.1 has significant performance improvements for long documents. Scrolling and editing of long documents are both dramatically improved. Try it out! We’re looking for feedback and help in finding issues. You can pull textLayout.swc out of the Flex 4.1 nightly builds.

TLF Showcase: LovelyReader has a web and desktop epub reader based on the new text features in Flash Player 10. Text resizes and reflows in layouts you choose. You can navigate with hotkeys or a table of contents. All the text is searchable, and you can add notes. There’s a longer feature list and a demo here:

TLF Showcase: Readefine

Anirudh Sasikumar of the Adobe Flex Evangelism team created an amazing app called “Readefine” that demonstrates the power of the Text Layout Framework. Readefine imports any HTML, RSS feed, or plain text data and displays it as organized multi-column TLF text adjusted for readability.

URL here:

Be sure to check it out. Great work, Anirudh!

TLF Markup Overview


The goal of this post is to give some information on TLF Markup. There is no DTD or other schema available at this time.

TLF Markup is converted to and from TextFlows using the TextConverter class. See the examples.

The attributes for TLF Markup are documented online and in the TextLayoutFormat class page bundled with the Flex 4 documentation. Get the documentation appropriate to the build you downloaded gumbo from here. Select the download from the “Language Reference Download” column.


The elements in TLF markup are all in the flashx.textLayout.elements package. This table maps elements to TLF classes and lists their allowed children.

XML Tag AS3 Class Allowed Children Elements/Notes
TextFlow TextFlow div, p, tcy, a, img, span, br, tab, format, linkNormalFormat, linkHoverFormat, linkActiveFormat, and raw text
div DivElement div, p, tcy, a, img, span, br, tab, linkNormalFormat, linkHoverFormat, linkActiveFormat, and raw text
p ParagraphElement tcy, a, img, span, br, tab, linkNormalFormat, linkHoverFormat, linkActiveFormat, and raw text
a LinkElement tcy, img, span, br, tab, linkNormalFormat, linkHoverFormat, linkActiveFormat, and raw text
linkNormalFormat TextLayoutFormat attributes overrides for link in normal state.
linkActiveFormat TextLayoutFormat attributes overrides for link in active state.
linkHoverFormat TextLayoutFormat attributes overrides for link in hover state.
tcy TCYElement a, img, span, br, tab, linkNormalFormat, linkHoverFormat, linkActiveFormat, and raw text
img InlineGraphicElement none allowed. see docs for additional attributes
span SpanElement br, tab and raw text
br BreakElement none allowed. Is normalized into a newline character by importer.
tab TabElement none allowed. Is normalized into a tab character by importer.

The Text Layout Framework is now Open Source!

Today we’re making the announcement that the Text Layout Framework is being released as open source technology. We’re very excited about opening our hard work to the world and can’t wait to see your feedback and contributions!

We’re releasing the source code and accepting new code as part of the Flex bugbase with a specific TLF tag. More information on the Flex bugbase and contributing to TLF can be found on our new open source web page at:

Find out more on the announcement from the following sources:

Tom Barclay wrote on the Flash Platform blog about TLF and Open Source Media Framework announcement, including highlighting some of the excellent technology already powered by TLF:

Dave McAllister describes the Open@Adobe strategy: Presentations Text Powered by TLF

Adobe just released a preview of Presentations, a new online service that lets people easily create and collaborate on presentations. The Text Layout Framework is used for all the text objects in the slides. Here is what Norman Stratton of the Presentations team had to say about his experience with TLF:

“The Text Layout Framework saved me a boat load of time and allowed for features I wouldn’t have had time to write using the older text technology. I started writing the text objects using regular TextArea and switched to the Text Layout Framework as soon as it was stable enough, and I could get consensus to switch to Player 10. Switching to the Text Layout Framework let me get rid of over half my old code and made text support much more stable. I can only imagine what I would have had to do to get the same functionality the old way (and I try not to think of it).”

Be sure to check out the preview on Adobe Labs: