APL Text(キャラクターディスプレイ)



Text(キャラクターディスプレイ)

1行または複数行でテキストを表示します。

Textコンポーネントの例

{
  "type": "Text",
  "textAlign": "center",
  "text": "Hello! I am here to serve."
}

Textプロパティ

Textコンポーネントには、標準のコンポーネントプロパティに加えて、次のプロパティがあります。

プロパティ デフォルト 動的 説明
msPerCharacter 整数 500 マーキーテキストでスクロールする文字あたりの表示時間です。
overflow wrap、marquee wrap テキストが幅より長い場合の動作を指定します。
text 文字列 "" テキストブロックに表示するデータです。
textAlign auto、left、center、right auto 横方向にそろえます。
textAlignVertical top、center、bottom top 縦方向にそろえます。

コンポーネントがイベントのターゲットである場合(イベントの定義を参照)、以下の値がevent.targetに報告されます。

"event": {
  "target": {
    "disabled": Boolean, // コンポーネントが無効の場合はtrue
    "id": ID,            // コンポーネントのID   
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "height": Number,    // コンポーネントの文字単位の高さ(パディングを含む)
    "text": String,      // 表示されるテキスト
    "width": Number      // コンポーネントの文字単位の幅(パディングを含む)
  }
}

msPerCharacter

overflowがmarqueeの場合に文字をスクロールする時間です。たとえば、値として500を使用し、「Winter storm watch from Thursday afternoon through late Tuesday night…」と30文字のディスプレイに表示すると、「Winter storm watch from Thursd」が表示され、500ミリ秒後に「inter storm watch from Thursda」に切り替わり、その500ミリ秒後に「nter storm watch from Thursday」に切り替わります。

overflow

テキストがテキストフィールドの幅より長い場合の動作を定義します。サポートされているオプションは次のとおりです。

プロパティ値 説明
wrap テキストフィールドの高さが2文字以上の場合にテキストを次の行へ折り返します。そうでない場合はテキストを切り詰めます。
marquee msPerCharacterプロパティで定義されている速さでテキストをスクロールします(この場合はmsPerCharacterプロパティの設定が必要です)。

marqueeの場合、textプロパティにスペースを挿入することで表示を微調整できます。こうすることで、初期表示や折り返しを調整できます。たとえば、8文字ディスプレイでは次のように表示されます。

"text"値 初期表示 4シフト後
"123456789" "12345678" "56789123"
" 123456789" " 123456" "3456789 "
"123456789 " "12345678" "56789 1"

text

テキストブロックに表示する文字列データです。設定されていない場合は、空白文字が表示されます。テキストブロックは、簡単なマークアップをサポートしています。

タグ 説明
<br> 改行を挿入します。改行は繰り返せます。 行1<br>行2

マークアップ要素は入れ子にできます。マークアップの入れ子が不適切な場合、動作が不安定になります。

改行を含むテキストに対するoverflowのmarquee設定はサポートされていません。

テキストのマークアップ文字は、文字実体参照で置き換える必要があります。

実体 文字 説明
&amp; & アンパサンド
&lt; < 小なり記号
&gt; > 大なり記号
&#nn; 任意 10進数のUnicodeコードポイントです。「nn」は有効な整数です。
&#xnn; 任意 16進数のUnicodeコードポイントです。「nn」は有効な16進数です。

数値実体参照は10進数と16進数で表記できます。たとえば、©は&#169;または&#xa9;と表記できます。

文字列「Copyright &\#169; 2018, Simon \&amp; Schuster. \<br\>All Rights Reserved」は次のように表示されます。

Copyright © 2018, Simon & Schuster.
All Rights Reserved

textAlign

テキストの行を、left、center、right、またはautoで配置します。デフォルトは「auto」で、対象のフォントを記述していく標準の方向を考慮して設定されます(英語の場合は左ぞろえなど)。

textAlignが「center」で、1行の表示文字数が偶数の場合、デフォルトで番号の小さい側に表示されます。たとえば、テキスト「C」は、6文字ディスプレイでは3文字目に表示されます(インデックスとして1~6を使用)。

textAlignVertical

テキストボックス内のテキストの配置を指定します。テキストボックスにテキストのコンテンツよりも高さがある場合にのみ使用します。デフォルトは「top」です。

値が「center」で、表示行数が偶数の場合、デフォルトで番号の小さい側に表示されます。たとえば、テキスト「Center line」は、6行ディスプレイでは3行目に表示されます(インデックスとして1~6を使用)。