<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>franto.com &#187; Text Layout Engine</title>
	<atom:link href="http://franto.com/category/development/flex/text-layout-engine/feed/" rel="self" type="application/rss+xml" />
	<link>http://franto.com</link>
	<description></description>
	<lastBuildDate>Wed, 09 May 2012 19:38:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Text Layout Engine: Fit text into rectangle</title>
		<link>http://franto.com/text-layout-engine-fit-text-into-rectangle/</link>
		<comments>http://franto.com/text-layout-engine-fit-text-into-rectangle/#comments</comments>
		<pubDate>Tue, 13 Oct 2009 11:15:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Text Layout Engine]]></category>

		<guid isPermaLink="false">http://franto.com/?p=1040</guid>
		<description><![CDATA[This is first example in serie of examples of showcase how to use <strong>Text Layout Engine</strong> (mainly for Flex 3). 

<strong>Here is quick description:</strong> I need to fit text in rectangle (need it for our <strong><a href="http://www.goalscape.com">Goalscape</a></strong> project). I want to be able to change width, height, font size and text of course.]]></description>
			<content:encoded><![CDATA[<div class='series_toc'><h3>Table of contents for Text Layout Engine</h3><ol><li><a href='http://franto.com/text-layout-engine-in-flex-3/' title='Text Layout Engine in Flex 3'>Text Layout Engine in Flex 3</a></li><li>Text Layout Engine: Fit text into rectangle</li><li><a href='http://franto.com/text-layout-engine-truncationoptions/' title='Text Layout Engine: TruncationOptions'>Text Layout Engine: TruncationOptions</a></li></ol></div> <div class="TweetButton_button" style="float: right; margin-left: 10px;;height:20px;margin-bottom:5px;"><a href="http://twitter.com/share data-url="http://franto.com/text-layout-engine-fit-text-into-rectangle/" data-text="Text Layout Engine: Fit text into rectangle"data-count="vertical" data-lang="en" data-related="Flex,Text+Layout+Engine""><img src="http://franto.com/blog2/wp-content/plugins/tweetbutton-for-wordpress/images/tweet.png" style="border:none" /></a></div>
<p>This is first example in serie of examples of showcase how to use <strong>Text Layout Engine</strong> (mainly for Flex 3). </p>
<p><strong>Here is quick description:</strong> I need to fit text in rectangle (need it for our <strong><a href="http://www.goalscape.com">Goalscape</a></strong> project). I want to be able to change width, height, font size and text of course. In <strong>Text Layout Engine</strong> this can be done very easily. All you need to do is create correct format for your text, and set <strong>compositionBounds</strong> for text line factory. I will use <strong>StringTextLineFactory</strong> class, which provides a simple way to create <strong>TextLines</strong> from a string. Even I add also <strong>TruncationOptions</strong>, which specifies options for limiting the number of lines of text created by a text line factory and for indicating when lines have been left out.  I&#8217;m using <strong>TruncationOptions</strong>, because I want use maximum of 3 lines and if text is too long I want add &#8230; at the end. This is done automatically in <strong>Text Layout Engine</strong> and I do not need to implement by myself.</p>
<p>Only problem I see, that result .swf file size is over 500kB even builded as Release version (Debug version has 692kB). It&#8217;s because of <strong>Text Layout Engine</strong> and <strong>Flex framework</strong> are included in .swf. But because I will use it in AIR application, it&#8217;s ok for me.</p>
<p>I have created Flash demo for you, but it works just in Flash Player 10, because of Text Layout Engine. Just play with sliders and write your custom text to see effect. In case text will be truncating you will see <span style="color:#008800">green square</span>, otherwise there will be <span style="color:#aa0000">red square</span> (not truncated).<br />
<!--start_raw--><br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br />
                        id="TextLayoutEngineExamples" width="100%" height="350"<br />
                        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"><param name="movie" value="http://franto.com/uploads/examples/textLayoutEngine/fit/TextLayoutEngineExamples.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#869ca7" /><param name="allowScriptAccess" value="sameDomain" /><embed src="http://franto.com/uploads/examples/textLayoutEngine/fit/TextLayoutEngineExamples.swf" quality="high" bgcolor="#869ca7"<br />
                                width="100%" height="350" name="TextLayoutEngineExamples" align="middle"<br />
                                play="true"<br />
                                loop="false"<br />
                                quality="high"<br />
                                allowScriptAccess="sameDomain"<br />
                                type="application/x-shockwave-flash"<br />
                                pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object><br />
<!--end_raw--></p>
<p>And this is source code</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">&lt;?</span>xml <span style="color: #004993;">version</span>=<span style="color: #990000;">&quot;1.0&quot;</span> encoding=<span style="color: #990000;">&quot;utf-8&quot;</span><span style="color: #000066; font-weight: bold;">?&gt;</span>
<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Application xmlns<span style="color: #000066; font-weight: bold;">:</span>mx=<span style="color: #990000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> layout=<span style="color: #990000;">&quot;absolute&quot;</span> applicationComplete=<span style="color: #990000;">&quot;fit()&quot;</span><span style="color: #000066; font-weight: bold;">&gt;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Style <span style="color: #004993;">source</span>=<span style="color: #990000;">&quot;styles/fonts.css&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>VBox <span style="color: #004993;">width</span>=<span style="color: #990000;">&quot;100%&quot;</span> <span style="color: #004993;">height</span>=<span style="color: #990000;">&quot;100%&quot;</span><span style="color: #000066; font-weight: bold;">&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox <span style="color: #004993;">width</span>=<span style="color: #990000;">&quot;100%&quot;</span><span style="color: #000066; font-weight: bold;">&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Label <span style="color: #004993;">text</span>=<span style="color: #990000;">&quot;Text:&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>TextInput id=<span style="color: #990000;">&quot;txtInput&quot;</span> <span style="color: #004993;">width</span>=<span style="color: #990000;">&quot;100%&quot;</span> <span style="color: #004993;">change</span>=<span style="color: #990000;">&quot;fit()&quot;</span> <span style="color: #004993;">text</span>=<span style="color: #990000;">&quot;Text Layout Engine: Fit Text into Rectangle&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Label <span style="color: #004993;">text</span>=<span style="color: #990000;">&quot;Font Size:&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HSlider id=<span style="color: #990000;">&quot;fsSlider&quot;</span> liveDragging=<span style="color: #990000;">&quot;true&quot;</span> minimum=<span style="color: #990000;">&quot;6&quot;</span> maximum=<span style="color: #990000;">&quot;50&quot;</span> snapInterval=<span style="color: #990000;">&quot;1&quot;</span> <span style="color: #004993;">value</span>=<span style="color: #990000;">&quot;14&quot;</span>
				<span style="color: #004993;">change</span>=<span style="color: #990000;">&quot;fit()&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Label <span style="color: #004993;">text</span>=<span style="color: #990000;">&quot;Text Width:&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HSlider id=<span style="color: #990000;">&quot;wSlider&quot;</span> liveDragging=<span style="color: #990000;">&quot;true&quot;</span> minimum=<span style="color: #990000;">&quot;0&quot;</span> maximum=<span style="color: #990000;">&quot;500&quot;</span> snapInterval=<span style="color: #990000;">&quot;1&quot;</span> <span style="color: #004993;">value</span>=<span style="color: #990000;">&quot;100&quot;</span>
				<span style="color: #004993;">change</span>=<span style="color: #990000;">&quot;fit()&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Label <span style="color: #004993;">text</span>=<span style="color: #990000;">&quot;Text Height:&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HSlider id=<span style="color: #990000;">&quot;hSlider&quot;</span> liveDragging=<span style="color: #990000;">&quot;true&quot;</span> minimum=<span style="color: #990000;">&quot;0&quot;</span> maximum=<span style="color: #990000;">&quot;500&quot;</span> snapInterval=<span style="color: #990000;">&quot;1&quot;</span> <span style="color: #004993;">value</span>=<span style="color: #990000;">&quot;100&quot;</span>
				<span style="color: #004993;">change</span>=<span style="color: #990000;">&quot;fit()&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Label <span style="color: #004993;">text</span>=<span style="color: #990000;">&quot;isTruncated?&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Canvas <span style="color: #004993;">width</span>=<span style="color: #990000;">&quot;20&quot;</span> <span style="color: #004993;">height</span>=<span style="color: #990000;">&quot;20&quot;</span> <span style="color: #004993;">backgroundColor</span>=<span style="color: #990000;">&quot;0xff0000&quot;</span> 
				<span style="color: #004993;">visible</span>=<span style="color: #990000;">&quot;{!isTruncated}&quot;</span> includeInLayout=<span style="color: #990000;">&quot;{!isTruncated}&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
			<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Canvas <span style="color: #004993;">width</span>=<span style="color: #990000;">&quot;20&quot;</span> <span style="color: #004993;">height</span>=<span style="color: #990000;">&quot;20&quot;</span> <span style="color: #004993;">backgroundColor</span>=<span style="color: #990000;">&quot;0x00aa00&quot;</span> 
				<span style="color: #004993;">visible</span>=<span style="color: #990000;">&quot;{isTruncated}&quot;</span> includeInLayout=<span style="color: #990000;">&quot;{isTruncated}&quot;</span><span style="color: #000066; font-weight: bold;">/&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>HBox<span style="color: #000066; font-weight: bold;">&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>UIComponent id=<span style="color: #990000;">&quot;ui&quot;</span> <span style="color: #004993;">width</span>=<span style="color: #990000;">&quot;100%&quot;</span> <span style="color: #004993;">height</span>=<span style="color: #990000;">&quot;100%&quot;</span><span style="color: #000066; font-weight: bold;">&gt;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>UIComponent<span style="color: #000066; font-weight: bold;">&gt;</span>
	<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>VBox<span style="color: #000066; font-weight: bold;">&gt;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">&lt;</span>mx<span style="color: #000066; font-weight: bold;">:</span>Script<span style="color: #000066; font-weight: bold;">&gt;</span>
		<span style="color: #000066; font-weight: bold;">&lt;!</span><span style="color: #000000;">&#91;</span>CDATA<span style="color: #000000;">&#91;</span>
			<span style="color: #0033ff; font-weight: bold;">import</span> flashx<span style="color: #000066; font-weight: bold;">.</span>textLayout<span style="color: #000066; font-weight: bold;">.</span>factory<span style="color: #000066; font-weight: bold;">.</span>TruncationOptions<span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.text</span><span style="color: #000066; font-weight: bold;">.</span>engine<span style="color: #000066; font-weight: bold;">.</span>Kerning<span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.text</span><span style="color: #000066; font-weight: bold;">.</span>engine<span style="color: #000066; font-weight: bold;">.</span>FontLookup<span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.text</span><span style="color: #000066; font-weight: bold;">.</span>engine<span style="color: #000066; font-weight: bold;">.</span>RenderingMode<span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #0033ff; font-weight: bold;">import</span> flashx<span style="color: #000066; font-weight: bold;">.</span>textLayout<span style="color: #000066; font-weight: bold;">.</span>formats<span style="color: #000066; font-weight: bold;">.</span>TextLayoutFormat<span style="color: #000066; font-weight: bold;">;</span>
			<span style="color: #0033ff; font-weight: bold;">import</span> flashx<span style="color: #000066; font-weight: bold;">.</span>textLayout<span style="color: #000066; font-weight: bold;">.</span>factory<span style="color: #000066; font-weight: bold;">.</span>StringTextLineFactory<span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
			<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> sprite<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Sprite</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
			<span style="color: #000000;">&#91;</span>Bindable<span style="color: #000000;">&#93;</span> <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #6699cc; font-weight: bold;">var</span> isTruncated<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
			<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> fit<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
	        <span style="color: #000000;">&#123;</span>
	        	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>sprite == <span style="color: #0033ff; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span>
	        	<span style="color: #000000;">&#123;</span>
	        		sprite = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Sprite</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	        		ui<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>sprite<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	        	<span style="color: #000000;">&#125;</span>
	        	<span style="color: #0033ff; font-weight: bold;">while</span> <span style="color: #000000;">&#40;</span>sprite<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">numChildren</span> <span style="color: #000066; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000000;">&#41;</span>
	        	<span style="color: #000000;">&#123;</span>
	        		sprite<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">removeChildAt</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	        	<span style="color: #000000;">&#125;</span>
	            <span style="color: #6699cc; font-weight: bold;">var</span> factory<span style="color: #000066; font-weight: bold;">:</span>StringTextLineFactory = <span style="color: #0033ff; font-weight: bold;">new</span> StringTextLineFactory<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	            factory<span style="color: #000066; font-weight: bold;">.</span>compositionBounds = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Rectangle</span><span style="color: #000000;">&#40;</span> <span style="color: #000000; font-weight:bold;">10</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #000000; font-weight:bold;">10</span><span style="color: #000066; font-weight: bold;">,</span> wSlider<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">value</span><span style="color: #000066; font-weight: bold;">,</span> hSlider<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">value</span> <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	            <span style="color: #6699cc; font-weight: bold;">var</span> format<span style="color: #000066; font-weight: bold;">:</span>TextLayoutFormat = <span style="color: #0033ff; font-weight: bold;">new</span> TextLayoutFormat<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	            format<span style="color: #000066; font-weight: bold;">.</span>fontFamily = <span style="color: #990000;">&quot;Verdana, _sans&quot;</span><span style="color: #000066; font-weight: bold;">;</span>
	            format<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">fontSize</span> = fsSlider<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">value</span><span style="color: #000066; font-weight: bold;">;</span>
	            format<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">color</span> = 0x000000<span style="color: #000066; font-weight: bold;">;</span>
	            format<span style="color: #000066; font-weight: bold;">.</span>textAlpha = <span style="color: #000066; font-weight: bold;">.</span>9<span style="color: #000066; font-weight: bold;">;</span>
	            format<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">kerning</span> = Kerning<span style="color: #000066; font-weight: bold;">.</span>ON<span style="color: #000066; font-weight: bold;">;</span>
	            format<span style="color: #000066; font-weight: bold;">.</span>renderingMode = RenderingMode<span style="color: #000066; font-weight: bold;">.</span>CFF<span style="color: #000066; font-weight: bold;">;</span>
				format<span style="color: #000066; font-weight: bold;">.</span>fontLookup = FontLookup<span style="color: #000066; font-weight: bold;">.</span>EMBEDDED_CFF<span style="color: #000066; font-weight: bold;">;</span>
	            factory<span style="color: #000066; font-weight: bold;">.</span>spanFormat = format<span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
				<span style="color: #6699cc; font-weight: bold;">var</span> truncationOptions<span style="color: #000066; font-weight: bold;">:</span>TruncationOptions = <span style="color: #0033ff; font-weight: bold;">new</span> TruncationOptions<span style="color: #000000;">&#40;</span><span style="color: #990000;">'...'</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">3</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
				factory<span style="color: #000066; font-weight: bold;">.</span>truncationOptions = truncationOptions<span style="color: #000066; font-weight: bold;">;</span>				
&nbsp;
&nbsp;
&nbsp;
	            factory<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">text</span> = txtInput<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">text</span><span style="color: #000066; font-weight: bold;">;</span>
	            factory<span style="color: #000066; font-weight: bold;">.</span>createTextLines<span style="color: #000000;">&#40;</span> useTextLines <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	            isTruncated = factory<span style="color: #000066; font-weight: bold;">.</span>isTruncated<span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	            sprite<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">clear</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	            sprite<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0x555555<span style="color: #000066; font-weight: bold;">,.</span>5<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	            sprite<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span> <span style="color: #000000; font-weight:bold;">10</span><span style="color: #000066; font-weight: bold;">,</span><span style="color: #000000; font-weight:bold;">10</span><span style="color: #000066; font-weight: bold;">,</span> wSlider<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">value</span><span style="color: #000066; font-weight: bold;">,</span> hSlider<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">value</span> <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	            sprite<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">graphics</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	        <span style="color: #000000;">&#125;</span>
&nbsp;
	        <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> useTextLines<span style="color: #000000;">&#40;</span> line<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">DisplayObject</span> <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
	        <span style="color: #000000;">&#123;</span>
	            <span style="color: #6699cc; font-weight: bold;">var</span> displayObject<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">DisplayObject</span> = sprite<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span> line <span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	        <span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #000000;">&#93;</span><span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">&gt;</span>
	<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>Script<span style="color: #000066; font-weight: bold;">&gt;</span>
<span style="color: #000066; font-weight: bold;">&lt;/</span>mx<span style="color: #000066; font-weight: bold;">:</span>Application<span style="color: #000066; font-weight: bold;">&gt;</span></pre></div></div>

 <div class='series_links'><a href='http://franto.com/text-layout-engine-in-flex-3/' title='Text Layout Engine in Flex 3'>Previous in series</a> <a href='http://franto.com/text-layout-engine-truncationoptions/' title='Text Layout Engine: TruncationOptions'>Next in series</a></div>]]></content:encoded>
			<wfw:commentRss>http://franto.com/text-layout-engine-fit-text-into-rectangle/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Text Layout Engine in Flex 3</title>
		<link>http://franto.com/text-layout-engine-in-flex-3/</link>
		<comments>http://franto.com/text-layout-engine-in-flex-3/#comments</comments>
		<pubDate>Tue, 13 Oct 2009 08:10:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Text Layout Engine]]></category>
		<category><![CDATA[Flex 3]]></category>
		<category><![CDATA[Flex 4]]></category>

		<guid isPermaLink="false">http://franto.com/?p=1030</guid>
		<description><![CDATA[I&#8217;m going to play with Text Layout Engine, which is bundled in Flex 4. But we need to use it in Flex 3 in our Goalscape project. And it&#8217;s possible to use Text Layout Engine in Flex 3. All you need to do is download Flex 4 SDK, or Flash Builder and get textLayout.swc from [...]]]></description>
			<content:encoded><![CDATA[<div class='series_toc'><h3>Table of contents for Text Layout Engine</h3><ol><li>Text Layout Engine in Flex 3</li><li><a href='http://franto.com/text-layout-engine-fit-text-into-rectangle/' title='Text Layout Engine: Fit text into rectangle'>Text Layout Engine: Fit text into rectangle</a></li><li><a href='http://franto.com/text-layout-engine-truncationoptions/' title='Text Layout Engine: TruncationOptions'>Text Layout Engine: TruncationOptions</a></li></ol></div> <div class="TweetButton_button" style="float: right; margin-left: 10px;;height:20px;margin-bottom:5px;"><a href="http://twitter.com/share data-url="http://franto.com/text-layout-engine-in-flex-3/" data-text="Text Layout Engine in Flex 3"data-count="vertical" data-lang="en" data-related="Flex,Flex+3,Flex+4,Text+Layout+Engine""><img src="http://franto.com/blog2/wp-content/plugins/tweetbutton-for-wordpress/images/tweet.png" style="border:none" /></a></div>
<p>I&#8217;m going to play with <strong>Text Layout Engine</strong>, which is bundled in <strong>Flex 4</strong>. But we need to use it in Flex 3 in our <strong><a href="http://www.goalscape.com">Goalscape</a></strong> project. And it&#8217;s possible to use <strong>Text Layout Engine</strong> in <strong>Flex 3</strong>. All you need to do is download <strong>Flex 4 SDK</strong>, or <strong>Flash Builder</strong> and get <strong>textLayout.swc</strong> from Flex 4 SDK into your project to libs folder. I&#8217;ve played with Flex 4 beta testLayout.swc, but now when Flex 4 beta 2 is released I&#8217;ve checked both .swc files and filesize has raised from 326kB to 531kB, so I&#8217;m really interested in what was changed or added. I will post about my tests when I will find out anything. So if you are interested in some <strong>Text Layout Engine examples</strong>, stay tuned.</p>
 <div class='series_links'> <a href='http://franto.com/text-layout-engine-fit-text-into-rectangle/' title='Text Layout Engine: Fit text into rectangle'>Next in series</a></div>]]></content:encoded>
			<wfw:commentRss>http://franto.com/text-layout-engine-in-flex-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

