<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 疑似要素で指定するとスタイルを適用できます。

属性

テキスト・フォント指定

属性 有効な値 説明
bold - テキストが太字表記にになります。

font-weight: bold;あるいはfont-weight: 700;で指定する場合と同等の効果となります。
italic - テキストがitalic表記になります。

font-style: italic;で指定する場合と同等の効果となります。そのため italic が利用できない場合は、代わりに oblique に分類されているフォントが採用されます。obliqueが利用できない場合は、スタイルは人工的にシミュレートされます。
hidden - テキストを非表示にします。
display: none;と同等の効果となります。
color <color> 値 テキストの表示色を変更します。

デフォルトは"rgb(0,0,0)"が指定されています。
スタイルのcolorと同等の効果となります。
animation down-slide-in animation名を指定することでテキスト表示時にアニメーションが適用されます。
指定できるアニメーションは以下の通りです。
・down-slide-in: 画面上部から下に向かいテキストが表示されるアニメーション。
line-break - (Experimentalな機能)
テキスト内に含まれる改行を表示に反映します。

スタイルのwhite-space: pre-line;と同等の効果が適用されます。
注意:この属性はellipsis(省略記号)属性が指定されていない場合に有効となります。
ellipsis text-overflowに指定する値およびwidthに指定する値 (Experimentalな機能)
指定の幅からあふれたテキストを省略記号で表示します。

この属性を指定すると<alier-text>はinline-blockとして扱われます。
例：ellipsis="ellipsis 100px"と指定した場合、指定した100pxの幅からあふれたテキストが省略記号で表示されます。

スタイル

CSS変数

属性 説明
--alier-font-size フォントサイズ
指定方法はCSS のプロパティfont-size と同等です。
未指定の場合、unsetが適用されます。
--alier-font-bold 太字フォント
指定方法はCSS のプロパティfont-weight と同等です。
未指定の場合、unsetが適用されます。
--alier-font-italic 筆記体(italic)体
指定方法はCSS のプロパティfont-style と同等です。
未指定の場合、unsetが適用されます。
--alier-word-break 改行の有無　
指定方法はCSS のプロパティword-break と同等です。
未指定の場合、unsetが適用されています。
--alier-overflow-wrap 単語の途中など分割できない文字列の途中での改行の指定 　
指定方法はCSS のプロパティoverflow-wrap と同等です。
未指定の場合、unsetが適用されます。
--alier-overflow テキストのはみ出しの指定 　
指定方法はCSS のプロパティoverflow と同等です。
未指定の場合、unsetが適用されます。
--alier-transition-speed アニメーションの変化時間
単位：秒
未指定の場合、変化時間は5秒に設定されています。

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

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

属性 説明
--alier-font フォントファミリ
指定方法はCSS のプロパティfont-family と同等です。
未指定の場合、unsetが適用されます。
--alier-fg-col フォントの色
指定方法はCSS のプロパティcolor と同等です。
未指定の場合、#222が適用されています。

part 疑似要素

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

part 名 対象
text-area <alier-text>のテキストノードに対して適用されます。

例

::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

--- config: class: hideEmptyMembersBox: true --- classDiagram direction LR HTMLElement <|-- AlierCustomElement AlierCustomElement <|-- AlierText

<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属性に指定されたアニメーションの値を削除します。