Text Layout Framework の使用

Flash Player 10 以降、Adobe AIR 1.5 以降

Text Layout Framework の概要

Text Layout Framework(TLF)は、拡張可能な ActionScript ライブラリです。TLF は、Adobe® Flash® Player 10 および Adobe® AIR® 1.5 のテキストエンジン上に構築されています。TLF は高度なテキスト編集機能とテキストレイアウト機能を提供し、Web での革新的なテキスト編集を実現します。このフレームワークは、Adobe® Flex® または Adobe® Flash® Professional で使用できます。開発者は既存のコンポーネントを使用または拡張することも、フレームワークを使用して独自のテキストコンポーネントを作成することもできます。

TLF には次の機能が含まれます。
  • 双方向テキスト、縦書きテキストおよびアラビア文字、ヘブライ文字、中国語、日本語、韓国語、タイ文字、ラオ文字、ベトナム語などの 30 種を超える記述スクリプト

  • 複数の列やリンクされたコンテナをまたがるテキストの選択、編集、フロー設定

  • 縦書きテキスト、縦中横(縦書きのテキスト内部の横書きテキスト)、日中韓のテキスト編集用の位置揃え

  • カーニング、合字、文字の大文字と小文字、数字の大文字と小文字、数字の幅、任意ハイフンなどの機能豊富なテキスト編集コントロール

  • 切り取り、コピー、ペースト、取り消しおよび編集のための標準のキーボード操作とマウス操作

  • テキストコンテンツ、レイアウト、マークアップの操作とカスタムテキストコンポーネントの作成を行う機能豊富な開発者 API

  • カスタムのマーカーや番号付け形式を含む堅牢なリストのサポート

  • インラインイメージと配置ルール

TLF は、Flash Player 10 で導入された Flash Text Engine(FTE)に基づいて構築された ActionScript 3.0 ライブラリです。FTE には flash.text.engine パッケージを通じてアクセスできます。このパッケージは、Flash Player 10 アプリケーションプログラミングインターフェイス(API)の一部です。

ただし、Flash Player API で提供されているテキストエンジンへのアクセス手段は低レベルなものです。したがって、作業によっては比較的大量のコードが必要となります。TLF は低レベルのコードを単純な API にカプセル化します。また、TLF は概念アーキテクチャを提供します。これは、FTE によって定義される基本的な構成要素を、使いやすいシステムにまとめたものです。

FTE とは異なり、TLF は Flash Player に組み込まれていません。TLF は、一貫して ActionScript 3.0 で記述された独立したコンポーネントライブラリです。このフレームワークは拡張可能なので、特定の環境に合わせてカスタマイズできます。Flash Professional と Flex SDK の両方に、TLF フレームワークをベースにしたコンポーネントが用意されています。

複雑なスクリプトのサポート

TLF は複雑なスクリプトをサポートしています。複雑なスクリプトのサポートには、右から左に表記されるスクリプトの表示、編集機能などが含まれます。また、TLF には、左から右への表記と右から左への表記が混在するアラビア文字やヘブライ文字などのスクリプトの表示、編集機能も用意されています。このフレームワークでは、中国語、日本語、韓国語向けの縦書きレイアウトのサポートに加えて、縦中横(TCY エレメント)もサポートされています。TCYElement は、縦書きのテキスト範囲に埋め込まれた横書きのブロックです。次のスクリプトがサポートされています。

  • ラテン文字(英語、スペイン語、フランス語、ベトナム語など)

  • ギリシャ文字、キリル文字、アルメニア文字、グルジア文字、エチオピア文字

  • アラビア文字、ヘブライ文字

  • 漢字およびかな(中国語、日本語、韓国語)およびハングル Johab(韓国語)

  • タイ文字、ラーオ文字、クメール文字

  • デーバナーガリー文字、ベンガル文字、グルムキー文字、マラヤーラム文字、テルグ文字、タミル文字、グジャラート文字、オリヤー文字、カンナダ文字、チベット文字

  • ティフナグ文字、イ文字、チェロキー文字、カナダ先住民文字、ディザレット文字、シャビアン文字、ヴァイ文字、タガログ文字、ハヌノオ文字、ブヒッド文字、タグバンワ文字

