Text Layout Engine: TruncationOptions

Streda, Október 14th, 2009
Text Layout Engine: TruncationOptions

Table of contents for Text Layout Engine

  1. Text Layout Engine in Flex 3
  2. Text Layout Engine: Fit text into rectangle
  3. Text Layout Engine: TruncationOptions

This is same example as yesterday (Fit text in rectangle with Text Layout Engine), but I’ve added one more switch. You can decide if you want use TruncationOptions or not. Reason why I want to show this to you is that it works differently. I do not know if this is feature or bug, but try to tell me your opinion in comments. When I use TruncationOptions in this way:

var truncationOptions:TruncationOptions = new TruncationOptions('...',3);
factory.truncationOptions = truncationOptions;

all works nice and text is fitted into rectangle. But when I do not include truncation last line of text is out of the rectangle if any pixel line of text line is inside rectangle. Maybe there is some other property which can handle this situation, but I’m not really aware of it. Do you know about such property?

Try it in this example:

id="TextLayoutEngineExamples" width="100%" height="400"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> width="100%" height="400" name="TextLayoutEngineExamples" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">

and here is source code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="fit()"
	backgroundColor="0x333333" color="0xffffff">
 
	<mx:Style source="styles/fonts.css"/>
 
	<mx:RadioButtonGroup id="radioGroup" />
 
	<mx:VBox width="100%" height="100%">
		<mx:HBox>
			<mx:RadioButton id="radioButton1" label="Don't truncate" value="false" group="{radioGroup}"	selected="true" />
			<mx:RadioButton id="radioButton2" label="Truncate" value="true" group="{radioGroup}" />
		</mx:HBox>
		<mx:HBox width="100%">
			<mx:Label text="Text:"/>
			<mx:TextInput id="txtInput" color="0x000000" width="100%" change="fit()" text="Text Layout Engine: Fit Text into Rectangle"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Font Size:"/>
			<mx:HSlider id="fsSlider" liveDragging="true" minimum="6" maximum="50" snapInterval="1" value="14"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Text Width:"/>
			<mx:HSlider id="wSlider" liveDragging="true" minimum="0" maximum="500" snapInterval="1" value="100"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Text Height:"/>
			<mx:HSlider id="hSlider" liveDragging="true" minimum="0" maximum="500" snapInterval="1" value="100"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Fit font to do not truncate text:"/>
			<mx:CheckBox id="chbTruncate" selected="false" change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="isTruncated?"/>
			<mx:Canvas width="20" height="20" backgroundColor="0xff0000" 
				visible="{!isTruncated}" includeInLayout="{!isTruncated}"/>
			<mx:Canvas width="20" height="20" backgroundColor="0x00aa00" 
				visible="{isTruncated}" includeInLayout="{isTruncated}"/>
		</mx:HBox>
		<mx:UIComponent id="ui" width="100%" height="100%">
 
		</mx:UIComponent>
	</mx:VBox>
 
	<mx:Script>
		<![CDATA[
			import assets.TLEAssets;
			import flashx.textLayout.factory.TruncationOptions;
			import flash.text.engine.Kerning;
			import flash.text.engine.FontLookup;
			import flash.text.engine.RenderingMode;
			import flashx.textLayout.formats.TextLayoutFormat;
			import flashx.textLayout.factory.StringTextLineFactory;
 
			private var sprite:Sprite;
 
			[Bindable] public var isTruncated:Boolean;
 
			public function fit(fs:int = -1, cnt:int = -1):void
	        {
	        	if (sprite == null)
	        	{
	        		sprite = new Sprite();
	        		ui.addChild(sprite);
	        	}
	        	while (sprite.numChildren > 0)
	        	{
	        		sprite.removeChildAt(0);
	        	}
	            var factory:StringTextLineFactory = new StringTextLineFactory();
 
	            factory.compositionBounds = new Rectangle( 10, 10, wSlider.value, hSlider.value );
 
	           	if (fs == -1)
	           		fs = fsSlider.value;
 
	            var format:TextLayoutFormat = new TextLayoutFormat();
	            format.fontFamily = "Verdana, _sans";
	            format.fontSize = fs;
	            format.color = 0x000000;
	            format.textAlpha = .9;
	            format.kerning = Kerning.ON;
	            format.renderingMode = RenderingMode.CFF;
				format.fontLookup = FontLookup.EMBEDDED_CFF;
	            factory.spanFormat = format;
 
				if (radioGroup.selectedValue == true)
				{
					var truncationOptions:TruncationOptions = new TruncationOptions('...',3);
					factory.truncationOptions = truncationOptions;
				}				
 
	            factory.text = txtInput.text;
	            factory.createTextLines( useTextLines );
 
	            isTruncated = factory.isTruncated;
 
	            if (chbTruncate.selected && isTruncated && fs > 10 && cnt < 50)
	            {
	            	fs--;
	            	cnt++;
	            	fit(fs, cnt);
	            }
 
	            sprite.graphics.clear();
	            sprite.graphics.beginFill(0x555555,.5);
	            sprite.graphics.drawRect( 10,10, wSlider.value, hSlider.value );
	            sprite.graphics.endFill();
	        }
 
	        private function useTextLines( line:DisplayObject ):void
	        {
	            var displayObject:DisplayObject = sprite.addChild( line );
	        }
 
		]]>
	</mx:Script>
</mx:Application>

Let me know, what you think about it…

P.S. I have other example with use TextFlow component with TextFlowTextLineFactory (graphics included within the text) instead of using StringTextLineFactory. I will post it later today or tommorow. Stay tuned


tagged under: .

ABOUT THIS AUTHOR

No Comments Yet

You can be the first to comment!

Sorry, comments for this entry are closed at this time.

Images is enhanced with WordPress Lightbox JS by Zeo