alignment-baseline

概要

SVGやインラインコンテンツにおいて、テキストや要素の垂直方向の揃え方を細かく制御できます。alphabetic、central、mathematical など複数のベースラインオプションがあり、多言語テキストや数式の表示で重要な役割を果たします。特にSVGテキスト要素の精密な配置に有用です。

対応ブラウザ

基本構文

tspan {
  alignment-baseline: central;
}
.math-symbol {
  alignment-baseline: mathematical;
}

実務での使いどころ

• SVGテキストの精密な垂直配置

  SVG内のテキスト要素やインライン要素を、異なるフォントサイズや言語スクリプト間で正確にベースラインを揃えて配置できます。

注意点

アクセシビリティ

• ベースラインの調整は視覚的な変更のみであり、スクリーンリーダーには影響しません。テキストの意味的な構造はHTMLマークアップで適切に表現してください。

参考リンク

• MDN Web Docs — alignment-baseline