16 テキスト

次で定義される特性は,文字,スペース,単語及び段落の視覚表示に影響を与える。

16.1 字下げ ('text-indent' 特性)

'text-indent'
値:  <length> | <percentage> | inherit
初期値:  0
適用対象:  ブロックレベル要素
継承:  する
パーセント値:  包含ブロックの幅を 参照する
メディア:  視覚メディア

この特性は,ブロック内におけるテキストの最初の行の字下げを指定する。 厳密にいえば,ブロックの最初の 行ボックスに流し込む最初のボックスの字下げ を指定する。行の左辺(又は左向きのレイアウトでは右辺)に対してボックスは 字下げされる。利用者エージェントはこの字下げを空白スペースとしてレンダリングするのがよい。

値には次の意味がある。

<length>
字下げを固定の長さで指定する。
<percentage>
字下げを包含ブロック幅のパーセントで指定する。

'text-indent'の値は負で あってもよいが,実装固有の制限が存在することもある。

例:

次の例では,テキストに'3em'分の字下げが生じる。

  P { text-indent: 3em }

16.2 揃え ('text-align' 特性)

'text-align'
値:  left | right | center | justify | <string> | inherit
初期値:  利用者エージェント及び表記方向 に依存する
適用対象:  ブロックレベル要素
継承:  する
パーセント値:  N/A
メディア:  視覚メディア

この特性は,ブロックの行内内容がどのように配置されるかを記述する。 値には次の意味がある。

left, right, center及び justify
各々, 左揃え, 右揃え, 中央揃え及び両端揃えを実行する。
<string>
表列のセルを配置する文字列を指定する。詳細及び例については, 17.5.4 列の左右レイアウトを参照。この値はセルにだけに適用 する。 その他の要素に設定される場合, 'direction'が'ltr'であるか又は'rtl'であるかによ って,各々'left'又は'right'として処理されることになる。

テキストのブロックは行ボックスの積重ねである。 'left', 'right' 及び 'center'が指定される場合, この特性は,行ボックスの左側及び右側に対 して各行ボックス内の行内ボックスをどのように配置するかを指定する。即ち, 表示域に対して位置が配置されるわけではない。 'justify'が指定される場合は, UAは,その位置を調整するだけでなく,行内ボックスを伸縮させて もよい。 'letter-spacing' 及び 'word-spacing'をも参照。

例:

次の例では, 'text-align'が継承されるため, 'class=center'を有するDIV要素内のすべてのブロックレベル要素は行内内容を中央に寄せること になる点に注意すること。

DIV.center { text-align: center }

備考: 使用される実調整アルゴリズムは,利用者エージェント及び表記言語に依存する。

適合する利用者エージェントは, 各々要素のデフォルト表記方向が右向きであるか又は左向きであるかに依存して,'left'又は 'right'として“justify”値を解釈してもよい。

16.3 装飾

16.3.1 下線,上線, 取消し線及び 点滅( 'text-decoration'特性)

'text-decoration'
値:  none | [ underline || overline || line-through || blink ] | inherit
初期値:  none
適用対象:  すべての要素
継承:  しない (説明を参照)
パーセント値:  N/A
メディア:  視覚メディア

この特性は要素のテキストに付加される装飾を記述する。特性がブロックレベル要素に指定される場合, 要素の行内レベル子孫のすべてに影響を与える。特性が 行内レベル要素に指定されるか又は影響を及ぼす場 合,要素が生成するすべてのボックスに影響を与える。 要素に内容又はHTMLのIMG要素などのテキスト内容がない場合,利用者エージェントはこの特性を 無視しなければならない。

値には次の意味がある。

none
テキストに装飾を施さない。
underline
テキストの各行に下線を引く。
overline
テキストの各行に上線を引く。
line-through
テキストに取消し線を引く。
blink
テキストを点滅させる (テキストが見えたり見えなかったりする)。 適合する利用者エージェントは, この値をサポートすることを要求されていない。

テキスト装飾に必要とされる色は'color'特性値から派生させるのがよい。

