dominant-baseline

構文

/* 初期値 */ dominant-baseline: auto; /* キーワード値 */ dominant-baseline: alphabetic; dominant-baseline: central; dominant-baseline: hanging; dominant-baseline: ideographic; dominant-baseline: mathematical; dominant-baseline: middle; dominant-baseline: text-bottom; dominant-baseline: text-top; /* グローバル値 */ dominant-baseline: inherit; dominant-baseline: initial; dominant-baseline: revert; dominant-baseline: revert-layer; dominant-baseline: unset; 

値

auto

このプロパティが <text> 要素に適用された場合、計算された値は writing-mode 属性の値に依存します。

writing-mode が横書きの場合、 dominant-baseline 成分の値は alphabetic です。 そうではなく、 writing-mode が縦書きの場合、 dominant-baseline 成分の値は central です。

このプロパティが <tspan>、<textPath> のいずれかの要素に適用された場合、 dominant-baseline と baseline-table 成分は親テキストコンテンツ要素のものと同一のままとなります。

baseline-shift の計算値が実際にベースラインを移動させた場合、ベースライン表のフォントサイズ成分は dominant-baseline 属性が存在する要素の font-size 属性の値に設定されます。それ以外の場合はベースライン表のフォントサイズは要素のものと同じままです。

親のテキストコンテンツ要素がない場合、 scaled-baseline-table の値は <text> 要素であるかのように構築されます。

alphabetic

dominant-baseline のベースライン識別子は alphabetic に設定され、派生したベースライン表はフォント内の alphabetic のベースライン表を使用して構築され、ベースライン表のフォントサイズは、要素の SVG 属性である font-size の値、または設定されている場合は CSS の font-size の値に変更されます。

central

主要ベースラインのベースライン識別子は central に設定されます。派生ベースラインテーブルは、フォントのベースラインテーブルで定義されたベースラインから構築されます。フォントのベースラインテーブルは、ベースラインテーブル名の ideographic、alphabetic、hanging、mathematical の優先順位で選択されます。ベースラインテーブルのフォントサイズは、要素の SVG 属性 font-size の値、または設定されている場合は CSS の font-size プロパティの値に変更されます。

hanging

主要ベースラインのベースライン識別子を hanging に設定し、派生ベースライン表をそのフォントの hanging ベースライン表を用いて構築し、ベースライン表のフォントサイズを、この要素の SVG 属性 font-size の値、または設定されている場合は CSS の font-size プロパティの値に変更されます。

ideographic

主要ベースラインのベースライン識別子を ideographic に設定し、派生ベースライン表をそのフォントの ideographic ベースライン表を用いて構築し、ベースライン表のフォントサイズを、この要素の SVG 属性 font-size の値、または設定されている場合は CSS の font-size プロパティの値に変更されます。

mathematical

主要ベースラインのベースライン識別子を mathematical に設定し、派生ベースライン表をそのフォントの mathematical ベースライン表を用いて構築し、ベースライン表のフォントサイズを、この要素の SVG 属性 font-size の値、または設定されている場合は CSS の font-size プロパティの値に変更されます。

middle

主要ベースラインのベースライン識別子は middle に設定されます。派生ベースラインテーブルは、フォントのベースラインテーブルで定義されたベースラインから構築されます。フォントのベースラインテーブルは、ベースラインテーブル名の ideographic、alphabetic、hanging、mathematical の優先順位で選択されます。ベースラインテーブルのフォントサイズは、要素の SVG 属性 font-size の値、または設定されている場合は CSS の font-size プロパティの値に変更されます。

text-bottom

line-under の辺がベースラインとして使用されます。これはふつう、フォントの em ボックスの下辺です。

text-top

line-over の辺がベースラインとして使用されます。これはふつう、フォントの em ボックスの上辺です。

公式定義

形式文法

dominant-baseline = 
 auto |
 text-bottom |
 alphabetic |
 ideographic |
 middle |
 central |
 mathematical |
 hanging |
 text-top 

例

<svg viewBox="0 0 450 160" width="700" height="200"> <text x="50" y="20">alphabetic</text> <text x="50" y="60">central</text> <text x="50" y="100">hanging</text> <text x="50" y="140">ideographic</text> <text x="250" y="20">mathematical</text> <text x="250" y="60">middle</text> <text x="250" y="100">text-bottom</text> <text x="250" y="140">text-top</text> <path d="M 0,20 l 400,0 m -400,40 l 400,0 m -400,40 l 400,0 m -400,40 l 400,0" stroke="grey" /> <text x="0" y="20" fill="red">auto</text> <text x="0" y="60" fill="red">auto</text> <text x="0" y="100" fill="red">auto</text> <text x="0" y="140" fill="red">auto</text> </svg> 

text { font-size: 20px; } text:nth-of-type(1) { dominant-baseline: alphabetic; } text:nth-of-type(2) { dominant-baseline: central; } text:nth-of-type(3) { dominant-baseline: hanging; } text:nth-of-type(4) { dominant-baseline: ideographic; } text:nth-of-type(5) { dominant-baseline: mathematical; } text:nth-of-type(6) { dominant-baseline: middle; } text:nth-of-type(7) { dominant-baseline: text-bottom; } text:nth-of-type(8) { dominant-baseline: text-top; } 

仕様書

ブラウザーの互換性

関連情報

• alignment-baseline
• text-anchor
• vertical-align
• SVG の dominant-baseline 属性