Flash Professional および Flex での Text Layout Framework の使用

TLF クラスを直接使用して、Flash でカスタムコンポーネントを作成できます。さらに、Flash Professional CS5 では、TLF 機能をカプセル化する fl.text.TLFTextField という新しいクラスが提供されています。この TLFTextField クラスは、TLF の高度なテキスト表示機能を使用するテキストフィールドを ActionScript で作成するために使用します。TextField クラスを使用してテキストフィールドを作成する場合と同じ方法で、TLFTextField オブジェクトを作成します。次に、textFlow プロパティを使用して、TLF クラスによる詳細な書式設定を割り当てます。

Flash Professional のテキストツールを使用して、ステージ上に TLFTextField のインスタンスを作成することもできます。その後、ActionScript を使用して、TLF クラスを使用するテキストフィールドの内容の書式設定とレイアウトを制御できます。詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「TLFTextField」を参照してください。

Flex で作業している場合は、TLF クラスを使用します。詳しくは、Text Layout Framework の使用を参照してください。

Text Layout Framework の使用

Flex で作業している場合やカスタムテキストコンポーネントを作成している場合は、TLF クラスを使用します。TLF は ActionScript 3.0 ライブラリであり、その全体が textLayout.swc ライブラリ内に含まれています。TLF ライブラリには、10 個のパッケージに編成された約 100 個の ActionScript 3.0 クラスおよびインターフェイスが含まれています。これらのパッケージは、flashx.textLayout パッケージのサブパッケージです。

Text Layout Framework のクラス

TLF クラスは次の 3 種類のカテゴリに分類できます。
  • データ構造および書式設定クラス

  • レンダリングクラス

  • ユーザー操作クラス

データ構造および書式設定クラス

次のパッケージには、TLF 用のデータ構造および書式設定クラスが含まれています。

TLF の主要なデータ構造であるテキストフロー階層は、elements パッケージに定義されています。この構造内で、formats パッケージを使用してスタイルと属性をテキスト範囲に割り当てることができます。また、conversion パッケージを使用して、データ構造に対するテキストの読み込みや書き出しの方法を制御することもできます。

レンダリングクラス

次のパッケージには、TLF 用のレンダリングクラスが含まれています。 これらのパッケージ内のクラスは、Flash Player による表示用テキストのレンダリングを容易にします。factory パッケージは、静止テキストを表示するための単純な方法を提供します。container パッケージには、ダイナミックテキストの表示コンテナを定義するクラスとインターフェイスが含まれています。compose パッケージでは、コンテナでダイナミックテキストを配置および表示するためのテクニックが定義されます。

ユーザー操作クラス

次のパッケージには、TLF 用のユーザー操作クラスが含まれています。 edit パッケージおよび operations パッケージでは、データ構造に格納されているテキストの編集に使用できるクラスを定義します。events パッケージには、イベント処理クラスが含まれています。

Text Layout Framework を使用したテキスト作成の一般的な手順

次の手順は、Text Layout Framework を使用した一般的なテキスト作成プロセスを表したものです。

  1. 書式設定済みのテキストを TLF データ構造に読み込みます。詳しくは、TLF を使用したテキストの構造化TLF を使用したテキストの書式設定を参照してください。

  2. テキスト用に、リンクされた表示オブジェクトコンテナを 1 つ以上作成します。詳しくは、TLF を使用したテキストコンテナの管理を参照してください。

  3. データ構造内のテキストをコンテナに関連付けて、編集オプションとスクロールオプションを設定します。詳しくは、TLF を使用したテキスト選択、編集、取り消しの有効化を参照してください。

  4. サイズ変更などのイベントに応答してテキストのフローを再設定するイベントハンドラーを作成します。詳しくは、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 クラスでは 2 つのテキストコンテナが使用されています。ヘッドラインとサブヘッドを表示するコンテナと、3 列の本文テキストを表示するコンテナです。便宜上、テキストを TLF Markup テキストとして例の中にハードコーディングしています。headlineMarkup 変数にはヘッドラインとサブヘッドの両方が含まれ、bodyMarkup 変数には本文が含まれます。TLF Markup について詳しくは、TLF を使用したテキストの構造化を参照してください。