この特性は継承されないが,ブロックボックスの子孫ボックスは, すべてに下線を引くなど,同じ装飾を用いてフォーマットされるのが望ましい。 子孫要素の'color'値が異なったとしても,装飾の色は 同じにするのがよい。

例:

次のHTMLの例では,ハイパリンクとして動作するすべてのA要素のテキスト内容に下線を 施す。

A[href] { text-decoration: underline }

16.3.2 テキストの影 ( 'text-shadow' 特性)

'text-shadow'
値:  none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
初期値:  none
適用対象:  すべての要素
継承:  しない (説明を参照)
パーセント値:  N/A
メディア:  視覚メディア

この特性は,要素のテキストに適用される影効果をカンマで区切ったリストで 指定する。影効果は,指定された順で適用され,各効果は互いに被さってもよいが, テキスト自体に上塗りすることはない。影効果はボックスのサイズを変更しないが, その境界の範囲外に効果が及んでもよい。影効果のスタックレベルは要素自体のスタックレベルと 同じである。

各影効果は影のオフセットを指定しなければならず,ぼかし範囲及び影色は任意で 指定してよい。

影のオフセットは,テキストからの距離を示す二つの <length>値を用いて指定される。 最初の長さの値は,テキストの右へずらす左右距離を指定する。 左右方向の長さの値が負の場合は,影をテキストの左にずらす。二番目の長さの値は, 影をテキストの下側にずらす上下距離を指定する。上下方向の長さの値が負の場合は, テキストの上に影をずらす。

ぼかし範囲を影のオフセットの後に任意に指定してよい。 ぼかし範囲は,ぼかし効果の境界を示す長さの値である。 ぼかし効果を計算する正確なアルゴリズムは指定されない。

色値は,影効果の長さの値の前後に任意に指定されてよい。 色値は影効果の基調として使用される。色が指定されない場合, 'color'特性の値が代わりに使用される。

テキストの影は :first-letter擬似要素及び :first-line擬似要素とともに使用されてよい。

例:

次の例では,テキストの影を要素のテキストの右下に設定している。 色が指定されていないので,影は要素自体と同じ色となる。 さらに,ぼかし範囲が指定されないので,テキストの影はぼかされない。

H1 { text-shadow: 0.2em 0.2em }

次の例は,要素のテキストの右下に影を付けることになる。 影には5pxの範囲でぼかしが生じ,影の色は赤となる。

H2 { text-shadow: 3px 3px 5px red }

次の例は,影効果のリストを指定する。最初の影は要素のテキストの右下に あり,影の色は赤であり,ぼかしはない。二番目の影は,最初の影効果に 上塗りされることになり,色は黄色であり,ぼかしが生じる。位置はテキストの 左下に付けられる。三番目の影効果はテキストの右上に付けられる。 影の色は三番目の影効果には指定されていないので,要素の 'color'特性の値が使用される。 :

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

例:

次の例を考えてみる。

SPAN.glow { 
    background: white; 
    color: white;
    text-shadow: black 0px 0px 5px;
}

この場合, 'background'特性及び 'color' 特性は同じ値になり, 'text-shadow'特性は "日食"のような効果を生成するために使用される。

Solar eclipse effect   [D]

備考: この特性はCSS1では定義されない。最後の例のような影効果は,CSS1しか サポートしないUAでは,不可視のテキストをレンダリングする場合もある。

16.4 字間スペース及び語間スペース ( 'letter-spacing'特性 及び 'word-spacing' 特性)

'letter-spacing'
値:  normal | <length> | inherit
初期値:  normal
適用対象:  すべての要素
継承:  する
パーセント値:  N/A
メディア:  視覚メディア

この特性は,テキストの文字間におけるスペースの振舞いを指定する。値には次の意味がある。

normal
現在のフォントでの通常の間隔を用いる。 この値により,利用者エージェントはテキストを両端揃えするために文字間の スペースを変更することができる。
<length>
この値は,文字間のデフォルトスペースに加えて,増加分の文字間スペースを示す。 値は負の数であってもよいが,実装固有の制限が存在することもある。 利用者エージェントは, 指定以上に文字間スペースを増減して,テキストを揃えることはない。

