CSS1 テストスイート: 5.4.4 vertical-align

下記のテキストに適用されるスタイル宣言は、つぎのとおりです。

P {font-size: 12pt;}
.one {vertical-align: sub;}
.two {vertical-align: super;}
.three {vertical-align: top; font-size: 12pt;}
.four {vertical-align: text-top; font-size: 12pt;}
.five {vertical-align: middle; font-size: 12pt;}
.six {vertical-align: bottom; font-size: 12pt;}
.seven {vertical-align: text-bottom; font-size: 12pt;}
.eight {vertical-align: baseline; font-size: 12pt;}
.nine {vertical-align: 50%; font-size: 12px; line-height: 16px;}

P.example {font-size: 14pt;}
BIG {font-size: 16pt;}
SMALL {font-size: 12pt;}
.ttopalign {vertical-align: text-top;}
.topalign {vertical-align: top;}
.midalign {vertical-align: middle;}

この文の最初の4文節は下付文字揃えのはずです。 下付文字テキストのフォントサイズは親要素のものと違わないはずです。

この文の最初の4文節は上付文字揃えのはずです。 上付文字テキストのフォントサイズは親要素のものと違わないはずです。

この文の最初の4文節は上端揃えのはずです。 これは、上端が、行の中で最も背の高い要素(おそらくは橙色の長方形)の上端と揃っているはずです。

この文の最初の4文節はテキスト上端揃えのはずです。 これは、上端が、行の中で最も背の高いテキストの上端と揃っているはずです。

この文の最初にある画像は中揃えのはずです。 これは、中央が、テキストのベースラインにx-heightの半分を加えたものとして定義される点と揃っているはずです。

この文の最初の4文節はサイズが12ptで、下揃えのはずです。 これは、下端が、行の中で最も低い要素の下端と揃っているはずです。

この文の最初の8文節(英語の"eight"にはディセンダがあります)はサイズが12ptで、テキスト下揃えのはずです。 これは、下端が、行の中で(ディセンダを含めて)最も低いテキストの下端と揃っているはずです。

この文の最初の4文節はサイズが12ptで、ベースライン揃えのはずです。 これは、ベースラインが、行の残りのテキストのベースラインと揃っているはずです。

この文の最初の4文節はフォントサイズが12pxで行の高さが16pxのはずです。 またそれらは50%揃えです。 これは、自然なベースラインに対して8px持ち上がっているはずです。

以下の段落では、画像はすべて14ポイントのテキストの上端と揃っているはずで、これはテキストの最初のセクションと同一ですが、その一方、どのサイズのテキストもテキストベースラインと揃っているはずです(これはデフォルト値です)。

この段落には いろいろな高さや 幅の 数多くの画像が 含まれており、そのすべてが 14ポイントテキスト要素の 上端と 揃っているはずで このことは画像が現れる 行とは無関係です。

以下の段落では、画像はすべてデフォルトテキストの中央に揃っている一方、どのテキストもテキストベースラインと揃っているはずです(これはデフォルト値です)。

この段落には いろいろな高さや 幅の 数多くの画像が 含まれており、そのすべてが 14ポイントテキスト要素の 中央と 揃えられているはずで このことは画像が現れる 行とは無関係です。

以下の段落では、要素はすべて、その行で最も背の高い要素の上端と揃っているはずです。 その要素が画像であるかどうかとは無関係です。 テキストの断片には、これが起こるように、それぞれ適切にSPANをつけています。

この段落には いろいろな高さや 幅の 数多くの画像や テキストが含まれており それらはすべて その要素が出現する行で 最も背の高い要素の 上端と 揃っているはずです。