初期化処理の後に、onAddedToStage() 関数によりヘッドラインテキストが TextFlow オブジェクトに読み込まれます。このオブジェクトは TLF の主要なデータ構造です。
hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
次に、コンテナ用の Sprite オブジェクトが作成され、さらにコントローラーが作成されてコンテナに関連付けられます。
headContainer = new Sprite(); 
headlineController = new ContainerController(headContainer);
コントローラーが初期化され、書式設定、スクロール、その他のオプションが設定されます。コントローラーには、テキストが設定されるコンテナの領域を定義するジオメトリが含まれます。TextLayoutFormat オブジェクトには書式設定オプションが含まれます。
hContainerFormat = new TextLayoutFormat();

コントローラーはフローコンポーザーに割り当てられ、この関数によってコンテナが表示リストに追加されます。コンテナの実際の構成と表示は resizeHandler() メソッドによって行われます。本文の TextFlow オブジェクトを初期化するために、同じ手順が実行されます。

resizeHandler() メソッドでは、コンテナのレンダリングに使用できる領域を測定し、それに応じてコンテナのサイズを決定します。compose() メソッドの最初の呼び出しによって、ヘッドラインコンテナの適切な高さを計算できるようにします。次に、resizeHandler() メソッドで、updateAllControllers() メソッドを使用してヘッドラインコンテナを配置および表示します。最後に、resizeHandler() メソッドで、ヘッドラインコンテナのサイズを使用して本文コンテナの配置を決定します。

TLF を使用したテキストの構造化

TLF では、階層ツリーを使用してテキストを表します。ツリー内の各ノードは、elements パッケージで定義されたクラスのインスタンスです。例えば、ツリーのルートノードは常に、TextFlow クラスのインスタンスです。TextFlow クラスは、テキストのストーリー全体を表します。ストーリーとは、1 つの単位、つまりフローとして処理されるテキストや他のエレメントのコレクションです。1 つのストーリーで、複数の列やテキストコンテナの表示が必要になることがあります。

ルートノードは別として、それ以外のエレメントは大まかに XHTML エレメントに基づいています。次の図は、フレームワークの階層を示しています。

TextFlow 階層

Text Layout Framework Markup

TLF の構造を理解することは、TLF Markup を扱う場合にも役立ちます。TLF Markup は TLF の一部であり、テキストの XML 表現です。フレームワークでは他の XML フォーマットもサポートされていますが、TLF Markup は、特に TextFlow 階層の構造に基づいているという点で特徴的です。このマークアップフォーマットを使用して TextFlow から XML を書き出す場合、この階層はそのままの状態で XML が書き出されます。

TLF Markup を使用すれば、テキストを TextFlow 構造で最も正確に表現できます。このマークアップ言語には、TextFlow 構造の各基本エレメントに対応するタグや、TextLayoutFormat クラスで利用できるすべての書式設定プロパティに対応する属性も用意されています。

次の表には、TLF Markup で使用できるタグを示しています。

エレメント

説明

クラス

textflow

マークアップのルートエレメントです。

div、p

TextFlow

div

TextFlow 内の範囲です。段落のグループを含めることができます。

div、list、p

DivElement

p

段落です。

a、tcy、span、img、tab、br、g

ParagraphElement

a

リンクです。

tcy、span、img、tab、br、g

LinkElement

tcy

