baseline-shiftでSVGテキストのベースラインをずらす

baseline-shiftはCSS Inline 3で定義されたCSSプロパティで、SVGテキスト要素のベースラインを親要素から相対的にずらすために使います。SVGの同名属性の後継として位置付けられ、Baseline 2026で主要ブラウザに揃いました。

公開: 2026年5月23日(土)

更新: 2026年5月23日(土)

0 views

はじめに

SVGの<text>の中で化学式や数式、図中のラベルを書くとき、特定の文字だけ上付き・下付きにしたい場面があります。SVGには古くからbaseline-shiftという同名の属性があり、<text>や<tspan>の属性として書けばずらせました。ただこの属性は非推奨化が進んでおり、CSSプロパティへの移行が推奨されています。

CSS Inline 3で再定義されたbaseline-shiftプロパティはこの後継で、SVGの<text>内のテキスト要素のベースラインをCSSから制御できます。Baseline 2026で主要ブラウザに揃い、SVG中のテキストの上付き・下付き調整をCSSで素直に書けるようになりました。

プロパティの値

baseline-shiftはインラインレベルボックスとSVGテキスト要素（<tspan>や<textPath>）に適用されるプロパティで、対象要素のドミナントベースラインを親のベースラインから相対的に動かします。ただし現状ChromeやEdgeはHTMLのインラインへの視覚適用が未対応で、実用上はSVGテキストでの利用が中心になります。CSS Inline Layout Module Level 3で定義されている値は次の通りです。初期値は0（ずらさない）です。

CSS Inline Layout Module Level 3

drafts.csswg.org

<length-percentage> - 任意の長さや割合でずらす。em / px / %などが使える。正の値で上、負の値で下に動く
sub - 親フォントに定義されている下付き位置までずらす
super - 親フォントに定義されている上付き位置までずらす
top - 行ボックスの上端にベースラインを揃える
center - 行ボックスの上下中央にベースラインを揃える
bottom - 行ボックスの下端にベースラインを揃える

subとsuperはフォントごとに埋め込まれた下付き・上付きの標準位置を使うので、ブラウザが<sub> / <sup>を表示するときの位置に近い結果になります。top / center / bottomは行ボックス（その1行ぶんのテキストを上下方向に収める箱）の端や中央に揃えるための値です。なおtop / center / bottomは現状Firefoxのみの対応で、Chrome / Edge / Safariは未対応のため、跨いで使えるのは<length-percentage> / sub / superまでです。

基本の使い方

SVGの<text>の中で<tspan>にbaseline-shiftを当てると、その部分だけベースラインが動きます。化学式や単位の上付き・下付きをCSSで揃えて書きたい場面で使えます。

<svg viewBox="0 0 360 60" width="360" height="60">
  <text x="0" y="40" font-size="28">
    水の化学式は H<tspan class="sub">2</tspan>O です。
  </text>
  <text x="0" y="40" font-size="28">
    面積は 10 m<tspan class="sup">2</tspan> です。
  </text>
</svg>

.sub {
  baseline-shift: sub;
  font-size: 0.8em;
}

.sup {
  baseline-shift: super;
  font-size: 0.8em;
}

長さで微調整したいときはemが使いやすいです。

.note {
  baseline-shift: 0.3em;
  font-size: 0.75em;
}

CSSプロパティとして書くことで、SVGのbaseline-shift属性を直接書くより一貫した記述ができます。属性とCSSの両方が効く場合、CSSの方が優先されます。

baseline-shift値の比較

baseline-shift

SVGの tspan に baseline-shift: super を当てています。赤い文字がずらしの対象、グレーの破線が親 text のベースラインです。

vertical-alignとの関係

CSS Inline Layout 3では、vertical-alignはbaseline-source、alignment-baseline、baseline-shiftの3つを束ねるショートハンドとして定義されています。SVGテキストでもvertical-alignが同じ意味で使えますが、baseline-shiftはずらしの量だけを単独で扱えるロングハンドとして、デザインシステムやレイヤーで合成したいときに役立ちます。

/* shorthand: 他のサブプロパティも同時にリセットされる */
text .note {
  vertical-align: 0.3em;
}

/* longhand: 他のベースライン関連を触らずにずれだけを管理したいとき */
text .note {
  baseline-shift: 0.3em;
}

なお3つのロングハンドのうち、baseline-shiftがBaseline 2026で揃った一方で、残りの2つはまだ温度差があります。alignment-baselineはFirefox 149で実装が入り、Chrome / Edge / Safari / Firefoxすべてで動くようになったので、近いうちにBaselineに正式に組み込まれるのを待っている状態です。baseline-sourceはSafariの対応待ちで、現状はChrome / Edge / Firefoxのみです。3つすべてが揃って初めて、vertical-alignをショートハンドとしてフルに使える状態になります。

おわりに

baseline-shiftはSVGテキストのベースラインをずらすCSSプロパティとして、SVGの古い同名属性に代わる位置付けでBaseline 2026に揃いました。化学式・数式・図中ラベルなど、SVGの<text>に細かい上付き・下付きを入れたい場面で素直に書ける選択肢です。

ただ、HTMLインラインへの視覚適用やtop / center / bottom、baseline-sourceなど、CSS Inline 3の周辺プロパティはFirefoxだけが先行している部分が多く、ChromeやSafariで安心して使えるようになるまではまだ距離があるように感じました。Baselineに揃ったとはいえ、実用面でフルに活かせるのはもう少し先になりそうです。

k8o

Blog