使用 Text Layout Framework

TLF 提供複雜文字的支援。複雜文字的支援包括顯示和編輯由右到左文字的功能。TLF 也提供顯示和編輯由左到右和由右到左文字的功能，如阿拉伯文與希伯來文。此架構不僅支援中文、日文和韓文的垂直文字版面，還支援直排內橫排 (TCY 元素)。TCY 元素是內嵌至垂直連續文字內的水平文字區塊。下列是支援的文字：

您可以直接使用 TLF 類別在 Flash 中建立自訂組件。此外，Flash Professional CS5 提供一個新的類別 fl.text.TLFTextField，以封裝 TLF 功能。在 ActionScript 中，請使用 TLFTextField 類別來建立使用 TLF 進階文字顯示功能的文字欄位。建立 TLFTextField 物件的方法與您使用 TextField 類別來建立文字欄位的方法相同。接著使用 textFlow 屬性，從 TLF 類別指定進階格式。

您也可以在 Flash Professional 中使用文字工具，在舞台上建立 TLFTextField 實體。然後就可以使用 ActionScript 的 TLF 類別來控制文字欄位內容的格式與版面。如需詳細資訊，請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TLFTextField 。

如果您是使用 Flex，請使用 TLF 類別。如需詳細資訊，請參閱 使用 Text Layout Framework 。

下列步驟說明使用「文字版面」格式建立文字的一般程序：

下列範例示範如何使用 TLF 來配置簡單的新聞頁面。此頁面包含一個大型標題、一個副標題和一個多欄的內文區段：

package 
{ 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import flash.events.Event; 
    import flash.geom.Rectangle; 
     
    import flashx.textLayout.compose.StandardFlowComposer; 
    import flashx.textLayout.container.ContainerController; 
    import flashx.textLayout.container.ScrollPolicy; 
    import flashx.textLayout.conversion.TextConverter; 
    import flashx.textLayout.elements.TextFlow; 
    import flashx.textLayout.formats.TextLayoutFormat; 
     
    public class TLFNewsLayout extends Sprite 
    { 
        private var hTextFlow:TextFlow; 
        private var headContainer:Sprite; 
        private var headlineController:ContainerController; 
        private var hContainerFormat:TextLayoutFormat; 
         
        private var bTextFlow:TextFlow; 
        private var bodyTextContainer:Sprite; 
        private var bodyController:ContainerController; 
        private var bodyTextContainerFormat:TextLayoutFormat; 
         
        private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>"; 
         
        private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</flow:span></flow:p></flow:TextFlow>"; 
         
        public function TLFNewsLayout() 
        {      
            //wait for stage to exist 
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);     
        } 
         
        private function onAddedToStage(evtObj:Event):void 
        { 
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); 
            stage.scaleMode = StageScaleMode.NO_SCALE; 
            stage.align = StageAlign.TOP_LEFT; 
             
            // Headline text flow and flow composer 
            hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // initialize the headline container and controller objects 
            headContainer = new Sprite(); 
            headlineController = new ContainerController(headContainer); 
            headlineController.verticalScrollPolicy = ScrollPolicy.OFF; 
            hContainerFormat = new TextLayoutFormat(); 
            hContainerFormat.paddingTop = 4; 
            hContainerFormat.paddingRight = 4; 
            hContainerFormat.paddingBottom = 4; 
            hContainerFormat.paddingLeft = 4; 
             
            headlineController.format = hContainerFormat; 
            hTextFlow.flowComposer.addController(headlineController); 
            addChild(headContainer); 
            stage.addEventListener(flash.events.Event.RESIZE, resizeHandler); 
             
            // Body text TextFlow and flow composer 
            bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // The body text container is below, and has three columns 
            bodyTextContainer = new Sprite(); 
            bodyController = new ContainerController(bodyTextContainer); 
            bodyTextContainerFormat = new TextLayoutFormat(); 
            bodyTextContainerFormat.columnCount = 3; 
            bodyTextContainerFormat.columnGap = 30; 
             
            bodyController.format = bodyTextContainerFormat; 
            bTextFlow.flowComposer.addController(bodyController); 
            addChild(bodyTextContainer); 
            resizeHandler(null); 
        } 
         
        private function resizeHandler(event:Event):void 
        { 
            const verticalGap:Number = 25; 
            const stagePadding:Number = 16; 
            var stageWidth:Number = stage.stageWidth - stagePadding; 
            var stageHeight:Number = stage.stageHeight - stagePadding; 
            var headlineWidth:Number = stageWidth; 
            var headlineContainerHeight:Number = stageHeight; 
             
            // Initial compose to get height of headline after resize 
            headlineController.setCompositionSize(headlineWidth, 
headlineContainerHeight); 
            hTextFlow.flowComposer.compose(); 
            var rect:Rectangle = headlineController.getContentBounds(); 
            headlineContainerHeight = rect.height; 
             
            // Resize and place headline text container 
            // Call setCompositionSize() again with updated headline height 
            headlineController.setCompositionSize(headlineWidth, headlineContainerHeight ); 
            headlineController.container.x = stagePadding / 2; 
            headlineController.container.y = stagePadding / 2; 
            hTextFlow.flowComposer.updateAllControllers(); 
             
            // Resize and place body text container 
            var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight); 
            bodyController.format = bodyTextContainerFormat; 
            bodyController.setCompositionSize(stageWidth, bodyContainerHeight ); 
            bodyController.container.x = (stagePadding/2); 
            bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap; 
            bTextFlow.flowComposer.updateAllControllers(); 
        } 
    } 
} 

