Re: vertical-align の挙動について

いしづさん、石井さん

村上です。

CSS2.1の vertical-align の仕様を確認したところ、Firefoxが正しく、ChromeとIEにはそれぞれ誤りがあるのが分かりました。

vertical-alignの仕様:
http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
日本語訳 http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#propdef-vertical-align

    In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box. 
〈以下の定義において、非置換インライン要素に対して、配置に使用するボックスは、ボックスの高さが'line-height'である（包含ボックスのグリフと各辺の半行間は上記を参照）。他のすべての要素に対して、配置に使用するボックスはマージンボックスである。〉

という仕様の記述で、vertical-align を span（非置換インライン要素）に指定した場合と img （置換インライン要素）に指定した場合との違いが説明できます。
span に指定した場合には、その高さは line-height ということになります。
それに対して、img に指定した場合には、その高さは line-height は無関係で、画像の高さ＋padding+border+marginということになります。

このサンプルでは line-height が 2em なので、各spanのボックスには上下に 0.5em ずつの半行間も含めた高さ 2em の上端や下端を vertical-align に使うということです。


FirefoxやChromeの結果（正しい）の
３… text-top
４… text-bottom
が、text-topが下寄りに、text-bottomが上寄りになるのは、上記の理由です。
IE11の結果は仕様どおりでありません（text-top、text-bottomでline-heightが無視されてる）。

text-top、text-bottomでテキストの上や下に揃えるためには、vertical-align を指定する span に line-height: 1 を指定するとよいと思います。

それから、vertical-align プロパティは継承しないので、vertical-align を指定した span の中に font-size を小さくした span がある場合、それらの span どうしは通常のベースラインで揃うことになります。
font-size を小さくした文字を text-top や text-bottom で配置したい場合には、直接その span に vertical-align を指定する必要があります。



> このとき、Google Chrome や Safari では、
> 先に出てくる「５」「６」に続く html 要素
> （上の例では <span>、<img>）の vertical-align が、
> baseline に戻っているように思えます。
> 
> 他の text-top や super などではそのようなことが起こらないのですが、
> どちらが正しい挙動でしょうか。

これについては Firefox と IE が正しいです。
この例で、vertical-align の top/bottom が指定された span の中にネストした要素には vertical-align の指定がない（初期値の baseline）ので、span の中で通常のベースラインで揃うべきです。
vertical-align:top/bottomのボックスの内容が、普通にそのボックスに相対で配置されなければならないことは、vertical-align の仕様の top/bottom のところに次の説明から明らかです：

    Since the element may have children aligned relative to it (which in turn may have descendants aligned relative to them), these values use the bounds of the aligned subtree....


--
村上 真雄 (MURAKAMI Shinyu)
株式会社ビブリオスタイル
murakami@vivliostyle.com
http://vivliostyle.com


Koji Ishii <kojiishi@gluesoft.co.jp> wrote on 2014/09/20 17:18:23
> 「5」「6」の挙動の違いは、Chrome が正しくて、Firefox/IE がおかしいように見えますが、他の要素やスタイルを排除して、表示に違いが出る部分だけに限った HTML をお作りいただくことは可能ですか？ その方が原因を探りやすい気がします。
> 
> 
> On Sep 19, 2014, at 8:54 PM, I N <xtool-html@outlook.com<mailto:xtool-html@outlook.com>> wrote:
> 
> いしづです。vertical-align の挙動についての質問です。
> 
> 【１】
> 各ブラウザにおいて、テキストのみに適用した場合と、画像のみに適用した場合で
> 表示位置が異なるのは何故なのでしょうか。
> CSS2.1 の仕様を見るかぎりでは、画像のケースのほうが正しいように思えます。
> 
> 
> 【２】
> 以下のような指定をした場合
> ----
> <span style="vertical-align: top;">５<span>５</span></span>
> <span style="vertical-align: bottom;">６<span>６</span></span>
> ----
> あるいは、
> ----
> <span style="vertical-align: top;">５<img src="../image/i-005.png"/></span>
> <span style="vertical-align: bottom;">６<img src="../image/i-006.png"/></span>
> ----
> このとき、Google Chrome や Safari では、
> 先に出てくる「５」「６」に続く html 要素
> （上の例では <span>、<img>）の vertical-align が、
> baseline に戻っているように思えます。
> 
> 他の text-top や super などではそのようなことが起こらないのですが、
> どちらが正しい挙動でしょうか。
> 
> 
> 本日の分科会で提出した資料をお送りします。
> 
> ・140918-vertical-align.pdf
>   各ブラウザと、EPUB の RS での表示例です。
>   super と sub の位置が微妙に違うものについては、無視してください
>   （CSS2.1 の仕様上、正確な位置が定められていないようなので）。
> 
> ・140918-vertical-align.epub
>   上記の表示例を作成するために用いたサンプルです。
>   ※電書協ガイドの CSS をそのまま利用しています。
> 
> ・140919-vertical-align-2.epub
>   上記のサンプルから、余計な CSS を省いたサンプルです。
>   text-top/text-bottom と、top/bottom について、
>   それぞれ他と別に確認するための記述を追加しています。
> 
> text-top の位置が画像と異なるのは middle の直後にあるからではないか、
> という意見がありましたが、試してみたところ、そのようなこともないようです。
> 
> <140918-vertical-align.pdf><140918-vertical-align.epub><140919-vertical-align-2.epub>
>

Received on Saturday, 20 September 2014 18:29:08 UTC