* 仕様書

[REFS[

- [7] 
[CITE@en[CSS Inline Layout Module Level 3]], [TIME[2023-11-17T20:01:02.000Z]], [TIME[2023-11-18T04:15:02.744Z]] <https://drafts.csswg.org/css-inline-3/#propdef-vertical-align>

]REFS]

* 特性値

[8]
[CODE[vertical-align]]
は、
[CODE[baseline-source]],
[CODE[alignment-baseline]],
[CODE[baseline-shift]]
の[[shorthand]]です。
[SRC[>>7]]

[9] 
ただし指定できる値には制限があります。
[CODE[baseline-source]] の [CODE[auto]]
は
[CODE[vertical-align]]
には使えません。
[SRC[>>7]]

[10] 
[CODE[vertical-align]] は古くからあり、
[[longhand]]
は後に [[SVG]] で導入されたものでした。
その歴史的経緯もあって、
[CODE[vertical-align]]
の方がよく使われ、十分に実装されていました。

[13] 
[[仕様書]]は、
[[longhand]] を個別に [[cascade]] する必要がある場合や、
[[異物]]の [[SVG]] 実装との互換性が必要な場合を除き、
[[shorthand]] の [CODE[vertical-align]]
を使う[SHOULD[べき]]としています。
[SRC[>>7]]

[11] 
現在でも [[Chrome]] の実装は仕様通りでなく複数の値が指定できないなど制限があるようです。
([[longhand]] の個別の指定はできても、 [[shorthand]] で指定できないことがあります。)
[TIME[2023-11-18T04:26:07.200Z]]

[14] [[文字列座標系]]

* 表

[12] [[表]]の[[こま]]における縦配置にも影響します。 [SRC[>>7]]

* 歴史

** HTML

[SEE[ [CODE[valign]] ]]

** CSS

[1]
[CITE[Bug 1652 - <sup>(vertical-align:super)の位置が上過ぎる]] <http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=1652>
([[名無しさん]] [WEAK[2005-11-26 02:27:19 +00:00]])

[2]
[CODE(CSS)@en[[[-webkit-baseline-middle]]]]
([[名無しさん]] [sage])

[3]
[CODE(CSS)@en[[[vertical-align]]]] の[[算出値]]
<https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20vertical-align%3A%2024.5%25%3B%0D%0A%7D%0D%0A;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0D%0A%20%20w%20(sd.verticalAlign)%3B%0D%0A%22%20value%3DgetComputedStyle%3E%0D%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0D%0A%20%20w%20(sd.verticalAlign)%3B%0D%0A%22%20value%3DcurrentStyle%3E%0D%0A%3Cp%3Exxx;p=n;x=style-element>

[4]
>>3 [[Opera]] 9 では、
[[鍵語]]が指定されたら[[算出値]] ([[鍵語]]) を返します。
[CODE(CSS)@en[<[[length]]>]] や [CODE(CSS)@en[<[[percentage]]>]]
が指定されると、 [CODE(DOMm)@en[[[getComputedStyle]]]] では[[算出値]]
([CODE(CSS)@en[[[px]]]]) を、 [CODE(DOMa)@en[[[currentStyle]]]]
では[[指定値]] (ただし[[単位]]は常になぜか [CODE(CSS)@en[[[px]]]] のまま)
を返すようです (どちらも[[整数]]に[[切り捨て]])。

[[WinIE 6]] は[[指定値]]を返します。

[[Firefox]] 2 では、
[[鍵語]]が指定されたら[[算出値]] ([[鍵語]]) を返します。
[CODE(CSS)@en[<[[length]]>]] が指定されたら[[算出値]] ([CODE(CSS)@en[[[px]]]])
を返します。 [CODE(CSS)@em[<[[percentage]]>]] が指定されたら[[指定値]]を返します。

[5]
[[WinIE 6]] は [CODE(CSS)@en[[[auto]]]] という値を認識します。
[[初期値]]はそれのようです。

;; [[Firefox]] 2 と [[Opera]] 9 は[[宣言]]ごと[[無視]]します。

[6]
[CODE(CSS)@en[[[vertical-align]]]] の[[百分率値]]は同じ[[要素]]の
[CODE(CSS)@en[[[line-height]]]] に対するものと定義されています。
[CODE(CSS)@en[[[line-height]]]] の[[算出値]]は[[鍵語]]
[CODE(CSS)@en[[[normal]]]] だったり
[CODE(CSS)@en[<[[number]]>]] だったりするので、直接[[絶対長]]に変換できません。
(一応どちらの[[使用値]]も[[レンダリング]]せずに決定できますが・・・。)
なので、[[百分率値]]を[[絶対長]]に変換せずに[[算出値]]にしてしまう
[[Firefox]] のような実装はそれなりに筋は通っています。
([[名無しさん]])