files/ja/web/svg/attribute/alignment-baseline/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

---
title: alignment-baseline
slug: Web/SVG/Attribute/alignment-baseline
tags:
  - SVG
  - SVG Attribute
translation_of: Web/SVG/Attribute/alignment-baseline
---
<div>{{SVGRef}}</div>

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

<p class="note"><strong>注:</strong> プレゼンテーション属性として、 <code>alignment-baseline</code> は CSS プロパティとして使用することができます。</p>

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

<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">値</th>
   <td><code>auto</code> | <code>baseline</code> | <code>before-edge</code> | <code>text-before-edge</code> | <code>middle</code> | <code>central</code> | <code>after-edge</code> | <code>text-after-edge</code> | <code>ideographic</code> | <code>alphabetic</code> | <code>hanging</code> | <code>mathematical</code> | <code>top</code> | <code>center</code> | <code>bottom</code></td>
  </tr>
  <tr>
   <th scope="row">既定値</th>
   <td><code>auto</code></td>
  </tr>
  <tr>
   <th scope="row">アニメーション</th>
   <td>可</td>
  </tr>
 </tbody>
</table>

<dl>
 <dt><code>auto</code> {{deprecated_inline}}</dt>
 <dd>この値はその文字が所属する書法のドミナントベースラインです。すなわち、親のドミナントベースラインを使用します。</dd>
 <dt><code>baseline</code></dt>
 <dd>Uses the {{Glossary("dominant baseline")}} choice of the parent. Matches the box’s corresponding {{Glossary("baseline")}} to that of its parent.</dd>
 <dt><code>before-edge</code> {{deprecated_inline}}</dt>
 <dd>The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.</dd>
 <dt><code>text-bottom</code></dt>
 <dd>Matches the bottom of the box to the top of the parent’s content area.</dd>
 <dt><code>text-before-edge</code></dt>
 <dd>
 <p>The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.</p>

 <p class="note"><strong>Note:</strong> This keyword may be mapped to <code>text-top</code>.</p>
 </dd>
 <dt><code>middle</code></dt>
 <dd>Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.</dd>
 <dt><code>central</code></dt>
 <dd>Matches the box’s central baseline to the central baseline of its parent.</dd>
 <dt><code>after-edge</code> {{deprecated_inline}}</dt>
 <dd>
 <p>The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.</p>
 </dd>
 <dt><code>text-top</code></dt>
 <dd>Matches the top of the box to the top of the parent’s content area.</dd>
 <dt><code>text-after-edge</code></dt>
 <dd>
 <p>The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.</p>

 <p class="note"><strong>Note:</strong> This keyword may be mapped to <code>text-bottom</code>.</p>
 </dd>
 <dt><code>ideographic</code></dt>
 <dd>Matches the box’s ideographic character face under-side baseline to that of its parent.</dd>
 <dt><code>alphabetic</code></dt>
 <dd>Matches the box’s alphabetic baseline to that of its parent.</dd>
 <dt><code>hanging</code></dt>
 <dd>
 <p>The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.</p>
 </dd>
 <dt><code>mathematical</code></dt>
 <dd>Matches the box’s mathematical baseline to that of its parent.</dd>
 <dt><code>top</code></dt>
 <dd>
 <p>Aligns the top of the aligned subtree with the top of the line box.</p>
 </dd>
 <dt><code>center</code></dt>
 <dd>Aligns the center of the aligned subtree with the center of the line box.</dd>
 <dt><code>bottom</code></dt>
 <dd>Aligns the bottom of the aligned subtree with the bottom of the line box.</dd>
</dl>

<p>SVG 2 introduces some changes to the definition of this property. In particular: the values <code>auto</code>, <code>before-edge</code>, and <code>after-edge</code> have been removed. For backwards compatibility, <code>text-before-edge</code> may be mapped to <code>text-top</code> and <code>text-after-edge</code> to <code>text-bottom</code>. Neither <code>text-before-edge</code> nor <code>text-after-edge</code> should be used with the {{cssxref("vertical-align")}} property.</p>

<h2 id="Example" name="Example">例</h2>

<pre class="brush: html notranslate">&lt;svg width="300" height="120" viewBox="0 0 300 120"
     xmlns="http://www.w3.org/2000/svg"&gt;

    &lt;!-- Materialisation of anchors --&gt;
    &lt;path d="M60,10 L60,110
             M30,10 L300,10
             M30,65 L300,65
             M30,110 L300,110
             " stroke="grey" /&gt;

    &lt;!-- Anchors in action --&gt;
    &lt;text alignment-baseline="hanging"
          x="60" y="10"&gt;A hanging&lt;/text&gt;

    &lt;text alignment-baseline="middle"
          x="60" y="65"&gt;A middle&lt;/text&gt;

    &lt;text alignment-baseline="baseline"
          x="60" y="110"&gt;A baseline&lt;/text&gt;

    &lt;!-- Materialisation of anchors --&gt;
    &lt;circle cx="60" cy="10" r="3" fill="red" /&gt;
    &lt;circle cx="60" cy="65" r="3" fill="red" /&gt;
    &lt;circle cx="60" cy="110" r="3" fill="red" /&gt;

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

<p>{{EmbedLiveSample("Example")}}</p>

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

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Inline", "#propdef-alignment-baseline", "alignment-baseline")}}</td>
   <td>{{Spec2("CSS3 Inline")}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG2", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>CSS Inline Layout および注釈を参照し、 <code>auto</code>, <code>before-edge</code>, <code>after-edge</code>, <code>text-before-edge</code>, <code>text-after-edge</code> へ変更</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("svg.attributes.presentation.alignment-baseline")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref("alignment-baseline", "CSS alignment-baseline")}}</li>
</ul>