Text Layout Framework API update

I’ve recently started working on another multi-lingual Flash project and noticed that Adobe have again changed the API for the Text Layout Framework. While this is to be expected given it’s a beta product and still in development, it can be frustrating having to re-learn what you already know.

With that in mind, here’s examples of both selectable and static text. It’s worth point out these examples are using embedded fonts. I’ve posted an example of using embedded fonts with the text layout framework previously.

These examples were built using TLF build 447, but should also work with build 452 which was released a few days ago. Both those builds are available from Adobe Labs TLF downloads.

Selectable text using TextFlow

var textContainer:Sprite = addChild(new Sprite()) as Sprite;
 
var text:String = '<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">';
text += '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
text += '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>';
text += '</TextFlow>';
 
// some basic text formatting
var format:TextLayoutFormat = new TextLayoutFormat();
format.fontFamily = AvenirLight.NAME;
format.fontSize = 18;
format.color = 0x000000;
format.kerning = Kerning.ON;
format.paragraphSpaceAfter = 15;
format.renderingMode = RenderingMode.CFF;
format.fontLookup = FontLookup.EMBEDDED_CFF;
 
var config:Configuration = new Configuration();
config.textFlowInitialFormat = format;     
 
// make the text selectable
var textFlow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT, config);
textFlow.interactionManager = new SelectionManager();  
 
var exampleContainerWidth:uint = 700;
 
textFlow.whiteSpaceCollapse = flashx.textLayout.formats.WhiteSpaceCollapse.PRESERVE;
textFlow.flowComposer.addController(new ContainerController(textContainer, exampleContainerWidth, NaN));
textFlow.flowComposer.updateAllControllers();

Static, non-selectable, text via StringTextLineFactory

var label:String = 'Some static text';
 
var factory:StringTextLineFactory = new StringTextLineFactory();
factory.compositionBounds = new Rectangle(0, 0, NaN, NaN);
 
// basic text formatting
var format:TextLayoutFormat = new TextLayoutFormat();
format.fontFamily = AvenirLight.NAME
format.fontSize = 18;
format.color = 0x000000;
format.renderingMode = RenderingMode.CFF;
format.fontLookup = FontLookup.EMBEDDED_CFF;
 
factory.text = label;
factory.spanFormat = format;
factory.createTextLines(addTextLineToContainer);
 
private function addTextLineToContainer(textline:TextLine):void
{
	addChild(textline);
}

Published on June 17, 2009 in Flash, Programming
Tags: as3, embedding, Flash, font, text layout framework, typography

Comments

Join the discussion by leaving a comment, or trackback from your own site. (Comment feed)

Neil
02/07/2009

Cameron,

I am trying to keep ahead with the TLF while I’m not so busy.

Your posts are really helpful with this, what I want to know is how to reference an embedded font if the text flow is XML, eg:

var textInput:XML =

אבגד neil הוזחטי ךכלםמןנס עףפץצקרשתְֱֲֳִֵֶַָֹֻּֽֿׁ

;

It works using your method but when I use TextLineFactory.createTextLinesFromTextFlow you cannot pass in a CharacterFormat, so I don’t know where you set FontLookup.EMBEDDED_CFF.

Thanks

Cameron
13/07/2009

Hi Neil,

While I haven’t tested this, I think you could achieve what you’re after by specifying the FontLookup as an attribute of the TextFlow itself (I did something similar in my Superscript/Subscript example)
var textInput:XML =
 
אבגד neil <span fontFamily="YOURFONT" fontLookup="FontLookup.EMBEDDED_CFF">הוזחטי ךכלםמןנס עףפץצקרשתְֱֲֳִֵֶַָֹֻּֽֿׁ</span>
 
;
While I’m not too keen on that implementation – it’s similar to the old HTML method of specifying type options via the font element – it’s the only solution I’m aware of at the moment.

Hopefully a CSS-like method will appear to make the whole process simpler in the near future.

Ben
19/10/2009

Hi Cameron,

Sorry to post this here but I couldn’t see any other way to contact you.

I am having an issue with whitespace disappearing at boundaries. ie. if i have:
Hello world then make it:
Hello World using ‘applyCharacterFormat’ on the ‘hello’ part, it removes the whitespace so i end up with:
Helloworld

Have you come across this at all? Any suggestions on how I can fix this.

Arvind Mehta
16/11/2009

Hi Ben,
if u want to peserve the whitespace then use this property of textLayout Framework.

textFlow.whiteSpaceCollapse = WhiteSpaceCollapse.PRESERVE

Hope it solve your problem.
thanx

Cameron Yule