1

今日、CSS Typography と、単純なベースライン グリッドの設定方法に関する記事を読みました。やってみるのも楽しそうだなと思って設定してみたのですが、どうやら思い通りにいかないようです。

フルスクリーンのフィドルは次のとおりです: http://jsfiddle.net/j5Tav/embedded/result/
コード付き: http://jsfiddle.net/j5Tav/

ベースラインを視覚化するために、Baselinerをブックマークレットとして使用します。JavaScript を使用してベースラインを表示します。

私の SCSS コードからわかるように、ベースラインを 21px、フォント サイズ 14px に設定しました。 

/* Reset */
* { margin: 0; padding: 0; }

/* Variables */
$bodyFontSize: 14px;
$baseline: 21px; /* 1.5 for 14px */

body {
    font-size: $bodyFontSize;
    line-height: $baseline;
}

article {
    margin: 0 auto;
    width: 65%;
}

h1,
h2,
p {
     margin-bottom: $baseline;
}

h1 {
    font-size: $bodyFontSize * 2;
    line-height: $baseline * 2;
}

h2 {
    font-size: $bodyFontSize * 1.8;
     line-height: $baseline * 1.8;
}

それでも、フル スクリーン フィドルで Baseliner を使用し、ブックマークレットに 21 を入力すると、ベースラインが完全にオフになります。なんで？なんか計算間違った？

4

3 に答える 3

3

この記事の「醜い」セクションを見てください。

http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

つまり、すべての要素に同じ行の高さを適用しても、それらの要素内のテキストが、念頭に置いているベースライン グリッドに揃えられるとは限りません。これは、CSS では、テキストが line-height 値の垂直方向の中央に設定されるためです。

たとえば、6 ピクセルのテキストを含む 1 つの段落と 24 ピクセルのテキストを含む別の段落があり、両方の行の高さの値が同じ (たとえば、30 ピクセル) である場合、これらの段落のテキストは、同じベースライン。

CSS で均一なベースライン グリッドを実現するには、フォント サイズが異なる各テキスト要素を垂直方向にオフセットする必要があります。これを行うには、テキストが選択した行の高さに揃えられない各要素の下部と上部にパディングを追加します。John Keyes による Baseliner のようなツールは、「真の」ベースラインがどこにあるかを知るのに役立ちます。

http://keyes.ie/things/baseliner/

上下のパディングが行の高さの値になるようにする必要があります。たとえば、h1 要素の上部パディングに 5 ピクセルを追加して、目的の 10 ピクセルのベースライン グリッドに揃える必要がある場合、h1 要素の高さの合計を得るために、下部パディングに 5 ピクセルを追加する必要があります。要素 (パディングを含む) を 10 ピクセルの倍数に等しくします (その行の高さが 10 ピクセルの倍数 (10 ピクセル、20 ピクセルなど) に設定されていると仮定します)。この目的で余白を使用することもできますが、余白が崩壊するために乱雑になる可能性があります。さらに、line-height が font-size よりも小さいことは避けたいと考えています。また、1 つの要素で 2 つの異なるフォント サイズを組み合わせることも避けたいと考えています。これは、ベースライン グリッドから外れてしまう可能性があるからです。引用記事にあるように、

于 2013-07-15T22:22:49.230 に答える
1

垂直リズムを手動で設定するのは面倒です。

質問に のタグを付けscssたので、その素晴らしさを利用してみませんか? コンパスのバーティカルリズムを見てみよう！

于 2013-07-16T10:41:02.910 に答える
0

フォントのメトリックを知る必要があるため、ほとんどのベースライン/垂直リズム手法は使いにくいと思います。少し使いやすい方法を考えてみました。HTML + CSS + Utility フォントを使用しています。フォント メトリクスを知る必要はなく、フォントを組み合わせて組み合わせることもできます。

これがあなたの初期設定の例です

/* Reset */

* {
  margin: 0;
  padding: 0;
}

:root {
  --baseline: 21px;
}


/* 1. Include a baselined font */

@font-face {
  font-family: "Baseline Em";
  src: url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff2") format("woff2"), url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff") format("woff"), url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Show grid lines */

body {
  padding: calc(var(--baseline) * 2px) 100px 100px;
  /* mult of grid */
  background-repeat: repeat-y;
  background-size: 100% var(--baseline);
  background-image: linear-gradient( to bottom, #0ff 0, rgba(255, 255, 255, 0)1px);
}

article {
  margin: 0 auto;
  width: 65%;
  margin-bottom: var(--baseline);
}

/* 2. Setting block elements up */
h1,
h2,
p {
  font-family: "Baseline Em"; /* Baselined font only needed at block level */
  line-height: 1em;
}

/* 3. Making sure only block leading is considered */
span {
  line-height: 0;
}

/* 4. Set leadings + margins */
h1 {
  font-size: calc(var(--baseline) * 2); /* Your leading: Mult of baseline */
  margin-bottom: var(--baseline); /* Mult of baseline */
}
h2 {
  font-size: calc(var(--baseline) * 2);
  margin-bottom: var(--baseline);
}
p {
  font-size: calc(var(--baseline) * 1);
  margin-bottom: var(--baseline);
}

/* 5. Set fonts + font-size */
h1 span {
  font-family: Arial; /* Whatever you want */
  font-size: calc(var(--baseline) * 2); /* Your font-size: Whatever you want */
}
h2 span {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: calc(var(--baseline) * 1.8);
}
p span {
  font-family: Verdana;
  font-size: 14px;
}
<article>
  <h1><span>Heading 1</span></h1>
  <h2><span>Heading 2</span></h2>
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar eleifend nisi. Aliquam ultrices laoreet ligula vel elementum. Etiam eu faucibus nisi, vel suscipit nisl.</span></p>
</article>
<article>
  <h1><span>Heading 1</span></h1>
  <h2><span>Heading 2</span></h2>
  <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar eleifend nisi. Aliquam ultrices laoreet ligula vel elementum. Etiam eu faucibus nisi, vel suscipit nisl.</span></p>
</article>

于 2019-04-23T00:49:31.010 に答える