dominant-baseline
テキストのベースライン揃えを制御するプロパティで、特にSVGテキストやインライン要素の垂直位置調整に使用されます。alphabetic、central、middle、text-topなどの値で、テキストの基準線を変更できます。多言語対応や数式表示など、異なるベースライン体系が必要な場面で重要です。
概要
テキストのベースライン揃えを制御するプロパティで、特にSVGテキストやインライン要素の垂直位置調整に使用されます。alphabetic、central、middle、text-topなどの値で、テキストの基準線を変更できます。多言語対応や数式表示など、異なるベースライン体系が必要な場面で重要です。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 79+
Safari 4+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 3.2+
Firefox Android 4+
基本構文
CSS
text {
dominant-baseline: central;
}
.math-text {
dominant-baseline: mathematical;
}実務での使いどころ
-
SVGテキストの垂直中央配置
SVGグラフのラベルテキストにdominant-baseline: centralを設定し、要素に対して正確に中央揃えします。
注意点
- ベースラインの値はフォントによって挙動が異なるため、使用するフォントで実際の表示を必ず確認してください。
アクセシビリティ
- ベースラインの変更はテキストの視覚的な位置のみに影響し、読み上げ順序は変わりません。テキストの論理的な順序を維持してください。