読者です 読者をやめる 読者になる 読者になる

RichTextやRichEditableTextでのwhiteSpaceCollapseに気をつける

Flex4のSparkコンポーネントのテキスト系と、Mxコンポーネントのテキスト系との大きな違いはText Layout Framework(TLF)ライブラリが使用されている事かと思います。

で、TLFマークアップというのを使って、記述することが出来ます。

		<s:RichText x="200"
					whiteSpaceCollapse="collapse"
					y="200">
			<s:content><s:p><s:span>ここは普通です。</s:span></s:p><s:p><s:span fontSize="20">こっちはボールドです</s:span></s:p></s:content>
		</s:RichText>

このとき、whiteSpaceCollapseをpreserveにしている場合、気をつけないと意図しない表示結果となってしまう場合がありますので注意が必要です。

上記の表示結果は下記のようになりますが、

下記のコードは

		<s:RichText x="200"
					whiteSpaceCollapse="collapse"
					y="200">
			<s:content>
				<s:p>
					<s:span>ここは普通です。</s:span>
				</s:p>
				<s:p>
					<s:span fontSize="20">こっちはボールドです</s:span>
				</s:p>
			</s:content>
		</s:RichText>

以下のように表示されます。

whiteSpaceCollapseは、空白を圧縮または保持するのでこういった事がおこりえます。
うっかりファイルのコード全体をフォーマットすると、あらぬ場所に表示されたりする羽目になったりします。
そんな時はwhiteSpaceCollapseを確かめてみるといいでしょう。