alignment-baseline
alignment-baseline は CSS のプロパティは、ボックスのテキストおよびインラインレベルのコンテンツの配置に使用する特定のベースラインを指定します。ベースライン配置とは、配置コンテキスト内の複数の配置対象物のベースライン間の関係です。ベースライン配置を実行する場合、 alignment-baseline プロパティの値は、ボックスのどのベースラインが、その配置コンテキストの対応するベースラインに配置されるかを指定します。
メモ: alignment-baseline プロパティは、インラインレベルボックス、フレックスアイテム、グリッドアイテム、表セル、および SVG の <text>、<textPath>、<tspan> 要素にのみ効果があります。存在する場合、シェイプの alignment-baseline 属性を上書きします。
インライン整形コンテキストでは、インラインレベルのボックスフラグメントおよびグリフは、その親インラインボックスフラグメントによってそのインライン軸に沿って確立された配置コンテキストを共有します。SVG テキストレイアウトでは、これらの値は、代わりに SVG の現在のテキスト位置に整列されるベースラインを指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 79 | 149 | 5.1 | 18 | 5 | |
alphabetic | 1 | 79 | | 5.1 | 18 | 5 |
baseline | 1 | 79 | 149 | 5.1 | 18 | 5 |
central | 1 | 79 | | 5.1 | 18 | 5 |
ideographic | 1 | 79 | | 5.1 | 18 | 5 |
mathematical | 1 | 79 | | 5.1 | 18 | 5 |
middle | 1 | 79 | 149 | 5.1 | 18 | 5 |
text-after-edge | 1 | 79 | | 5.1 | 18 | 5 |
text-before-edge | 1 | 79 | | 5.1 | 18 | 5 |
基本構文
CSS
tspan {
alignment-baseline: central;
}
.math-symbol {
alignment-baseline: mathematical;
}ライブデモ
実務での使いどころ
-
SVGテキストの精密な垂直配置
SVG内のテキスト要素やインライン要素を、異なるフォントサイズや言語スクリプト間で正確にベースラインを揃えて配置できます。
注意点
- Firefoxでは未サポートです。SVG以外のコンテキストでの挙動はブラウザにより異なる場合があります。
アクセシビリティ
- ベースラインの調整は視覚的な変更のみであり、スクリーンリーダーには影響しません。テキストの意味的な構造はHTMLマークアップで適切に表現してください。