Yugien - 遊戯苑
テーマ

CSS

この記事では、SVGなどで文字の基準線をそろえるCSSのalignment-baselineについて、使う場面と注意点を説明します。

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の場合）

baseline middle

HTML

<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>

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

対応状況
  • 主にSVG環境でサポートされます。HTML要素での使用は互換性や実装状況が不安定な場合が多いです。
  • 新しいブラウザや最新のSVG実装ではそれなりに動作するものの、必ずしも全ての値が期待通りに解釈されるとは限りません。
注意点
  • ブラウザ差異が大きい場合、別の方法（baseline-shift など）で調整を行うほうが確実なケースもあります。
  • そもそもSVGでの細かいタイポグラフィ制御が必要な場合に限って使われるプロパティなので、一般的なWebページのレイアウトでは vertical-align や line-height などを調整するほうが多いです。

まとめ