文字間隔アルゴリズムは利用者エージェントに依存する。文字間隔は,両端揃えに よっても影響される場合がある。 'text-align'特性を参照。

例:

次の例では, BLOCKQUOTE要素の文字間スペースは'0.1em'分増加される。

BLOCKQUOTE { letter-spacing: 0.1em }

次の例では, 利用者エージェントは,文字間スペースを変更することができない。

BLOCKQUOTE { letter-spacing: 0cm }   /* Same as '0' */

結果として生じる二文字間のスペースがデフォルトスペースと同じではない場合, 利用者エージェントは リガチャを 使用しないことが望ましい。

適合する利用者エージェントが, 'letter-spacing'特性の値を 'normal'であるとみなすこともある。

'word-spacing'
値:  normal | <length> | inherit
初期値:  normal
適用対象:  すべての要素
継承:  する
パーセント値:  N/A
メディア:  視覚メディア

この特性は単語間隔を指定する。値には次の意味がある。

normal
現フォント及び/又はUAが定義する通常の単語間スペース。
<length>
この値は,単語間のデフォルトスペース に加えて単語間スペースを示す。 値は負の数であってもよいが,実装固有の制限が存在することがある。

単語間隔アルゴリズムは利用者エージェントに依存する。 単語間隔も両端揃えによって影響される ( 'text-align'特性参照)。

例:

次の例では, H1要素の各単語間の単語間隔は'1em'分増加される。

H1 { word-spacing: 1em }

適合する利用者エージェントは, 'word-spacing'特性の値を 'normal'であるとみなしてもよい。

16.5 大文字化 ( 'text-transform' 特性)

'text-transform'
値:  capitalize | uppercase | lowercase | none | inherit
初期値:  none
適用対象:  すべての要素
継承:  する
パーセント値:  N/A
メディア:  視覚メディア

この特性は,要素のテキストの大文字化効果を制御する。 値には次の意味がある。

capitalize
各単語の最初の文字を大文字にする。
uppercase
各単語のすべての文字を大文字にする。
lowercase
各単語のすべての文字を小文字にする。
none
大文字化の効果はない。

各々の場合における実際の変換は表記言語に依存する。 要素の言語を認識する方法については, RFC 2070 ([RFC2070])を 参照。

適合する利用者エージェントは,文字列がLatin1 レパートリを起源としない場合及び言語の大小文字の変換方法がISO 10646 ([ISO10646])の大小文字変換表によって規定される方法と異なる場合, 'text-trasform'を'none'とみなしてもよい。

例:

次の例では, H1要素のすべてのテキストが大文字テキストに変換される。

H1 { text-transform: uppercase }

16.6 空白 ( 'white-space'特性)

'white-space'
値:  normal | pre | nowrap | inherit
初期値:  normal
適用対象:  ブロックレベル要素
継承:  する
パーセント値:  N/A
メディア:  視覚メディア

この特性は,要素内の空白がどのように操作されるか を宣言する。値には次の意味がある。

normal
この値は,利用者エージェントに空白のシーケンスを縮小し、行ボックスを満たすと必要に応 じて行区切りをするように指示する。行区切りを追加する場合は,生成内容に"\A"を出現させても よい。HTMLのBR要素はその例である。
pre
この値は,利用者エージェントに空白のシーケンスを縮小させないようにする。行の区切りは ソースの新しい行か又は生成内容に"\A"を出現箇所だけ実行される。
nowrap
この値は,'normal'の場合と同様に空白を縮小するが,生成内容として"\A"によって行を区切 る場合を除き,テキスト内の行区切りを抑制する。HTMLのBR要素がその例である。

例:

次の例は,HTMLのPRE要素,P要素及び "nowrap"から期待される空白の振舞いが何であるかを示す。

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

適合する利用者エージェントは, 文書作成者及び利用者のスタイルシートの 'white-space'特性を 無視してよいが,デフォルトスタイルシートでは'white-space'特性に値を指定しなけ ればならない。