横書きのテキスト範囲です(縦書きの TextFlow で使用されます)。

a、span、img、tab、br、g

TCYElement

span

段落内のテキスト範囲です。

 

SpanElement

img

段落内のイメージです。

 

InlineGraphicElement

tab

タブ文字です。

 

TabElement

br

ブレーク文字です。段落内の行を終了させるために使用します。テキストは次の行に続きますが、同じ段落のままです。

 

BreakElement

linkNormalFormat

通常の状態のリンクに使用されるフォーマット属性を定義します。

TextLayoutFormat

TextLayoutFormat

linkActiveFormat

マウスをリンク上で押しているときに、アクティブ状態のリンクに使用されるフォーマット属性を定義します。

TextLayoutFormat

TextLayoutFormat

linkHoverFormat

マウスをリンク上で動かしているときに、アクティブ状態のリンクに使用されるフォーマット属性を定義します。

TextLayoutFormat

TextLayoutFormat

li

リストアイテムエレメントです。list エレメントの内部に指定する必要があります。

div、li、list、p

ListItemElement

list

リストです。リストはネスト可能であり、また互いに隣接するように配置できます。リストアイテムには、異なるラベルや番号付け方式を適用できます。

div、li、list、p

ListElement

g

グループエレメントです。段落内でのエレメントのグループ化に使用します。段落よりも下のレベルでエレメントをネストできます。

a、tcy、span、img、tab、br、g

SubParagraphGroupElement

番号付きリストおよび箇条書きリストの使用

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>
リスト内のマーカーのタイプをカスタマイズするには、ListElement の listStyleType プロパティを使用します。このプロパティには、ListStyleType クラスに定義されたいずれかの値を設定できます(checkcircledecimalbox など)。次の例では、様々なマーカータイプとカスタムのカウンターのインクリメントを使用したリストが作成されます。
<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 プロパティを使用して、リスト内のマーカーの外観をカスタマイズできます。これらのプロパティは、マーカーのコンテンツの前後に表示されるコンテンツに適用されます。

次の例では、マーカーの前に文字列「XX」が追加され、マーカーの後ろに文字列「YY」が追加されます。
<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>
content プロパティ自体でも、マーカー形式のカスタマイズをさらに定義できます。次の例では、順序付けられた大文字のローマ数字マーカーが表示されます。
<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 コンテンツを設定する場合にこの文字列を挿入するには、引用符で文字列を囲むのではなく("<string>")、HTML エンティティの &quote; で囲むようにします。

TLF での余白の使用

それぞれの FlowElement では、余白プロパティがサポートされています。余白プロパティは、各エレメントのコンテンツ領域の位置と、コンテンツ領域間のスペースを制御するために使用します。

エレメントの全体の幅は、コンテンツの幅と、paddingLeft プロパティおよび paddingRight プロパティの合計になります。エレメントの全体の高さは、コンテンツの高さと、paddingTop プロパティおよび paddingBottom プロパティの合計になります。

余白は、境界線とコンテンツの間のスペースです。余白プロパティは、paddingBottompaddingToppaddingLeftpaddingRight です。余白は TextFlow オブジェクトおよび次の子エレメントに適用できます。
  • div

  • img

  • li

  • list

  • p

余白プロパティは、span エレメントには適用できません。

次の例では、TextFlow に余白プロパティを設定します。
<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 の場合は、「auto」を設定すると、listAutoPadding プロパティの値が使用されているリストの開始側以外では 0 となります。listAutoPadding のデフォルト値は 40 です。これによって、リストのデフォルトのインデントが設定されます。

余白プロパティはデフォルトでは継承されません。「auto」値および「inherit」値は、FormatValue クラスに定義された定数です。

余白プロパティには負の値を設定できます。

TLF を使用したテキストの書式設定

