Home > Latest topics

Latest topics > 折り返されたインライン要素への影付け

宣伝1。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! シス管系女子って何!? - 「シス管系女子」特設サイト

宣伝2。Firefox Hacks Rebooted発売中。本書の1/3を使って、再起動不要なアドオンの作り方のテクニックや非同期処理の効率のいい書き方などを解説しています。既刊のFirefox 3 Hacks拡張機能開発チュートリアルと併せてどうぞ。

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック
浅井 智也 池田 譲治 小山田 昌史 五味渕 大賀 下田 洋志 寺田 真 松澤 太郎
オライリージャパン

折り返されたインライン要素への影付け - Jul 29, 2007

テキストシャドウでの影付けの基本原理は以下の通り。

以下の解説を図を使って書き直しました

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

Comments/Trackbacks

TrackBack ping me at


の末尾に2014年1月19日時点の日本の首相のファミリーネーム(ローマ字で回答)を繋げて下さい。例えば「noda」なら、「2007-07-29_textshadow-linebreak.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。

Post a comment

writeback message: Ready to post a comment.

2014年1月19日時点の日本の首相のファミリーネーム(ひらがなで回答)

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のつぶやき

オススメ

Mozilla Firefox ブラウザ無料ダウンロード