2

CSS/SASS で固体ベースライン グリッドを作成する背後にある数学を理解しようとしています。

これまでのところ、特定のページのテキストをグリッドに設定することはできますが、見出しの長さが変更されて折り返されるとすぐに、後続のすべての要素がグリッドから外れます。

次の単純な HTML コードを見てください。

<h1>A big greyish rounded bulk, the size, perhaps, of a bear, was</h1>
<p>A big greyish rounded bulk, the size, perhaps, of a bear, was rising slowly and painfully out of the cylinder.  As it bulged up and caught the light, it glistened like wet leather.</p>
<p>Two large dark-coloured eyes were regarding me steadfastly.  The mass that framed them, the head of the thing, was rounded, and had, one might say, a face.  There was a mouth under the eyes, the lipless brim of which quivered and panted, and dropped saliva.  The whole creature heaved and pulsated convulsively.  A lank tentacular appendage gripped the edge of the cylinder, another swayed in the air.</p>

この SASS コードと一緒に:

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600");

// These are the basic values to set up a baseline & vertical rhythm
$font-size: 16px;
$line-height: 24px;
$rhythm-unit: $line-height;

html {
    background-image: url(http://basehold.it/i/24);
    font-family: "Open Sans";
    // Converting the font size to em
    font-size: ($font-size / 16px) * 1em;
    // Converting the line height to a unitless number
    line-height: $line-height / $font-size;
}

// Vertical rhythm & single margin direction
h1,
p {
  margin-top: 0;
  margin-bottom: $rhythm-unit;
}

h1 {
  // Arbitrary values that look good
  font-size: 3.375em;
  line-height: 1.3;

  // To now restore the baseline grid, we need to apply
  // a margin bottom value that accomodates for font size
  // and line height.
  //
  // Font size in px: 3.375 * $font-size = 54px
  // The next multiple of our $rhythm-unit is 56. That
  // means 2px need to be shifted.
  // 2px in em: 2 / 54px = 0.03703703704;
  margin-bottom: 0.03703703704em;

  // Now that we have accomodated for font size, we need
  // to do the same with line height.
  // Line height in px: 1.3 * 54px = 70.2px
  // The next multiple of our $rhythm-unit is 72. That
  // means 1.8px need to be shifted.
  // 1.8px in em: 1.8 / 54px = 0.03333333333;
  margin-bottom: 0.03703703704em + 0.03333333333em;
}

ご覧のとおり、Live Exampleの方が理解しやすいことを期待して、かなりコメントしました。

説明されている動作を確認するには、 の長さを変更し<h1>て、次の段落がどうなるかを確認してください。

わかった ここに画像の説明を入力

良くないですよ ここに画像の説明を入力

この例では、影響は最小限かもしれませんが、長いテキストでは、ますます強くシフトし始めます。

複数行の見出しまたは1行の見出しで機能する理由が本当にわかりません。しかし、もっと重要なこと: 私の要件に従ってベースライン グリッドを設定することは可能ですか?

  • em でのすべてのテキスト関連の測定値
  • font-size&line-heightは自由に設定する必要があり、倍数などに従わない
  • line-height無単位である必要がある
  • 見出しや段落が何行折り返されるかわかりません。
4

1 に答える 1