Jul 29, 2007
折り返されたインライン要素への影付け
テキストシャドウでの影付けの基本原理は以下の通り。
以下の解説を図を使って書き直しました。
- 影を付ける対象となる要素ノードを特定する（これはselector.js由来のメソッドで実行）。
- そのノードの中の全てのテキストノードを収集する。
- テキストノード一つ一つを、コンテナとなるインライン要素（text-shadow-box）でラッピングする。この要素は
position:relativeに設定され、影やベーステキストの配置の座標の基準となる。 - さらに、個々のテキストノードを「元のノード用のコンテナ」となるインライン要素（text-shadow-original）でラッピングする。この要素は最終的には
visibility:hiddenとなり、外観上は見えなくなるが、影付きテキストを表示するための空間を確保する役割を果たす。 - text-shadow-boxの高さと幅、text-shadow-boxの包含ブロックのcontent-boxの幅と高さを求める。これは、
document.getBoxObjectFor(aNode)で取得できる包含ブロックのborder-boxの大きさから、包含ブロック自身のパディングを引いたものになる。 - ぼかし半径と個々の影パーツの透明度を求める。
- これから影を付けようとしているテキストが、折り返しを考慮しないといけないものかどうかを判別する。
- そのテキストが実際に折り返されているかどうかを判別する。インライン要素の
document.getBoxObjectFor(aNode)で取得できる高さが「折り返された後の全体の高さ」であることに着目して、この高さがline-heightの算出値より大きければ折り返されていると見なす。 - 折り返されているインライン要素の始点のX座標から、包含ブロックの始点のX座標（
document.getBoxObjectFor(aNode)で取得できる値はborder-boxの座標なので、ここからさらに包含ブロックのパディングの値を引く必要がある）を引く。これによって、折り返されているインライン要素が行の何ピクセル目から始まっているかが分かる。 - 影付きテキストの配置の基準座標を包含ボックスのcontent-boxの座標までずらすと同時に、text-indentで行の始点を元の位置までずらす。（例えばインライン要素が3文字目から始まっているなら、影付きテキスト全体の位置を左に3文字分ずらして、1行目だけ右に3文字ずらす。）これで、そのインライン要素が元々あった位置に影付きテキストがぴったりとはまるようになる。
- 影付きテキストがインライン要素の子ではなくブロック要素の子である場合、影付きテキスト自体が「text-indentでずらされた後の行の開始位置」を基準に配置されているので、基準座標をtext-indentの値の分だけ逆方向にずらす。
- 影のぼかし半径とオフセット指定に従って、影用のダミーテキストを配置する（text-shadowとtext-shadow-part）。
- 影用のダミーテキストの上に、ベーステキスト（text-shadow-base）を置く。元々あったテキストは既に
visibility:hiddenで非表示になっているので、このテキストが、実際に目に見える影付きテキストとなる。
分類：Mozilla > XUL,
CSS, Firefox, JavaScript, Mozilla, textshadow, Web技術, XUL ,
時刻：14:44
| この記事へのリンク
| Comments/Trackbacks (0)
| Edit
エントリを編集します。
wikieditish message: Ready to edit this entry.