css 画像 「親ボックスのベースライン」の定義は何ですか?




vertical-align 画像 (4)

この答えのインタラクティブ版については、この答えの下をチェックしてください。これは、この答えからのステートメントを自分で検証するのに役立ちます。 この回答は、Vincent De Oliveiraによるブログへの投稿に基づいています。 それは必読です。

ベースラインとは

下の画像や他の多くの画像も同様にベースラインを指定していますが、正確には何ですか。

インラインテキスト要素は同じ高さではありません...

インラインテキスト要素の高さを測定するために、 content-areaという用語を使用します。 Windows用のこれらの要素の内容量は、次のように計算されます。

Content-area=(Win Ascent + Win Descent)/Em Size * Font Size

以下の例をいくつか参照してください。

  • Merriweather Sansのコンテンツ領域は25pxです(2014 + 560)/ 2048 * 20≒25px
  • (2189 + 600)/ 2048 * 20≒27ピクセルなので、能登さんのコンテンツエリアは27ピクセルです。

下のスクリーンショットに示すように、たとえばFontForgeを使用してこれらの値を見つけることができます。

メリウェザーサンズ(右)、能登サンズ(左)

この場合、各フォントに対して[content-area] = [line-box]となります。これはdev-toolsを使用して要素のコンテンツ領域を測定できる特別な場合です。

テキストを読みやすくするためのテキスト要素の整列方法

これを行うには、ベースラインを使います。

以下の例では、line-heightを増やしてもcontent-box(色付き領域)は増えませんが、オレンジ色のインライン要素のline-boxは増えます。 さらに、 両方の要素がそれらのベースラインに沿って相互に整列していることに注意してください ベースラインは各フォントによって別々に定義されます。 ただし、2つの異なるフォントがベースラインに沿って並んでいると、結果のテキストは読みやすくなります。

これは、ベースラインが緑色の線で表示されている画像です。

次の例では、オレンジ色の要素は、親のコンテンツ領域の上部に対して配置されています。 しかしながら、トマト着色要素は、親の支柱のベースラインに関して整列している。 支柱は、親の行ボックスを開始する幅0の文字です。

トマト色の要素が上がったように見えるかもしれませんが、そうではありません。 支柱に対する相対位置は変わりません。

結論

ベースラインとは、書体の作成者がフォントをデザインしたり、異なるフォントを「相互に互換性」にするために使用する行です。 ベースラインは、すべて独自のコンテンツ領域を持つさまざまなフォントで構成されたテキストをベースラインに沿って配置し、読みやすくすることができるように選択されます。

親ベースラインは、親のストラットのベースラインです。これは、インライン要素を整列させるのに役立つ、定義済みベースラインを持つ幅0の文字です。

この回答のインタラクティブバージョン

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

span {
  margin: 0;
}

p.pr {
  background-color: blue;
}

span.mw {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: 20px;
  line-height: 40px;
  background-color: orange;
}

span.ar {
  font-family: 'Noto Sans', sans-serif;
  font-size: 20px;
  background-color: tomato;
}
<h1>What is baseline?</h1>
The image below, and many other images alike specify a basline, but what is it exactly?
<img src="https://i.imgur.com/SJrxQHj.png">
<br><br>
<h1>Inline text elements are not the same height...</h1>
To measure the height of an inline text element I will use the term <b>content-area</b>. Content-area of these elements for windows is calculated as follows:
<p>Content-area=(Win Ascent + Win Descent)/Em Size * Font Size</p>
<p>See a few examples below:</p>
<ul>
  <li>Merriweather Sans has a content-area of 25px because (2014+560)/2048*20≈25px <span class="mw">Abg</span></li>
  <li>Noto Sans has a content-area of 27px because (2189+600)/2048*20≈27px <span class="ar">Abg</span></li>
</ul>
<p>You can find this values using for example FontForge, as shown on the screenshots below:</p>
<table>
  <tr>
    <td><img src="https://i.imgur.com/h0th3Rv.png"></td>
    <td><img src="https://i.imgur.com/aRymbaf.png"></td>
  </tr>
</table>
In this case for each font we have [content-area]=[line-box] and this is a special case in which you can measure the content-area of the element with dev-tools:
<img src="https://i.imgur.com/4kuFCIf.png">
<h1>How to align text elements to make text readable?</h1>
<p>To do this you use the baseline.</p>
In the example below you can see that increasing the line-height doesn't increase the content-box (the colored area), but it does increase the line-box of the orange inline element. Furthermore, notice that <b>both elements are mutually aligned along their baseline which is defined by the font itself.</b> The baseline is defined by each font separately. However, when two different fonts align along their baseline, the resulting text is easily readable.
<p class="pr">
  <span class="mw">Abg (line-height=40px)</span><span class="ar">Abg</span>
</p>
This is an image with the baseline showed as a green line: <img src="https://i.imgur.com/OlHqb3J.png">
<br><br>
In the example below, the orange element is aligned in respect to the top of the parent's content area. However, the tomato colored element is aligned in respect to the baseline of the <b>strut</b> of the parent. A strut is a zero-width character which starts the line-box of the parent.
<br><br>
It might seem that the tomato colored element has moved up, but it is not the case. Its position relative to the strut has not changed.
<p class="pr">
  <span class="mw" style="vertical-align:top;">Abg</span><span class="ar">Abg</span>
</p>
<h1>Conclusion</h1>
<p>A baseline is a line which typeface authors use to design their fonts. The baseline is chosen so that a text composed out of different fonts, which all have their own content-area, can be aligned along the baseline and remain easily readable.</p>
<p>A parent baseline is a baseline of the parent's strut, which is a zero-width character with a defined baseline which helps to align inline elements.</p>

以下の10のビジュアルフォーマットモデルの詳細 - W3Cからの抜粋を理解できません。

抜粋:

baseline:ボックスのベースラインを親ボックスのベースラインと揃えます。 ボックスにベースラインがない場合は、下余白の端を親のベースラインと揃えます。

この文脈で「親ボックスのベースライン」とはどういう意味ですか? 「親ボックス」とは、親要素によって設定された行ボックスまたはボックスを指しますか。 「親ボックスのベースライン」を計算する方法


また、仕様に従って、特定の定義も見つかりませんでした。

以下の値は、親インライン要素、または親ブロックコンテナ要素のストラットに関してのみ意味を持ちます。

親ボックスに子としてテキストノードがある場合、子テキストノードのベースラインは親ボックスのベースラインであると推測できます。

例えば:

.parent {
  display: inline;
  background:pink;
  font-size:40px;
  font-family:Microsoft Yahei;
  line-height:2;
  vertical-align:baseline;
}
.element-child {
  font-size:25px;
}
<div class="parent">
   textNode child of parent 
  <span class="element-child">
    element-child with another font-size
  </span>
</div>

子テキストノードの有無にかかわらず、親ボックスのベースラインは、子テキストノードのベースラインと同じ位置にあります。


この絵を見て、正確にbaselineが何かを確かめてください。

それでは、ドキュメントが何を言いたいのかを説明しましょう。

vertical-align: baselineを定義すると、要素は上の図のように親要素のベースラインのベースラインに揃えられます。


この仕様は、親ボックスが上記のいくつかの段落だけを参照していることを示しています。

以下の値は、親インライン要素、または親ブロックコンテナ要素のストラットに関してのみ意味を持ちます。

そのため、親ボックスは親要素によって生成されたボックスを指し、他の要素と同じように親ボックスのベースラインを計算します。





css