Posts in Category "Examples"

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.

Using TLF with MXML Tutorial on InsideRIA

An excellent tutorial on how to use the Text Layout Framwork with MXML tags was written by Elad Elrom on InsideRIA. This is great info for anyone looking to use TLF in Flex! Check it out here:

Utilizing Flash Text Layout Framework using MXML tags

Example: Adding a scrollbar in Flex

Mihai Corlan posted a useful example on his blog on how to add a scrollbar for a TextFlow.

See it here: How to add a scrollbar to Text Layout Framework.

IFormatResolver And Using CSS With TLF

TLF supports a new property on TextFlow called formatResolver of type IFormatResolver. Clients can supply an implementation that can be used to do CSS or “based-on” styling (ala traditional word processors).

Continue reading…

ActionScript Pagination Example

NOTE: Updated to TLF Build 460.

The Pagination example in the TextLayoutFramework is posted to build with Adobe Flash CS4 Professional and the TextLayout plugin. Its also possible to build this example with Flex as an ActionScript only project. It does require the Flex 3.2 or Flex gumbo SDK.

I’ve posted the actionscript version that builds with Flexbuilder here: Download file

This version doesn’t have the buttons the Flash Pro version has. Use page up/page down to switch between chapters and the arrow keys to move between pages.

Both the ActionScript version and the Flash Pro version use to manage the paginated view. This is example code that you can use to build your own paginated view. The pagination widget adds new containers until all the text is in a container and then displays some number of containers emulating columns. It supports resizing the visible area. One of the goals was to avoid recomposing every time the visible area changed by a small amount. Hence the decision to relayout during resize has some heuristics.

Note that the labs release has bugs (since fixed) in displaying selections when some of the containers are not visible. This example doesn’t make use of an interactionManager due to those bugs.

Text Layout Markup in Flash CS4

One of the powerful features of TLF is that anything you create can be imported/exported in XML. In this post I’m going to explain the tools we provided for working with Text Layout Markup in the Flash CS4 Component.

Continue reading…

World Class Text Tour Source Code

You’ve probably noticed that the front page of our Adobe Labs release contains an excellent set of demos called the ‘World Class Text Tour’. What you may not have realized is that we have provided the Flash CS4 source for all of these demos!

Continue reading…

Embedded Font Subsetting Using DefineFont4

The first tidbit of information I would like to share with you is how to use DefineFont4 to selectively embed glyphs from a font for use in Text Layout Framework, also knowing as font subsetting. While subsetting is not new to Flash via DefineFont3, it is limited to little more than embedding the outlines of glyphs. With DefineFont4, you are able to embed a complete portion of an OpenType font, including the tables (horizontal/vertical metrics, ligatures, kerning, GSUB, GPOS, etc…) that TLF has excellent support for. This is absolutely essential for fully supporting many complex scripts. Although currently you are required to use Flex Gumbo to get access to DefineFont4, I will show you how to use it no matter what type of Flash project you are working on by creating a font SWF. This is valuable knowledge for taking full advantage of TLF without burdening your users with the weight of embedding an entire font. It is especially important when including text from a font such as Adobe Song Std. Weighing in at a hefty 14.8MB it would be ridiculous to embed the entire font, but this should not stop you from taking advantage of all the new features in TLF.

Continue reading…