TLFNewsLayout 類別使用兩個文字容器。一個容器顯示標題與副標題，而另一個則顯示三欄內文。為了簡潔起見，文字當作 TLF 標記文字，以硬式編碼的方式寫入範例。 headlineMarkup 變數包含標題和副標題， bodyMarkup 變數則包含內文。如需 TLF 標記的詳細資訊，請參閱 使用 TLF 組織文字 。

hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 

headContainer = new Sprite(); 
headlineController = new ContainerController(headContainer);

hContainerFormat = new TextLayoutFormat();

控制器會指定給流排撰寫器，而且函數會將容器新增至顯示清單。容器實際的撰寫和顯示則委託給 resizeHandler() 方法。會執行相同的步驟順序以初始化內文 TextFlow 物件。

resizeHandler() 方法會測量可供顯示容器的空間，然後依此調整容器的大小。初始呼叫 compose() 方法以計算標題容器的適當高度。然後， resizeHandler() 方法就可以使用 updateAllControllers() 方法來置入和顯示標題容器。最後， resizeHandler() 方法會使用標題容器的大小來決定內文容器的位置。

瞭解 TLF 的結構也有助於處理 TLF 標記。TLF 標記是文字的 XML 表示法，這是 TLF 的一部分。雖然此架構也支援其他 XML 格式，但是 TLF 標記的獨特之處在於特別以 TextFlow 階層的結構為基礎。如果您使用此標記格式從 TextFlow 匯出 XML，則 XML 匯出時會具有此完整的階層。

「TLF 標記」在 TextFlow 階層中提供文字最高真實度的呈現。標記語言為每個 TextFlow 階層的基本元素提供標記，而且也為 TextLayoutFormat 類別中的所有可用格式化屬性提供特質。

下表包含可用於 TLF 標記中的標籤。

您可使用 ListElement 與 ListItemElement 類別，將項目清單新增至您的文字控制項。項目清單可以是巢狀的，也可以使用不同的項目符號 (或標記)、自動編號和大綱編號自訂項目清單。

若要在文字流排中建立清單，請使用 <list> 標記。然後針對清單中的每個清單項目，在 <list> 標記中使用 <li> 標記。您可以使用 ListMarkerFormat 類別來自訂項目符號的外觀。

<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>

<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:list paddingRight="24" paddingLeft="24"> 
        <flow:li>Item 1a</flow:li> 
        <flow:li>Item 1b</flow:li> 
        <flow:li>Item 1c</flow:li> 
    </flow:list> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>

<flow:list paddingRight="24" paddingLeft="24" listStyleType="upperAlpha">     <flow:li>upperAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerAlpha">     <flow:li>lowerAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="upperRoman">     <flow:li>upperRoman item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerRoman">     <flow:listMarkerFormat>         <!-- Increments the list by 2s rather than 1s. -->         <flow:ListMarkerFormat counterIncrement="ordered 2"/>     </flow:listMarkerFormat>     <flow:li>lowerRoman item</flow:li>     <flow:li>another</flow:li> </flow:list>

您可使用 ListMarkerFormat 類別來定義計數器。除定義計數器的遞增量之外，您也可使用 counterReset 屬性重設計數器加以自訂。

您可使用 ListMarkerFormat 的 beforeContent 與 afterContent 屬性，進一步自訂清單中的標記外觀。這些屬性會套用至顯示於標記內容前後的內容。

<flow:list listStyleType="upperRoman" paddingLeft="36" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="XX" 
            afterContent="YY" 
            counterIncrement="ordered -1"/> 
        </flow:listMarkerFormat> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>

<flow:list listStyleType="disc"  paddingLeft="96" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="Section " 
            content="counters(ordered,&quot;*&quot;,upperRoman)" 
            afterContent=": "/> 
    </flow:listMarkerFormat> 
    <flow:li>Item 1</li> 
    <flow:li>Item 2</li> 
    <flow:li>Item 3</li> 
</flow:list>

如先前的範例所示， content 屬性也可插入字尾 (顯示於標記之後、 afterContent 之前的字串)。若要在提供流排的 XML 內容時插入此字串，請將字串括在 &quote; HTML 實體中，而不是使用引號 ( "< string >" )。

每個 FlowElement 均支援邊框距離屬性，使用此屬性可控制每個元素內容區域的位置，以及內容區域之間的空間。

元素的總寬度是其內容寬度加上 paddingLeft 與 paddingRight 屬性的和。元素的總高度是其內容高度加上 paddingTop 與 paddingBottom 屬性的和。

邊框距離屬性不可套用至範圍元素。

