- From: Shinyu Murakami <murakami@vivliostyle.com>
- Date: Sun, 21 Sep 2014 03:28:38 +0900
- To: public-html-ig-jp@w3.org
いしづさん、石井さん 村上です。 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の結果(正しい)の 3… text-top 4… 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 では、 > 先に出てくる「5」「6」に続く 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 の挙動についての質問です。 > > 【1】 > 各ブラウザにおいて、テキストのみに適用した場合と、画像のみに適用した場合で > 表示位置が異なるのは何故なのでしょうか。 > CSS2.1 の仕様を見るかぎりでは、画像のケースのほうが正しいように思えます。 > > > 【2】 > 以下のような指定をした場合 > ---- > <span style="vertical-align: top;">5<span>5</span></span> > <span style="vertical-align: bottom;">6<span>6</span></span> > ---- > あるいは、 > ---- > <span style="vertical-align: top;">5<img src="../image/i-005.png"/></span> > <span style="vertical-align: bottom;">6<img src="../image/i-006.png"/></span> > ---- > このとき、Google Chrome や Safari では、 > 先に出てくる「5」「6」に続く 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