このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

alignment-baseline

alignment-baseline 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ字のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることが可能になります。既定値は alignment-baseline プロパティの計算値と同じ名前の値となります。

注: プレゼンテーション属性として、 alignment-baseline は CSS プロパティとして使用することができます。

プレゼンテーション属性として、あらゆる要素に適用できますが、効果があるのは <tspan>, <tref> (en-US), <altGlyph> (en-US), and <textPath> (en-US) の4つの属性のみです。

使用上の注意

値 auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom
既定値 auto
アニメーション 可
auto
この値はその文字が所属する書法のドミナントベースラインです。すなわち、親のドミナントベースラインを使用します。
baseline
Uses the dominant baseline choice of the parent. Matches the box’s corresponding baseline to that of its parent.
before-edge
The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.
text-bottom
Matches the bottom of the box to the top of the parent’s content area.
text-before-edge

The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.

Note: This keyword may be mapped to text-top.

middle
Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
central
Matches the box’s central baseline to the central baseline of its parent.
after-edge

The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.

text-top
Matches the top of the box to the top of the parent’s content area.
text-after-edge

The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.

Note: This keyword may be mapped to text-bottom.

ideographic
Matches the box’s ideographic character face under-side baseline to that of its parent.
alphabetic
Matches the box’s alphabetic baseline to that of its parent.
hanging

The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.

mathematical
Matches the box’s mathematical baseline to that of its parent.
top

Aligns the top of the aligned subtree with the top of the line box.

center
Aligns the center of the aligned subtree with the center of the line box.
bottom
Aligns the bottom of the aligned subtree with the bottom of the line box.

SVG 2 introduces some changes to the definition of this property. In particular: the values auto, before-edge, and after-edge have been removed. For backwards compatibility, text-before-edge may be mapped to text-top and text-after-edge to text-bottom. Neither text-before-edge nor text-after-edge should be used with the vertical-align property.

例

<svg width="300" height="120" viewBox="0 0 300 120"
     xmlns="http://www.w3.org/2000/svg">

    <!-- Materialisation of anchors -->
    <path d="M60,10 L60,110
             M30,10 L300,10
             M30,65 L300,65
             M30,110 L300,110
             " stroke="grey" />

    <!-- Anchors in action -->
    <text alignment-baseline="hanging"
          x="60" y="10">A hanging</text>

    <text alignment-baseline="middle"
          x="60" y="65">A middle</text>

    <text alignment-baseline="baseline"
          x="60" y="110">A baseline</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="10" r="3" fill="red" />
    <circle cx="60" cy="65" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

<style><![CDATA[
text{
    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>

他の要素 (<text> など) におけるオブジェクトの配置については、 dominant-baseline (en-US) を参照してください。

仕様書

仕様書 状態 備考
CSS Inline Layout
alignment-baseline の定義		 草案 変更なし
Scalable Vector Graphics (SVG) 2
alignment-baseline の定義		 勧告候補 CSS Inline Layout および注釈を参照し、 auto, before-edge, after-edge, text-before-edge, text-after-edge へ変更
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
alignment-baseline の定義		 勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報