垂直グリッドと漸進的な行間隔の例

新しい質問

急いで来て、急いで行ってください。 「垂直グリッドとプログレッシブ行間隔 (パート 1)」の前回のリリースから 2 か月以上が経過しました。一方、前回の結果を見てみましょう。はぁ？サイドベットが少し奇妙に感じられるのはなぜでしょうか?

(デモ6.html)

または、タイポグラフィに関する私の記事を参照してください。

• 中国のインターネットで最もよく使われる行間隔は約1.5です。
• 行の長さが長くなるほど、行間隔を大きくする必要があります。(行間隔が小さすぎると、読者は簡単にテキストを連続して読んでしまいます。行間隔が大きすぎると、読者は行を読むときにテキストが連続していないと感じてしまいます。)

欄外注のフォントサイズが 12 ピクセルの場合、行の高さが 24 ピクセルでは明らかに大きすぎるようです。しかし、前回の方法によれば、縦のリズムは欄外注の行間隔と本文の行間隔が一致している必要がある。したがって、垂直のリズムを維持するためには、両側の行間隔を同時に狭めるしかありません。要約: 信頼性がありません。では、確立した垂直のリズムが効果的になるように、余白の行間隔をどのように調整すればよいのでしょうか?このため、漸進的な行間隔を導入する必要があります。

漸進的な行間隔

一般的に、漸進的な行間隔は、厳格な垂直リズムを補完するものです。垂直リズムでは、欄外の注釈が本文の各行に揃う必要があります。対照的に、漸進的な行間隔では、欄外の注釈もメインのテキストと揃えることができますが、すべての行ではなく、数行ごとに揃える必要があります。一般的には、4 行または 5 行ごとに配置が行われます。前の記事を見直して、この記事の冒頭の例には次の「構成」があることを確認しましょう。

• 本文: フォントサイズ 14px、行間隔 24px、段落間隔 24px
• h1: フォントサイズ 24px、行間隔 24px、段落間隔 24px、段落間隔 24px
• h2: フォントサイズ: 18px、行間隔 24px、段落間隔 12px、段落間隔 12px
• 注記テキスト: フォントサイズ 12px、行間隔 24px、段落間隔 24px
• 注記: 境界線の太さは 1px、パディングは 11px です。12px 上に移動することを忘れないでください。

欄外注の行間隔と段落間隔を18pxに変更します。すると状況は次のようになります:

(デモ9.html)

最初の行のベースラインが揃っていないのはなぜかお気づきでしょうか?これは、フロー レイアウトでは、行の高さに応じてテキスト ブロックが上部に揃えられるためです。以下のように表示されます。

したがって、ここでは、最初の行のベースラインを揃えるために、マージンを特定のピクセル数だけ下げる必要もあります。残念ながら、何ピクセル減らせばいいのでしょうか? これは非常に複雑な問題です。何度か試してみましたが、まだパターンが見つかりません。次の 3 つの結論しか導き出せません。

• 本文行の高さをh px、脚注行の高さをh' px、下げる値をd pxとすると、この値は1/2(hh') < d < (hh') の範囲になります。①
• 行内に欧文文字（半角数字または英字）が含まれる場合、欧文文字がない場合と比べて行のベースラインが 1 ピクセルずれることがあります。
• 異なるフォント レンダリング エンジンでは動作が一貫していない場合があります。