CSS3

プロパティ

baseline-shift

→● mdn(SVG) mdn

縦方向のずらし。

<length-percentage> ○

＝<length> | <percentage>

このプロパティは、ボックスの 整列後のずらし を指定する。［<length-percentage>／sub／super］は、基底線に相対的なずらし値 であり、ボックスを基底線に整列された位置から相対的にずらす。［top／center／bottom］は、行に相対的なずらし値 であり、行内ボックスと その内容を それが属する行ボックスの限界域に相対的にずらす。

<length> ○

指定された長さだけ、上げる（正な値の場合）か下げる（負な値の場合）。

<SPAN style="font-size:40px; border:1px solid black;">
 開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
  baseline-shift:10px;
 ">終了</SPAN>

¶作用せず

<percentage> ○

指定された［line-height プロパティに対する百分率］だけ、上げる（正な値の場合）か下げる（負な値の場合）。

<SPAN style="font-size:40px; border:1px solid black;">
 開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
  baseline-shift:20%;
 ">終了</SPAN>

¶作用せず

sub

親のボックスの下付き文字に適切なオフセットだけ下げる。ユーザー エージェントは、親のフォント計量を利用して このオフセットを見出してもよい ─ 他の場合の既定のオフセットは、［親の使用 font-size ÷ 5］とする。¶つまりブラウザーにより異なる。

<SPAN style="font-size:40px; border:1px solid black;">
 開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
  baseline-shift:sub;
 ">終了</SPAN>

¶作用せず

super

親のボックスの上付き文字に適切なオフセットだけ上げる。ユーザー エージェントは、親のフォント計量を利用して このオフセットを見出してもよい ─ 他の場合の既定のオフセットは、［親の使用 font-size ÷ 3 ］とする。¶つまりブラウザーにより異なる。

<SPAN style="font-size:40px; border:1px solid black;">
 開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
  baseline-shift:super;
 ">終了</SPAN>

¶作用せず

top

整列済み下位ツリーの行上面辺を行ボックスの行上面辺に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
 開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
  baseline-shift:top;
 ">終了</SPAN>

¶作用せず

center

整列済み下位ツリーの中央を行ボックスの中央に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
 開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
  baseline-shift:center;
 ">終了</SPAN>

¶作用せず

bottom

整列済み下位ツリーの行下面辺を行ボックスの行下面辺に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
 開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
  baseline-shift:bottom;
 ">終了</SPAN>

¶作用せず

行内ボックスの 整列済み下位ツリー は、当のボックスのレイアウト限界域、ボックスの各子行内ボックスのうち［ alignment-baseline プロパティの算出値は行に相対的なずらし値でないもの ］すべての整列済み下位ツリーを包含する。整列済み下位ツリーの［行上面／行下面］辺は、下位ツリー内にある各レイアウト限界域の［ 上面／下面］辺のうち［最も高いもの／最も低いもの］になる。

¶課題省く

テスト