<flow:TextFlow version="2.0.0" xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14" textIndent="15" paddingTop="4" paddingLeft="4" fontFamily="Times New Roman">

邊框距離屬性的有效值為數字 (以像素為單位)、「auto」或「inherit」。預設值為 “auto”，顧名思義為一個自動計算的值，除 ListElement 以外的所有元素都將設為 0。對於 ListElement 而言，除了使用 listAutoPadding 屬性值的清單起始端之外，“auto” 均為 0。 listAutoPadding 的預設值為 40，提供清單預設的縮排值。

預設不會繼承邊框距離屬性。“auto” 與 “inherit” 值均為 FormatValue 類別定義的常數。

邊框距離屬性可以是負值。

您可以透過屬性指定，設定任何 FlowElement 的格式。FlowElement 類別實作 ITextLayoutFormat 介面，因此 FlowElement 類別的所有子類別都必須也實作該介面。

例如，在下列程式碼中，會說明如何指定個別格式給 ParagraphElement 實體。

var p:ParagraphElement = new ParagraphElement(); 
p.fontSize = 18; 
p.fontFamily = "Arial";

您可以使用 TextLayoutFormat 類別，將格式套用至 FlowElement。這個類別可用來建立含有您想要之所有格式值的特殊格式物件。之後，就可以將該物件指定給任何 FlowElement 物件的 format 屬性。TextLayoutFormat 和 FlowElement 都實作 ITextLayoutFormat 介面。這種安排會確保這兩個類別都包含相同的格式屬性。

如需詳細資訊，請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TextLayoutFormat 。

透過文字流程階層繼承格式。如果您將 TextLayoutFormat 實體指定給具有子系的 FlowElement 實體，則該架構會起始「重疊顯示」程序。在重疊顯示期間，架構會遞迴地檢查階層中每個繼承該 FlowElement 的節點。然後決定是否將繼承值指定給每個格式屬性。在重疊顯示期間，會套用下列規則：

例如，如果您在 TextFlow 層級設定 fontSize 值，則該設定會套用至 TextFlow 中的所有元素。換句話說，值會往下重疊顯示文字流排階層。不過，您可以直接指定新的值給指定元素，即可覆寫該元素中的值。另舉一個反例，如果您在 TextFlow 層級設定 backgroundColor 值，則 TextFlow 的子系並不會繼承該值。 backgroundColor 屬性在重疊顯示期間並不會從父系繼承。您可以將每個子系的 backgroundColor 屬性設為 flashx.textLayout.formats.FormatValue.INHERIT ，就可以覆寫此行為.

如需詳細資訊，請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TextLayoutFormat 。

簡單方式使用的是 TextFlowTextLineFactory 類別 (位於 flashx.textLayout.factory 套件)。這個方式除了簡單之外，其優點是記憶體使用量少於 FlowComposer 方式。這種方式適合用於使用者不需要編輯、選取或捲動的靜態文字。

如需詳細資訊，請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 TextFlowTextLineFactory 。

如果想對於文字的顯示擁有比 TextFlowTextLineFactory 提供的控制更多，可以使用流排撰寫器。例如，使用流排撰寫器時，使用者可以選取和編輯文字。如需詳細資訊，請參閱 使用 TLF 啟用文字選取範圍、編輯和還原 。

流排撰寫器是 flashx.textLayout.compose 套件中 StandardFlowComposer 類別的實體。流排撰寫器可管理如何將 TextFlow 轉換為 TextLine 實體，以及管理如何將那些 TextLine 實體放入一或多個容器。

檢視完整大小的圖形

IFlowComposer 可能沒有任何 ContainerController，也可能有多個 ContainerController。

每個 TextFlow 實體都會有實作 IFlowComposer 介面的對應物件。此 IFlowComposer 物件可透過 TextFlow.flowComposer 屬性加以存取。您可以透過此屬性呼叫由 IFlowComposer 介面定義的方法。這些方法可讓您將此文字與一或多個容器關聯，並準備要在容器中顯示的文字。

容器是 Sprite 類別的實體，而該類別是 DisplayObjectContainer 類別的子類別。這兩個類別都是 Flash Player 顯示清單 API 的一部分。容器是用於 TextLineFactory 類別中矩形邊界的進階型態。與矩形邊界類似，容器會定義 TextLine 實體顯示的區域。與矩形邊界不同的是，容器有對應的「控制器」物件。控制器會管理一個容器或一組容器的捲動、撰寫、連結、格式化和事件處理。每個容器都有對應的控制器物件，該物件是 flashx.textLayout.container 套件中 ContainerController 類別的實體。

若要顯示文字，請建立控制器物件以管理容器，並將它與流排撰寫器關聯。讓容器產生關聯之後，撰寫文字以供顯示。所以，容器有兩個狀態：撰寫和顯示。撰寫是將文字從文字流排階層轉換為 TextLine 實體，並計算這些實體是否放得進容器的程序。顯示則是更新 Flash Player 顯示清單的程序。

如需詳細資訊，請參閱「適用於 Adobe Flash Platform 的 ActionScript 3.0 參考」中的 IFlowComposer 、 StandardFlowComposer 與 ContainerController 。