CSS

The alignment-baseline property is used in SVG and similar contexts to specify how the text baseline should be aligned relative to the parent element or surrounding text.

alignment-baseline

　alignment-baseline プロパティは、主にSVGにおけるテキストやインライン要素のベースライン位置を制御するために使用されるプロパティです。通常のHTML＋CSS（静的な文書レイアウト）においてはあまり使われず、実装状況や仕様上の扱いも限定的です。

alignment-baseline とは

役割

親要素や周囲のテキストのベースラインに対して、子要素（テキストやインライン要素）の基準がどのように揃えられるかを制御する。

使用される場面

• SVGテキスト要素 (<text>, <tspan>, <textPath> など) において、他の文字列との相対的な上下位置を微調整したい場合。
• CSS Inline Layout Module Level 3 などのドラフト仕様で検討されていたが、現時点ではSVGでの使用が主。

主な値と挙動

　alignment-baseline は、仕様上次のような値が定義されています。ただし、ブラウザによって未実装・非対応の値があるため実際の動作には注意が必要です。

baseline

デフォルトのベースラインに合わせる（アルファベットであればアルファベットベースライン）。

middle

親要素（もしくは行ボックス）の中央と要素の中央が合うように配置する。

before-edge / text-before-edge

多くの場面ではテキストの上端が親要素の上端に揃えられるイメージ。

SVGなどでの各文字のボックス（フォントボックス）の “before edge”（上端）を基準にする。

after-edge / text-after-edge

多くの場面ではテキストの下端が親要素の下端に揃えられるイメージ。

central

フォントの幾何学的中心線に合わせる。たとえば円形の中心をとるようにベースラインが決められる

mathematical

数式のレイアウトや数学的な文字列組版で利用される数学的ベースラインに合わせる。

ideographic

漢字などの表意文字（CJK文字）を想定したベースラインに合わせる。

hanging

インド系文字や一部のタイポグラフィで使われる、ぶら下がりベースラインに合わせる。

alphabetic

アルファベットに特化したベースライン（いわゆるローマン系フォントでの通常の横書きベースラン）。

auto

ユーザーエージェント（ブラウザ）により自動で選ばれる。通常は baseline と類似の動作になる。

　実際には SVG の実装状況などにより、期待通りに反映されない場合や、一部ブラウザでサポートが不完全な場合があります。

関連するプロパティとの違い

dominant-baseline

• こちらも同様にSVGテキストにおけるベースラインを制御するプロパティです。
• alignment-baseline が「親要素や周囲のベースラインに対して子要素をどう合わせるか」を制御するのに対し、dominant-baseline は「要素自身のベースラインがどのように計算されるか」を制御するイメージです。
• 使い分けの例

  dominant-baseline

  このテキスト要素自体のベースラインを “middle” にしたい

  alignment-baseline

  親のベースラインに対して “alphabetic” や “central” など別の位置で揃えたい

baseline-shift

• 同じくSVGテキストで使われるプロパティで、ベースラインからの相対的なシフト量を指定できます。
• 単位（px, em など）でテキストをベースラインから上下にずらしたい場合に使います。
• 一方、alignment-baseline は特定のベースライン種類を指定するのに対し、baseline-shift は「基準は既定のベースラインだけれど、そこからさらに±○○px/○○em動かす」という細かい調整に便利です。

簡単な使用例（SVGの場合）

<svg width="200" height="100">
	<!-- ベースラインの異なる2つのテキストを用意 -->
	<text x="20" y="50" font-size="24" alignment-baseline="baseline">
		baseline
	</text>
	<text x="20" y="50" font-size="24" fill="red" alignment-baseline="middle">
		middle
	</text>
</svg>

• 上記例では、同じ座標 (x=50, y=100) に対して、alignment-baseline="baseline" の文字列と alignment-baseline="middle" の文字列の上下位置が変化します。
• ただし、実際の描画結果はフォントやブラウザにより多少異なります。

ブラウザ対応状況と注意点

対応状況

• 主にSVG環境でサポートされます。HTML要素での使用は互換性や実装状況が不安定な場合が多いです。
• 新しいブラウザや最新のSVG実装ではそれなりに動作するものの、必ずしも全ての値が期待通りに解釈されるとは限りません。

注意点

• ブラウザ差異が大きい場合、別の方法（baseline-shift など）で調整を行うほうが確実なケースもあります。
• そもそもSVGでの細かいタイポグラフィ制御が必要な場合に限って使われるプロパティなので、一般的なWebページのレイアウトでは vertical-align や line-height などを調整するほうが多いです。

まとめ

• alignment-baseline は、SVGテキストなどで要素をどのベースラインに合わせるかを指定するプロパティであり、HTML要素での一般的なテキストレイアウトとしてはあまり利用されません。
• 値によってはCJK文字やインド系文字など、言語による異なるタイポグラフィ上のベースラインを反映できるため、多国語対応の高度なSVGテキストレイアウトで力を発揮します。
• 実際に使用する場合は、ブラウザの対応状況や 代替手段（dominant-baseline, baseline-shift）との組み合わせを考慮しながら、どのベースラインに合わせるべきかを慎重に検討する必要があります。