flashx.textLayout.formats パッケージには、テキストフロー階層ツリー内の任意の FlowElement にフォーマットを割り当てることができるインターフェイスおよびクラスが含まれています。フォーマットを適用するには、2 通りの方法があります。特定のフォーマットを個別に割り当てる方法と、特殊なフォーマットオブジェクトを使用してフォーマットのグループを同時に割り当てる方法です。

ITextLayoutFormat インターフェイスには、FlowElement に適用できるすべてのフォーマットが含まれています。フォーマットには、テキストのコンテナ全体または段落全体に適用されるが、論理的に個々の文字には適用されないものもあります。例えば、均等配置、タブストップなどのフォーマットは、段落全体に適用されますが、個々の文字には適用されません。

プロパティを使用した FlowElement へのフォーマットの割り当て

プロパティの割り当てを通して、任意の FlowElement にフォーマットを設定できます。FlowElement クラスは ITextLayoutFormat インターフェイスを実装しているので、FlowElement クラスのすべてのサブクラスでもこのインターフェイスを実装する必要があります。

例えば、次のコードでは ParagraphElement のインスタンスにフォーマットを個別に割り当てる方法を示しています。

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

TextLayoutFormat クラスを使用した FlowElement へのフォーマットの割り当て

TextLayoutFormat クラスを使用して、FlowElement にフォーマットを適用できます。このクラスを使用して、必要なフォーマット値がすべて含まれている特殊なフォーマットオブジェクトを作成します。次にそのオブジェクトを、任意の FlowElement オブジェクトの format プロパティに割り当てます。TextLayoutFormat と FlowElement の両方で、ITextLayoutFormat インターフェイスを実装します。こうすることで、両方のクラスに同じ format プロパティが含まれるようにします。

詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「TextLayoutFormat」を参照してください。

フォーマットの継承

フォーマットはテキストフロー階層を通して継承されます。TextLayoutFormat のインスタンスを、子を持つ FlowElement インスタンスに割り当てた場合、フレームワークは「カスケード」と呼ばれる処理を開始します。カスケードの間、フレームワークは FlowElement から継承した階層内の各ノードを再帰的に調べ、継承した値をそれぞれのフォーマットプロパティに割り当てるかどうかを判断します。次のルールがカスケードの間に適用されます。

  1. プロパティ値は、最も近い上位(「親」と呼ばれることがあります)からのみ継承されます。

  2. プロパティ値は、プロパティに既に値が設定されていない場合にのみ継承されます(つまり、値が undefined の場合)。

  3. いくつかの属性は、値が「inherit」または定数 flashx.textLayout.formats.FormatValue.INHERIT に設定されていないと、未定義では値を継承しません。

例えば、TextFlow レベルで fontSize 値を設定した場合、その設定は TextFlow のすべてのエレメントに適用されます。つまり、値はテキストフロー階層の下位に向かってカスケードします。ただし、エレメントに新しい値を直接割り当てることで、特定のエレメントの値をオーバーライドすることができます。反例として、TextFlow レベルで backgroundColor 値を設定しても、値は TextFlow の子に継承されません。backgroundColor プロパティはカスケードの間にその親から値を継承しないプロパティです。この動作は、それぞれの子の backgroundColor プロパティを flashx.textLayout.formats.FormatValue.INHERIT に設定することによってオーバーライドできます。

詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「TextLayoutFormat」を参照してください。

TLF を使用したテキストの読み込みと書き出し

flashx.textLayout.conversion.* パッケージの TextConverter クラスを使用すると、TLF へのテキストの読み込み、および TLF からのテキストの書き出しを実行できます。このクラスは、テキストを SWF ファイルにコンパイルするのではなく、実行時にテキストをロードする場合に使用します。また、このクラスを使用すると、TextFlow インスタンスに保存されているテキストを String オブジェクトまたは XML オブジェクトに書き出すこともできます。

読み込みと書き出しは両方とも、直接的なプロシージャです。ともに TextConverter クラスの一部である、export() メソッドまたは importToFlow() メソッドを呼び出します。どちらのメソッドも静的です。つまり、TextConverter クラスのインスタンスではなく、TextConverter クラスでメソッドを呼び出します。

