CSS排版 - 爲什麼基線網格完全關閉？

今天我讀了關於CSS排版和如何建立一個簡單的基線網格的文章。我認爲這樣做可能很有趣，所以我設置了一切，但顯然它看起來並不像預期的那樣。CSS排版 - 爲什麼基線網格完全關閉？

這裏是全屏小提琴：http://jsfiddle.net/j5Tav/embedded/result/
，及代碼：http://jsfiddle.net/j5Tav/

形象化基線我用Baseliner作爲一個書籤。它使用JavaScript顯示一個基線。

正如你可以從我的SCSS代碼中看到的，我確定的基準爲14px的的字體大小21px：

/* 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; 
}

不過，當您使用底線上全屏小提琴和輸入21到書籤，基線完全關閉。爲什麼？我計算了什麼錯誤？

來源

2013-01-22 Sven

聽起來就像你遇到舍入不一致（14px * 1.8 = 19.6px）。您是否有特定的原因選擇在每個線條高度上指定單位？（請參閱：http：//meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/和https://developer.mozilla.org/en-US/docs/CSS/line-height） – cimmanon

@cimmanon \t 不，沒有具體原因。通常我會這樣做，就像你的鏈接建議 - 沒有單位。但有一個變量像$ baseline：21;對我來說似乎很陌生。通常我使用REM與px後備文本大小，但不知何故jsfiddle無法處理。你有一個想法如何避免這些問題？我仍然困難地圍繞着基線概念 - 目前我正在以一個div高度的rem值結束。 – Sven

它似乎喜歡你試圖使用一個單一的變量，當它更合適的有2：'$ multiplier：1.5'（對於行高）和'$ baseline：$ font-size * $ line-height '（用於填充等）。 – cimmanon

看看這篇文章的「醜陋」部分：

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

總之，採用相同的行高到所有元素將不能保證這些元素中的文本會與您想到的基線網格對齊。這是因爲在CSS中，文本被設置爲行高值的垂直中心。

例如，如果您有一個帶6像素文本的段落，另一個帶有24像素文本的段落並且它們都具有相同的行高度值（例如30像素），則這些段落的文本將不會對齊到相同的基線。

爲了實現CSS統一的基線網格，你必須垂直偏移具有不同的字體大小每個文本元素。您可以通過在每個元素的底部和頂部添加填充來實現此目的，其中文本不會與您選擇的線條高度對齊。由約翰·凱斯像底線的工具可以瞭解是有益的，其中的「真」基線是：

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

你要確保頂部和底部填充了添加到您的行高值;例如，如果你有添加的H1元件的頂部填充的5個像素，使得其以10個像素的期望的基線網格對齊，則必須爲5個像素添加到底部填充，以便使H1的總高度元素（包括填充）等於10個像素的倍數（假設它的行高已被設置爲多個10像素，例如10像素，20像素等）。您也可以爲此使用利潤率，但由於利潤率下降，這可能會變得麻煩。此外，您希望避免使行高小於字體大小，並且希望避免在一個元素中組合兩種不同的字體大小，因爲這也可能會導致基線網格脫離。正如引用的文章指出的那樣，創建一個真正的CSS基線網格相當混亂，至少如果你手動完成。

來源

2013-07-15 22:22:49 Gerry

手動設置垂直節奏是一種痛苦。

您已經標記了你的問題與scss，那麼爲什麼不使用它的迷死？看看Compass的垂直節奏！

來源

2013-07-16 10:41:02

指南針似乎現在放棄了 - 最近1.5年沒有更新。算法也不能真正爲不同大小的字體設置正確的基線距離。這是一個更好的算法：https：//gist.github.com/razwan/10662500 –

CSS排版 - 爲什麼基線網格完全關閉？

回答

相關問題