alignment-baseline
==================

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

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

プレゼンテーション属性として、あらゆる要素に適用できますが、効果があるのは `<tspan>`, `<tref>` (en-US), `<altGlyph>`, 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.

**メモ:** 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.

**メモ:** 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.

例
-


```html
<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)` を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # alignment-baseline-property |
| Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `CSS alignment-baseline`