<alier-text>

概要

<alier-text>はテキスト表示専用のalierのカスタム要素です。 フォントファミリ、フォントサイズなどの表示形式に関する指定や表示アニメーションの指定が可能です。

<alier-text bold italic>sample text</alier-text>

上記の例は<alier-text>のシンプルな使い方を示しています。

• 用意された属性を用いることで、表示されるテキスト・フォントの見た目の指定が可能です。

子ノード

<alier-text>タグの間に記述されたテキストが画面に表示されます。

構造

<alier-text>の構成は以下の通りです。

spanタグで構成されているためインライン要素として作用します。

# ── text-area(span)

• text-area: spanタグで構成されており、テキストを表示する要素です。 part 疑似要素で指定するとスタイルを適用できます。

属性

テキスト・フォント指定

スタイル

CSS変数

alier標準スタイル変数の利用

alier-textでは、alierが標準で提供しているスタイル変数のうち以下が採用されています。

part 疑似要素

::part() 疑似要素を利用することで、このエレメントの内部要素を自由にカスタマイズすることができます。

例

::part(text-area)を利用し、任意のCSS変数に値を設定することで、表示されるテキストにスタイルが反映されます。

<alier-text id="sample">lime-color text</alier-text>
<style>
    #sample::part(text-area){
        --alier-font-color: rgb(0,255,0);
        --alier-font-size: 900px;
    }
</style>

AlierText クラス

モジュールパス: /alier_sys/AlierText.js

<alier-text>要素が実装しているAlierTextは、テキスト表示専用のプロパティとメソッドを提供しています。また、AlierCustomElementを継承しています。

プロパティ

fontSize

フォントのサイズを示します。CSS のプロパティであるfont-sizeで指定される値を単位込みのテキストとして保持しています。

このプロパティの値を変更すると、表示されているテキストに対して自動的に変更が反映されます。

型

• string

fontFamily

フォントファミリーを示します。CSS のプロパティであるfont-familyで指定される値をテキストとして保持しています。

このプロパティの値を変更すると、表示されているテキストに対して自動的に変更が反映されます。

型

• string

fontColor

フォントの色を示します。CSS のプロパティである colorで指定される値をテキストとして保持しています。

未指定の場合、rgb(0,0,0)が指定されています。

このプロパティの値を変更すると、表示されているテキストに対して自動的に変更が反映されます。

型

• string

fontBold

太字指定を論理属性の値で保持しています。

デフォルトはfalseです。

• trueの場合：フォントの太さはCSS のプロパティである font-weight: bold;で指定した場合と同等です。
• falseの場合、フォントの太さはCSS のプロパティである font-weight: normal;で指定した場合と同等です。

フォントの太さの指定を細かく行いたい場合は --alier-font-bold (CSS変数)を利用してください。

このプロパティの値を変更すると、表示されているテキストに対して自動的に変更が反映されます。

型

• boolean

fontItalic

筆記体(italic)体の指定を論理属性の値で保持しています。

デフォルトはfalseです。

• trueの場合：フォントのスタイルはCSS のプロパティである font-style: italic;で指定した場合と同等です。
• falseの場合：フォントの太さはCSS のプロパティである font-style: normal;で指定した場合と同等です。

斜体の指定を細かく行いたい場合は --alier-font-italic(CSS変数)を利用してください。

このプロパティの値を変更すると、表示されているテキストに対して自動的に変更が反映されます。

型

• boolean

textWordBreak

テキストの改行の扱いを示します。 CSS のプロパティである word-breakで指定する値をテキストとして保持しています。

このプロパティの値を変更すると、表示されているテキストに対して自動的に変更が反映されます。

型

• string

textOverflowWrap

インライン要素に対して、テキストがあふれないように文字列の途中で改行を入れるかその扱いを示します。 CSS のプロパティである overflow-wrapで指定する値をテキストとして保持しています。

このプロパティの値を変更すると、表示されているテキストに対して自動的に変更が反映されます。

型

• string

value

子要素のテキスト(テキストノード)の値と同一です。そのため、valueの値を変更すると表示されているテキストに対して自動的に変更が反映されます。

型

• string

メソッド

addAnimation()

(Experimentalな機能)
animation属性に対してアニメーションを指定できます。

引数

• name: string

指定できる値はanimation属性で扱っている値だけ対応しています。

すでにanimation属性にアニメーションが指定されている場合は新しく指定したアニメーションに上書きされます。

deleteAnimation()

(Experimentalな機能)
animation属性に指定されたアニメーションの値を削除します。