flashx.textLayout.conversion パッケージ内のクラスでは、テキストの格納先を柔軟に選択することができます。例えば、テキストをデータベースに格納した場合に、テキストをフレームワークに読み込んで表示することができます。その後、flashx.textLayout.edit パッケージのクラスを使用してテキストを変更し、変更後のテキストを再度データベースに書き出すことができます。

詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「flashx.textLayout.conversion」を参照してください。

TLF を使用したテキストコンテナの管理

TLF データ構造内にテキストを格納した後は、Flash Player でそのテキスト表示できます。フロー階層に格納されているテキストは、Flash Player で表示可能なフォーマットに変換する必要があります。TLF では、フローから表示オブジェクトを作成するための 2 種類の方法を利用できます。1 つ目の単純なアプローチは、静止テキストの表示に適しています。2 つ目の複雑なアプローチでは、選択や編集が可能なダイナミックテキストを作成できます。いずれの場合も、テキストは最終的に、Flash Player 10 の flash.text.engine.* パッケージの一部である、TextLine クラスのインスタンスに変換されます。

静止テキストの作成

単純なアプローチでは、flashx.textLayout.factory パッケージ内にある TextFlowTextLineFactory クラスを使用します。このアプローチの利点は、単純であるということ以上に、FlowComposer アプローチよりメモリフットプリントが小さいという点です。このアプローチは、ユーザーが編集、選択またはスクロールする必要がない静止テキストに適しています。

詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「TextFlowTextLineFactory」を参照してください。

ダイナミックテキストおよびコンテナの作成

TextFlowTextLineFactory よりもテキストの表示を綿密に調整したい場合には、フローコンポーザーを使用します。例えば、フローコンポーザーを使用すると、ユーザーがテキストを選択して編集することができます。詳しくは、TLF を使用したテキスト選択、編集、取り消しの有効化を参照してください。

フローコンポーザーは、flashx.textLayout.compose パッケージ内の StandardFlowComposer クラスのインスタンスです。フローコンポーザーは、TextFlow の TextLine インスタンスへの変換と、変換した TextLine インスタンスの 1 つ以上のコンテナへの配置を管理します。

フルサイズのグラフィックを表示
IFlowComposer には 0 個以上の ContainerController があります。

各 TextFlow インスタンスには、IFlowComposer インターフェイスを実装する、対応するオブジェクトがあります。この IFlowComposer オブジェクトには、TextFlow.flowComposer プロパティを通じてアクセス可能です。このプロパティを通じて、IFlowComposer インターフェイスで定義されたメソッドを呼び出すことができます。これらのメソッドを使用すると、1 つ以上のコンテナにテキストを関連付けて、コンテナ内に表示するテキストを作成することができます。

コンテナは、DisplayObjectContainer クラスのサブクラスである Sprite クラスのインスタンスです。これらのクラスは両方とも、Flash Player 表示リスト API. の一部です。コンテナは、TextLineFactory クラスで使用される境界を示す矩形のより高度な形式です。境界を示す矩形と同様に、コンテナでは TextLine インスタンスが表示される領域を定義します。境界を示す矩形とは異なり、コンテナには対応する「コントローラー」オブジェクトが存在します。コントローラーは、1 個のコンテナまたは複数のコンテナに対するスクロール、構成、リンク、書式設定、およびイベント処理を管理します。各コンテナには、flashx.textLayout.container パッケージ内にある ContainerController クラスのインスタンスである対応するコントローラーオブジェクトがあります。

テキストを表示するには、コンテナを管理するコントローラーオブジェクトを作成し、それをフローコンポーザーに関連付けます。コンテナを関連付けたら、テキストを表示できるように構成します。このように、コンテナには構成と表示の 2 つの状態があります。構成は、テキストフロー階層のテキストを TextLine インスタンスに変換し、これらのインスタンスがコンテナに収まるかどうかを計算するプロセスです。表示は、Flash Player 表示リストを更新するプロセスです。

詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「IFlowComposer」、「StandardFlowComposer」、および「ContainerController」を参照してください。

TLF を使用したテキスト選択、編集、取り消しの有効化

テキストを選択または編集できるかどうかは、テキストフローレベルで制御されます。TextFlow クラスの各インスタンスには、関連付けられた対話マネージャーがあります。TextFlow オブジェクトの対話マネージャーには、オブジェクトの TextFlow.interactionManager プロパティを通じてアクセスできます。テキストの選択を有効にするには、SelectionManager クラスのインスタンスを interactionManager プロパティに割り当てます。テキストの選択と編集の両方を有効にするには、SelectionManager クラスのインスタンスではなく、EditManager クラスのインスタンスを割り当てます。取り消し操作を有効にするには、UndoManager クラスのインスタンスを作成し、EditManager のコンストラクターを呼び出すときに引数としてそのインスタンスを含めます。UndoManager クラスでは、ユーザーの最新の編集アクティビティのヒストリーは維持されます。また、ユーザーは特定の編集の取り消しまたはやり直しを行うことができます。これらの 3 つのクラスはすべて edit パッケージの一部です。

詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「SelectionManager」、「EditManager」、および「UndoManager」を参照してください。

TLF を使用したイベント処理

TextFlow オブジェクトからは、次のような様々な状況でイベントが送出されます。
  • テキストまたはレイアウトの変更時

  • 操作の開始前および操作の完了後

  • FlowElement オブジェクトのステータス変更時

  • 構成操作の完了時

詳しくは、『Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド』の「flashx.textLayout.events」を参照してください。

テキスト内部へのイメージの配置

テキスト内部に InlineGraphicElement を配置するには、次のプロパティを使用します。
  • InlineGraphicElement クラスの float プロパティ

  • FlowElementclearFloats プロパティ

float プロパティにより、グラフィックおよびその周囲のテキストの位置が制御されます。clearFloats プロパティにより、float を基準とした段落エレメントの位置が制御されます。

テキストエレメント内部のイメージの位置を制御するには、float プロパティを使用します。次の例では、段落にイメージを追加し、テキストが右側で折り返されるように左側にイメージを配置しています。
<flow:p paragraphSpaceAfter="15" >Images in a flow are a good thing. For example, here is a float. It should show on the left: <flow:img float="left" height="50" width="19" source="../assets/bulldog.jpg"></flow:img> Don't you agree? Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here. Another sentence here.</flow:p>

float プロパティの有効な値は、「left」、「right」、「start」、「end」および「none」です。Float クラスにこれらの定数が定義されています。デフォルト値は「none」です。

clearFloats プロパティは、通常はイメージの周囲で折り返される、後に続く段落の開始位置を調整する場合に役に立ちます。例えば、最初の段落よりも大きいイメージがあるとします。2 つ目の段落がイメージの後に始まるようにするには、clearFloats プロパティを設定します。

次の例では、最初の段落のテキストよりも縦の長さが大きいイメージを使用しています。テキストブロック内のイメージの後に 2 つ目の段落が始まるように、この例では 2 つ目の段落の clearFloats プロパティを「end」に設定しています。
<flow:p paragraphSpaceAfter="15" >Here is another float, it should show up on the right: <flow:img float="right" height="50" elementHeight="200" width="19" source="../assets/bulldog.jpg"></flow:img>We'll add another paragraph that should clear past it.</flow:p><flow:p clearFloats="end" >This should appear after the previous float on the right.</flow:p>

clearFloats プロパティの有効な値は、「left」、「right」、「end」、「start」、「none」および「both」です。ClearFloats クラスにこれらの定数が定義されています。また、clearFloats プロパティを「inherit」に設定することもできます。この値は FormatValue クラスに定義されている定数です。デフォルト値は「none」です。