TLF Markup Overview

Introduction

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.

Elements

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.

9 Responses to TLF Markup Overview

  1. Jloa says:

    Will the FTETextField class implement all methods that aren’t currently (like selection, displayAsPassword, editable mode etc)?Or will there be an alternative to that class which will implement all these methods?I just don’t feel like spending tons of time using the TextFlow class just to render a simple, selectable html text with inline images and css applied to it. For example smth like ‘link text

  2. Alan Stearns says:

    I believe that FTETextField is meant to be a very simple class without any selection features.Is the spark TextArea class what you’re looking for?

  3. D man says:

    The attributes for TLF Markup are documented onlineThat link seems to go to docs that do not refer to the word “markup” at all, nor define terms such as “linkhoverformat”

  4. Alan Stearns says:

    The link is to our TextLayoutFormat object, which contains all the attributes you can assign in markup. Once you import the markup that’s how the attributes are stored in ActionScript.For the Element tags like p and span, you can add the attributes to the tag:<span color=”0xff0000″>red text</span>The Format tags like linkHoverFormat expect a TextLayoutFormat with attributes set there. Here’s a full TextFlow example with a link whose text turns red when you hover over it:<TextFlow whiteSpaceCollapse=”collapse”xmlns=”http://ns.adobe.com/textLayout/2008″><p><a href=”url”><linkHoverFormat><TextLayoutFormat color=”0xff0000″/></linkHoverFormat><span>link</span></a></p></TextFlow>

  5. Jorge says:

    Sorry to tell you this, guys, but the documentation for using the link*****Format is simply inexistent.It’s a shame that I simply can’t find *ANY* working example of this on any page for the version shipped with Flex 4.I had to read a post *comment* to find out that after all I had to use a TextLayoutFormat inside it.Hope you improve this because your doing an excellent job on TLF.But, back to the critics, why the heck isn’t this working?:<s:RichEditableText styleName=”links” width=”235″ editable=”false”><s:TextFlow whiteSpaceCollapse=”collapse”><s:p><s:a href=”url”><s:linkHoverFormat><s:TextLayoutFormat color=”0xff0000″/></s:linkHoverFormat><s:span>link</s:span></s:a></s:p></s:TextFlow></s:RichEditableText>I had to substitute the TextFlow tag by be content tag to make it work. Where is this explained?Sorry for being aggressive, but please understand my frustration.Keep up the good work and please improve the examples.

  6. Alan Stearns says:

    I’ll see that we add an mxml example of using a TextLayoutFormat inside of a link element.On your RichEditableText code, take a look at the RichEditableText example in the documentation – it nests a TextFlow object inside of a textFlow property (you can also use content, but the docs recommend setting textFlow). So your code should look like this:<s:RichEditableText styleName=”links” width=”235″ editable=”false”><s:textFlow><s:TextFlow whiteSpaceCollapse=”collapse”><s:p><s:a href=”url”><s:linkHoverFormat><s:TextLayoutFormat color=”0xff0000″/></s:linkHoverFormat><s:span>link</s:span></s:a></s:p></s:TextFlow></s:textFlow></s:RichEditableText>

  7. dbam says:

    I recently updated to Flex SDK 4.1 from 4.0, just to find out that all my markup styles got messed up.
    I’m struggling to get named style formats to work, without any progress…
    What used to work with SDK 4.0…

    TextFlow xmlns=’http://ns.adobe.com/textLayout/2008′
    format id=’body’ fontFamily=’EmbeddedFont’ textAlign=’left’ fontSize=’18’/
    div
    p format=’body’
    span Lorem /span
    /p
    div
    /TextFlow

    …now doesn’t gets styled by body.
    Anybody has a solution?
    A link to any relevant post/page would be lovely!

  8. FXG says:

    How to convert TextLayoutFormat to FXG?