CSS - dominant-baseline

• トップ
• CSSリファレンス
• dominant-baseline

概要

説明

テキストの主要ベースラインを指定します。現時点では SVG の <text>、<textPath>、<tref>、<tspan> のみで使用できます。

auto

自動的に算出されます。デフォルト値。

alphabetic

アルファベットのベースラインを使用します。

central

中央ベースラインを使用します。

middle

x-middle ベースラインを使用します。

text-top

テキストの上部ベースラインを使用します。

text-bottom

テキストの下部ベースラインを使用します。

ideographic

日本語などの表意文字の下部ベースラインを使用します。

hannging

チベット語などのぶら下がり部のベースラインを使用します。

mathematical

数学文字の中心ベースラインを使用します。

使用例

<svg viewBox="0 0 560 150" width="560" height="150" style="border:1px solid #ccc; font-size:120%;">
  <path d="M10,30 L550,30" stroke="gray" />
  <path d="M10,70 L550,70" stroke="gray" />
  <path d="M10,110 L550,110" stroke="gray" />
  <text x="20" y="30" style="dominant-baseline:auto;">auto</text>
  <text x="110" y="30" style="dominant-baseline:alphabetic;">alphabetic</text>
  <text x="260" y="30" style="dominant-baseline:central;">central</text>
  <text x="390" y="30" style="dominant-baseline:middle;">middle</text>
  <text x="110" y="70" style="dominant-baseline:text-top;">text-top</text>
  <text x="260" y="70" style="dominant-baseline:text-bottom;">text-bottom</text>
  <text x="110" y="110" style="dominant-baseline:ideographic;">ideographic</text>
  <text x="260" y="110" style="dominant-baseline:hanging;">hanging</text>
  <text x="390" y="110" style="dominant-baseline:mathematical;">mathematical</text>
</svg>

リンク

• https://drafts.csswg.org/css-inline/#dominant-baseline-property
• https://svgwg.org/svg2-draft/text.html#DominantBaselineProperty
• https://developer.mozilla.org/ja/docs/Web/CSS/dominant-baseline
• https://caniuse.com/mdn-css_properties_dominant-baseline