dominant-baseline
dominant-baseline は CSS のプロパティで、ボックス内のテキストとインラインレベルのコンテンツを整列させるために使用される特定のベースライン（主要ベースライン）を指定します。また、ボックスの整列コンテキストでベースライン揃えに参加するすべてのボックスの既定の整列ベースラインも示します。存在する場合、シェイプの dominant-baseline 属性を上書きします。
ベースラインはフォントベースライン表から選択されます。指定のフォントにベースライン表がない場合、またはベースライン表に希望するベースラインの項目がない場合、ブラウザーは経験則を使用して希望するベースラインの位置を決定することがあります。
dominant-baseline プロパティは、変倍ベースライン表を決定または再決定するために使用します。変倍ベースライン表は、 3 つの部分からなる複合値です。
この主要ベースラインのベースライン識別子
ベースライン表
ベースライン表のフォントサイズ
dominant-baseline の値によっては、 3 つの値すべてを再決定します。他のものは、ベースライン表のフォントサイズのみを再設定します。初期値の auto が望ましくない結果をもたらす場合、このプロパティを使用して、望ましい変倍ベースライン表を明示的に設定することができます。
メモ: dominant-baseline プロパティは、 SVG の <text>、<textPath>、<tspan> の各要素のみに効果があります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 79 | 1 | 4 | 18 | 3.2 | |
alphabetic | 1 | 79 | 1 | 4 | 18 | 3.2 |
auto | 1 | 79 | 1 | 4 | 18 | 3.2 |
central | 1 | 79 | 1 | 4 | 18 | 3.2 |
hanging | 1 | 79 | 1 | 4 | 18 | 3.2 |
ideographic | 1 | 79 | 1 | 4 | 18 | 3.2 |
mathematical | 1 | 79 | 1 | 4 | 18 | 3.2 |
middle | 1 | 79 | 1 | 4 | 18 | 3.2 |
基本構文
CSS
text {
dominant-baseline: central;
}
.math-text {
dominant-baseline: mathematical;
}ライブデモ
実務での使いどころ
-
SVGテキストの垂直中央配置
SVGグラフのラベルテキストにdominant-baseline: centralを設定し、要素に対して正確に中央揃えします。
注意点
- ベースラインの値はフォントによって挙動が異なるため、使用するフォントで実際の表示を必ず確認してください。
アクセシビリティ
- ベースラインの変更はテキストの視覚的な位置のみに影響し、読み上げ順序は変わりません。テキストの論理的な順序を維持してください。